How do you define typings for custom elements?

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.

  1. The simple container with input property would be as below,
@Component(...)
class MyContainer {
@Input() message: string;
}
  1. After applying types typescript validates input value and their types,
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`.

March 22, 2022
419