What are the mapping rules between Angular component and custom element?

Posted by Jessica Taylor | Updated on

The Component properties and logic maps directly into HTML attributes and the browser’s event system. Let us describe them in two steps,

  1. The createCustomElement() API parses the component input properties with corresponding attributes for the custom element. For example, component @Input(‘myInputProp’) converted as custom element attributeĀ my-input-prop.
  2. The Component outputs are dispatched as HTML Custom Events, with the name of the custom event matching the output name. For example, component @Output() valueChanged = new EventEmitter() converted as custom element with dispatch event as “valueChanged”.

If you like this question & answer and want to contribute, then write your question & answer and email to freewebmentor[@]gmail.com. Your question and answer will appear on FreeWebMentor.com and help other developers.

Related Questions & Answers