Angular 7 html data binging i data-count

Question

I need to bind data to HTML element i:

<i data-count="{{notificationsLength}}" class="fas fa-bell notification-icon" aria-label="Nofitication centre"></i>

I get error message: Can't bind to 'count' since it isn't a known property of 'i'.

Then I tried:

<i (data-count)="{{notificationsLength}}" class="fas fa-bell notification-icon" aria-label="Nofitication centre"></i>

but with the same result.

Thanks for help.

why and what exactly you want to do? can bind only properties known to tag — ashish pal, Mar 18 '19 at 12:12

score 1 · Accepted Answer · answered Mar 18 '19 at 12:12

You can use [attr.*] syntax (without curly braces).

<i [attr.data-count]="notificationsLength" class="fas fa-bell notification-icon" aria-label="Nofitication centre"></i>

For further reading:

score 0 · Answer 2 · answered Mar 18 '19 at 12:14

Use attribute binding syntax instead

<i  [attr.data-count]="notificationsLength" class="fas fa-bell notification-icon" aria-label="Nofitication centre"></i>

You can also use it this way

<i  attr.data-count="{{notificationsLength}}" class="fas fa-bell notification-icon" aria-label="Nofitication centre"></i>

2 Answers2