How do I pass a list from an angular 4 component to html

Question

I am using angular 4 and I want to pass a list to html. In angular 4, the component I have is:

a = ["abc", "xyz", "lmn"]

On the html side: <input type="text" data-provide="typeahead" data-source='["abc","xyz","lmn"]' placeholder="item..." class="form-control" />

I have to pass the list in data-source, it's a Bootstrap-3-Typeahead js object.

How do I use it with angular 4

Answer 1

You can bind any attribute with component variable by using attr keyword

<input type="text" data-provide="typeahead" [attr.data-source]="a" placeholder="item..." class="form-control" />