npm install -g @angular/cling new project-name --style=css --routing --standalone --defaults
This quickstarts examples are based on the Server Routing and App Engine APIs.
Make sure while creating your angular project you accept (press ‘y’) the routing and App Engine.
//CUSTOM_ELEMENTS_SCHEMA lets you use the Hanko Elementsimport { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';import { Router } from '@angular/router';//function to register hanko elementimport { register } from "@teamhanko/hanko-elements";import { environment } from '../../environments';@Component({ //Selector you will use in the pages html files selector: 'app-hanko-auth', imports: [], templateUrl: './hanko-auth.component.html', styleUrl: './hanko-auth.component.css', schemas: [CUSTOM_ELEMENTS_SCHEMA],})export class HankoAuthComponent { hankoApi = environment.HANKO_API_URL; constructor(private router: Router) { register(this.hankoApi).catch((error) => { // handle error }); } redirectAfterLogin() { //Succesfully logged in, redirect to any path you want. this.router.navigate(['/dashboard']); }}
Now Import the HankoAuth component into the home page you previously made.
<!-- This is the selector from the hanko-auth.component.ts file --><app-hanko-auth/>
<!-- This is the selector from the hanko-auth.component.ts file --><app-hanko-auth/>
import { Component } from '@angular/core'; import { HankoAuthComponent } from '../hanko-auth/hanko-auth.component'; @Component({ selector: 'app-home', imports: [HankoAuthComponent],//Import the component into your page templateUrl: './home.page.html', styleUrl: './home.page.css' }) export class HomePage { }
After setting up the HankoAuth let’s set up the HankoProfile component to create a interface where users can manage their Email Addresses and credentials.
//CUSTOM_ELEMENTS_SCHEMA lets you use the Hanko Elementsimport { Component , CUSTOM_ELEMENTS_SCHEMA} from '@angular/core';//function to register hanko elementimport { register } from '@teamhanko/hanko-elements';import { environment } from '../../environments';@Component({ //Selector you will use in the pages html files selector: 'app-hanko-profile', imports: [], templateUrl: './hanko-profile.component.html', styleUrl: './hanko-profile.component.css', schemas: [CUSTOM_ELEMENTS_SCHEMA]})export class HankoProfileComponent { hankoApi = environment.HANKO_API_URL; constructor() { register(this.hankoApi).catch((error) => { // handle error }); }}
Now Import the HankoAuth component into the dashboard page you previously made.
<!-- This is the selector from the hanko-profile.component.ts file --><app-hanko-profile/>
<!-- This is the selector from the hanko-profile.component.ts file --><app-hanko-profile/>
import { Component } from '@angular/core'; import { HankoProfileComponent } from '../hanko-profile/hanko-profile.component'; @Component({ selector: 'app-dashboard', imports: [HankoProfileComponent],//Import the component into your page templateUrl: './dashboard.page.html', styleUrl: './dashboard.page.css' }) export class DashboardPage { }