Is it possible to bind an angular property value into the value of an html attribute?

Is it possible to bind an Angular property value to a data attribute on a template element?

Here’s an example.

<h1 data-name="{{name}}">Hello from {{ name }}!</h1>

When we run that stackblitz, it produces this error:

Error in src/main.ts (11:9)
Can't bind to 'name' since it isn't a known property of 'h1'.

Thoughts?

>Solution :

Yes,

<h1 [attr.data-name]="name">Hello from {{ name }}!</h1>

Based on How can I write data attributes using Angular?