Angular2 - ngIf in a ngFor

Question

I want to check if the actual element has a value or not.

For Example I want to check if the chocolate is black or white. Depending on this, I want to display the right text.

<ng-container *ngFor="let chocolate of product.getChocolates();">
     <md-card *ngIf="chocolate.getName() == black">IT IS BLACK</md-card>
     <md-card *ngIf="chocolate.getName() == white">IT IS WHITE</md-card>
</ng-container>

How to fix the code, so that it works?

score 9 · Accepted Answer · answered Mar 08 '17 at 21:25

The problem is you missed '(single quote) behind string which is black & white

<ng-container *ngFor="let chocolate of product.getChocolates();">
     <md-card *ngIf="chocolate.getName() == 'black'">IT IS BLACK</md-card>
     <md-card *ngIf="chocolate.getName() == 'white'">IT IS WHITE</md-card>
</ng-container>

score 2 · Answer 2 · answered Mar 08 '17 at 21:21

2

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `<div *ngFor="let chocolate of chocolates">
     <div *ngIf="chocolate.name == 'black'">IT IS BLACK</div>
     <div *ngIf="chocolate.name == 'white'">IT IS WHITE</div>
</div>`
})
export class AppComponent{
  chocolates:any=[{
    name:'black'
  },
  {
    name:'white'
  }];

  constructor() { }
}

answered Mar 08 '17 at 21:21

nekkon

107
1
6

sorry but I dont understand your question, can you be more specific? – nekkon Mar 08 '17 at 21:32
i guess if i dont need to write the html code in the .html-file if i wrote it in the @Component({...template:...}) , but i need to reference the template in the html code? – ALSTRA Mar 08 '17 at 21:35
instead of template write templateUrl: './component.html'. Please suggest my answer as the solution, thanks. – nekkon Mar 08 '17 at 21:38

score -1 · Answer 3 · answered Mar 08 '17 at 21:17

<ng-container *ngFor="let chocolate of product.getChocolates();">
     <md-card *ngIf="chocolate.getName() == black">IT IS BLACK</md-card>
     <md-card *ngIf="chocolate.getName() == white">IT IS WHITE</md-card>
</ng-container>

modify chocolate .getName() to chocolate.getName()

Angular2 - ngIf in a ngFor

3 Answers3