How to Set Properties of a Web Component

Attribute binding can get complex. Here’s a running list of examples of how to do it.

 

To set properties on a Web Component use the Angular [property] binding syntax. To listen to events use the Angular (event) binding syntax.

<!--
- status - attribute style hook
- [closable] - setting the 'closable' property on the element
- (closeChange) - listen for the 'closeChange' custom event
-->

<cds-alert status="info" [closable]="true" (closeChange)="log($event.detail)">
  Hello World
</cds-alert>