0 votes
in Angular by

How do you define typings for custom elements?

1 Answer

0 votes
by

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,

@Component(...)

class MyContainer {

  @Input() message: string;

}

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`.

...