for some reason i cannot place *ngFor inside template of chips

[Moshe Vilner]

Hi, i'm trying to enhance the md-chip-list component in way it will act like material 1 version chips component 

Here is my code:

@Component({

  moduleId: module.id,

  selector: 'md-chip-list',

  template: `<div [class]="focused">

                <md-chip *ngFor="let tag of list" class="md-primary">{{tag}}</md-chip>

                <input class="md-input" 

                (focus)="onFocus()" 

                (focusout)="focusOutFunction()"  

                (keyup.enter)="keyPress(box.value)" 

                #box>             

             </div>`,

I getting error :Can't bind to 'ngForOf' since it isn't a known property of 'md-chip'
I know that usually angular should feel comfortable with *ngFor, my suspections "npm run demo-app" somehow removes the asterix...

Hope someone here will have some time for my question

Thanks Guys

[Topher Fangio]

I think your component is a bit off.

First off, there is already a md-chip-list component, so utilizing the same selector will probably give you issues. You should use a prefix like "my-chip-list" if you really want to override it. However, you should be able to just utilize it:

<md-chip-list>

  <md-chip *ngFor="let tag of list">{{tag}}</md-chip>

</md-chip-list>

I've got a PR which updates the demo to use ngFor, so you can take a look at that code: https://github.com/angular/material2/pull/2046/files#diff-c127207d5ba82d35ff48fbd7db9e2e16R34

The PR doesn't "add" the ability to use ngFor, though. It should "just work" out of the box.

[Moshe Vilner]

Hi thanks for you answer, anyway - currently i can see that in angular2 version is no ability to add / remove / persent collections of chis like in angularjs 

[Moshe Vilner]

That is what i'm trying to do:to modify current chips-list component in  a way it will able to receive array and display list of chips.

The problem is following markup in the template of chip-list  causes error.(Also *ngIf)

<div *ngFor="let tag of ['jojo']" class="md-primary">{{tag}}</div> 

It is very strange since you can add this same markup to template of checkbox and it is working fine...