Angular
Learn how to add the Corbado web component to your Angular application.
To get started with the integration in Angular, install the dependencies and get all required setup data, please follow the guide of web component integration first.
To prevent build failures due to unrecognized elements, Angular mandates the declaration of custom elements within your Angular modules. To achieve this, you should import the
CUSTOM_ELEMENTS_SCHEMA and include it in the schemas section of your module:app.module.ts
1
import {CUSTOM_ELEMENTS_SCHEMA, NgModule} from '@angular/core';
2
import {BrowserModule} from '@angular/platform-browser';
3
4
import {AppComponent} from './app.component';
5
import {ProfileComponent} from './profile/profile.component';
6
import {AppRoutingModule} from './app-routing.module';
7
import {LoginComponent} from './login/login.component';
8
9
@NgModule({
10
declarations: [
11
AppComponent,
12
ProfileComponent,
13
LoginComponent,
14
],
15
imports: [
16
BrowserModule,
17
AppRoutingModule
18
],
19
providers: [],
20
bootstrap: [AppComponent],
21
schemas: [CUSTOM_ELEMENTS_SCHEMA]
22
})
23
export class AppModule {
24
}
login.component.html
login.component.ts
declarations.d.ts
login.component.html
1
<corbado-auth project-id="{PROJECT_ID}" conditional="yes">
2
<input name="username" id="corbado-username" required autocomplete="webauthn"/>
3
</corbado-auth>
login.component.ts
1
import {Component} from '@angular/core';
2
import '@corbado/webcomponent';
3
4
5
@Component({
6
selector: 'app-login',
7
templateUrl: './login.component.html',
8
styleUrls: ['./login.component.css']
9
})
10
11
export class LoginComponent {}
declarations.d.ts
1
declare namespace JSX {
2
interface IntrinsicElements {
3
'corbado-auth': any;
4
'corbado-logout-handler': any,
5
'corbado-auth-provider': any
6
}
7
}
8
9
declare module '@corbado/webcomponent';
To find a step-by-step tutorial on how to integrate passkeys into Angular, please check out our blog post:
Last modified 1mo ago