angular 2 make mdl-badge data-badge content dynamic

Question

i'm using angular 2 material design and i want bind data to the mdl-badge but I get an error when i doing this way.

html code

 <div class="material-icons mdl-badge mdl-badge--overlap" data-badge={{numFlags}}>num Of flags</div>

ts component

   this.numFlags=msg++;

What error? Maybe it's worth nothing, but have you tried: `[data-badge]=numFlags`? — developer033, May 07 '17 at 00:38
yes i tried it write me into the data-badge "numflags" . i want the value of the numflags. to bind the data. — Manspof, May 07 '17 at 00:43

score 4 · Accepted Answer · answered May 07 '17 at 00:55

4

That syntax is not valid. You have to use

[attr.data-badge]="numFlags"

or

attr.data-badge={{numFlags}}

in order to bind numFlags to data-badge.

answered May 07 '17 at 00:55

QoP

1 Answers1