Links

Angular

Learn how to add the Corbado web component to your Angular application.

1. Prerequisites

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.

2. Define custom elements schema

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
}

3. Add the web component to Angular code

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';

4. Read the blog post

To find a step-by-step tutorial on how to integrate passkeys into Angular, please check out our blog post: