Getting your Embeddable working in an Angular application is very straightforward, but there are a few small things you need to be aware of!
Embedding web components in Angular requires you to include their CUSTOM_ELEMENTS_SCHEMAin order to avoid throwing errors. This can be solved in the component TS file by importing CUSTOM_ELEMENTS_SCHEMAfrom angular/coreand then referencing it in the options you pass to @Component like this:
@Component({
imports: [RouterOutlet],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
selector: 'app-root',
templateUrl: './app.html',
})
Once you have that working, you should be able to include your em-beddable webcomponent code in your app without seeing any errors. However, if you want to add dynamic client context values, you’ll need to go a bit further. We recommend adding a clientContext method that employs signal like this:
protected readonly clientContext = signal(
JSON.stringify({ theme: this.theme })
);
And then to change the value, you’ll want to employ the set method like this:
this.clientContext.set(JSON.stringify({ theme: this.theme }));
(You would, in this example, run that command after the theme value changes)
Looking for more details? Check out client-angular in our example web component repo!