How to force angular to create the property in html when using bind

Issue

I need angular to create the property in my html when I use a 'property binding', but angular only creates it when I write the value directly in the html.

I left a very basic example on stackBlitz, a 'button' component that receives the primary or secondary type and depending on the type of the button it changes the color correctly, but when I check the element, the property is not created typeButton on the button that uses the property binding and in my real application I need this property to be created in the html.

link stackBlitz: stackBlitz

Solution

try it:

@Component({
 ...
 host: {
  '[attr.typeButton]': 'typeButton',
 },
})

for example: https://angular.io/guide/accessibility#case-study-building-a-custom-progress-bar

Answered By - Rafael Marques