Can't use *ngIF inside *ngFor : angular2

Question

i'm using angular2 and i'im binding data from a service , the probleme is when i'm loading data i should filter it by an id , , this is what i'm supposed to do :

<md-radio-button
        *ngFor="#item of items_list"
        *ngIf="item.id=1"
        value="{{item.value}}" class="{{item.class}}" checked="{{item.checked}}"> {{item.label}}
</md-radio-button>

and this is the data:

[
  { "id": 1, "value": "Fenêtre" ,"class":"md-primary" ,"label":"Fenêtre" ,"checked":"true"},
  { "id": 2, "value": "Porte Fenêtre" ,"class":"" ,"label":"Porte Fenêtre" }

]

by the way i want just the data with id =1 to be accepted , but i'm seeing this error:

EXCEPTION: Template parse errors:
Parser Error: Bindings cannot contain assignments at column 14 in [ngIf item.id=1] in RadioFormesType1Component@10:16 ("
        <md-radio-button
                *ngFor="#item of items_list"
                [ERROR ->]*ngIf="item.id=1"
                value="{{item.value}}" class="{{item.class}}" checked="{{item.check"): RadioFormesType1Component@10:16

so any suggestion to use ngif and ngfor together ?

Solution 1

You could use the following:

*ngIf="item.id===1"

instead of

*ngIf="item.id=1"

You try to assign something into the id property (operator =) instead of testing its value (operator == or ===).

Moreoever both ngFor and ngIf on the same element aren't supported. You could try something like that:

<div *ngFor="#item of items_list">
  <md-radio-button
      *ngIf="item.id===1"
      value="{{item.value}}" class="{{item.class}}"
      checked="{{item.checked}}">
    {{item.label}}
  </md-radio-button>
</div>

or

<template ngFor #item [ngForOf]="items_list">
  <md-radio-button
      *ngIf="item.id===1"
      value="{{item.value}}" class="{{item.class}}"
      checked="{{item.checked}}">
    {{item.label}}
  </md-radio-button>
</template>

Solution 2

Another solution is to create custom filtering pipe:

import {Pipe} from 'angular2/core';

@Pipe({name: 'filter'})
export class FilterPipe {
  transform(value, filters) {

    var filter = function(obj, filters) {
      return Object.keys(filters).every(prop => obj[prop] === filters[prop])
    }

    return value.filter(obj => filter(obj, filters[0]));
  }
}

and use it like this in component:

<md-radio-button
  *ngFor="#item of items_list | filter:{id: 1}"
  value="{{item.value}}" class="{{item.class}}" checked="{{item.checked}}"> {{item.label}}
</md-radio-button>

Custom pipe needs to be registered on the component:

@Component({
  // ...
  pipes: [FilterPipe]
})

Demo: http://plnkr.co/edit/LK5DsaeYnqMdScQw2HGv?p=preview

Solution 3

*ngIf and *ngFor on the same tag are not supported. You need to use the long form with an explicit <template> tag for one of them.

update

Instead of <template> use <ng-container> which allows to use the same syntax as inline *ngIf and *ngFor

<ng-container *ngFor="#item of items_list">
  <md-radio-button
        *ngIf="item.id=1"
        value="{{item.value}}" class="{{item.class}}" checked="{{item.checked}}"> {{item.label}}
  </md-radio-button>
</ng-container>

Comments

[Eric Martinez]

Simply, even simpler than the answers : filter the data in your component and you pass it to the view, no need at all to do it in the view.

[firasKoubaa]

thanks but the problem persists EXCEPTION: TypeError: Cannot read property 'id' of undefined in [item.id===1 in RadioFormesType1Component@11:16]

[Thierry Templier]

In fact you need to create a sub element to apply the ngIf. Both ngFor and ngIf on the same element aren't supported...

[firasKoubaa]

yeah the best solution is to use <template>

[gkri]

Small correction for Angular 4, you need to add the pipe to the declarations array of the module containing the component where you want to use the pipe.

[Mitch Wilkins]

since update <ng-container> works like a charm

[Yevgniy Shvartsman]

Thanks, works great!

[Amit Shah]

<template> tag not working instead I used <ng-container>