The Component properties and logic maps directly into HTML attributes and the browser’s event system. Let us describe them in two steps,
- 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
. - 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”.