You are not able to use ngIf nested within ngFor in Angular 2

Question

You are not able to use ngIf nested within ngFor in Angular 2

I am currently working in Angular2 and trying to bind data from a service. The issue I am facing is that when loading the data, I need to filter it by an ID. Here is what I am trying to achieve:

<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>

Here 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" }

]

My intention is to only accept data with id = 1, but I am encountering 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

Does anyone have any suggestions on how to effectively use ngIf and ngFor together?

json typescript angular angular2-directives angular2-services

Answer 1

Answer №1

You have the option to utilize the following:

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

instead of using

*ngIf="item.id=1"

Be cautious not to mistakenly assign a value to the id property (using the = operator) instead of checking its value (using either the == or === operators).

Additionally, it is not supported to use ngFor and ngIf on the same element. You could consider implementing it like this:

<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>

Answer 2

You have the option to utilize the following:

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

instead of using

*ngIf="item.id=1"

Be cautious not to mistakenly assign a value to the id property (using the = operator) instead of checking its value (using either the == or === operators).

Additionally, it is not supported to use ngFor and ngIf on the same element. You could consider implementing it like this:

<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>

Answer 3

Answer №2

To address this issue, one possible solution is to develop a customized 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]));
  }
}

To utilize the custom pipe within a component, it can be used in the following manner:

<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>

In order for the custom pipe to work effectively, it must be registered within the component:

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

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

Answer 4

To address this issue, one possible solution is to develop a customized 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]));
  }
}

To utilize the custom pipe within a component, it can be used in the following manner:

<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>

In order for the custom pipe to work effectively, it must be registered within the component:

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

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

Answer 5

Answer №3

*ngIf and *ngFor cannot be used together on the same tag. It is necessary to utilize the long form with an explicit <template> tag for one of them.

update

Instead of <template>, consider using <ng-container> which allows for the usage of inline syntax for both *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>

Answer 6

*ngIf and *ngFor cannot be used together on the same tag. It is necessary to utilize the long form with an explicit <template> tag for one of them.

update

Instead of <template>, consider using <ng-container> which allows for the usage of inline syntax for both *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>

You are not able to use ngIf nested within ngFor in Angular 2

Answer №1

Answer №2

Answer №3

Similar questions

Incorporate matter-js into your TypeScript project

Find the identifier that does not currently exist in the collection of objects

Python JSON schema for extracting parameters

Sample information in Plain Old Java Object for JSON reference

Angular does not recognize the boolean variable

How can you loop through an array of objects in TypeScript without relying on the traditional forEach

Quick data structure for efficient string or JSON retrieval

Can a title or custom component be inserted above a nested table in ag-grid?

The async pipe value seems to be constantly null when dealing with router events

Exploring an array within an object using Typescript and React

Preventing click propagation for custom react components nested within a MapContainer

When the keyboard appears, the Ionic 2 form smoothly slides upwards

Exploring the world of data transfer with Websockets in Flutter

The fix for the unresponsive fixed container in Angular 2 Material

Accessing JSON data in AngularJS from Node.js as the backend and SQL database

What could be the reason for a Python library functioning properly when executed from the desktop, but failing to run when invoked from

Tips for changing the name of a directory in an Angular 6 application

Encountering a 404 error in Angular 9 when refreshing the browser

Creating dynamic dropdown menus using JSON files in jQuery mobile is a useful technique for enhancing user experience on

Transferring AgGrid context in a functional React component

You are not able to use *ngIf nested within *ngFor in Angular 2

Answer №1

Answer №2

Answer №3

Similar questions

Incorporate matter-js into your TypeScript project

Find the identifier that does not currently exist in the collection of objects

Python JSON schema for extracting parameters

Sample information in Plain Old Java Object for JSON reference

Angular does not recognize the boolean variable

How can you loop through an array of objects in TypeScript without relying on the traditional forEach

Quick data structure for efficient string or JSON retrieval

Can a title or custom component be inserted above a nested table in ag-grid?

The async pipe value seems to be constantly null when dealing with router events

Exploring an array within an object using Typescript and React

Preventing click propagation for custom react components nested within a MapContainer

When the keyboard appears, the Ionic 2 form smoothly slides upwards

Exploring the world of data transfer with Websockets in Flutter

The fix for the unresponsive fixed container in Angular 2 Material

Accessing JSON data in AngularJS from Node.js as the backend and SQL database

What could be the reason for a Python library functioning properly when executed from the desktop, but failing to run when invoked from

Tips for changing the name of a directory in an Angular 6 application

Encountering a 404 error in Angular 9 when refreshing the browser

Creating dynamic dropdown menus using JSON files in jQuery mobile is a useful technique for enhancing user experience on

Transferring AgGrid context in a functional React component

You are not able to use ngIf nested within ngFor in Angular 2