Q58: How do you define typings for custom elements? - Angular & Signals (283 Qs)

You can use the NgElement and WithProperties types exported from @angular/elements.

Let's see how it can be applied by comparing with Angular component.

The simple container with input property would be as below,

javascript

 @Component(...)
 class MyContainer {
   @Input() message: string;
 }

After applying types typescript validates input value and their types,

typescript

const container = document.createElement('my-container') as NgElement & WithProperties<{message: string}>;
container.message = 'Welcome to Angular elements!';
container.message = true;  // <-- ERROR: TypeScript knows this should be a string.
container.greet = 'News';  // <-- ERROR: TypeScript knows there is no `greet` property on `container`.