CODEWITHSUNDEEP
javascriptangulartypescript
Iris_geek
Iris_geek

Reputation: 393

How to use expression in ngIf-else in angular 2

This is my piece of code

<tr *ngFor="let sample of data; let i = index" [attr.data-index]="i">
    <ng-container *ngIf="sample .configuration_type == 1; then thenBlock; else elseBlock"></ng-container>
       <ng-template #thenBlock>
           <td>{{sample.item_number}}</td>
           <td>{{sample.make}}</td>
           <td>{{sample.model}}</td>
       </ng-template>
       <ng-template #elseBlock>
           <td>{{sample.serial_number}}</td>
           <td>{{sample.capacity}}</td>
           <td>{{sample.model}}</td>
       </ng-template>
</tr>

Error it displays as

Can't bind to 'ngIfThen' since it isn't a known property of 'ng-container'. 1. If 'ng-container' is an Angular component and it has 'ngIfThen' input, then verify that it is part of this module. 2. If 'ng-container' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message. ("gFor="let sample of data; let i = index" [attr.data-index]="i">

Upvotes: 2

Views: 6535

Answers (3)

FAISAL
FAISAL

Reputation: 34673

Make sure that you have imported the CommonModule in your AppModule imports.

import {CommonModule} from '@angular/common';

@NgModule({

  imports: [
    // ... other modules    
    CommonModule
  ],

Here is a plunker link to demonstrate the if-then-else behavior: PLUNKER DEMO

Upvotes: 0

cyr_x
cyr_x

Reputation: 14257

Before using any structural directives import the CommonModule from @angular/common into your module. Also ngIfElse is only available since version 4.0.0.

For the edited question: You can use ngIf with the else syntax to differentiate between the items.

But this inside your tr element:

<ng-container *ngIf="sample.configuration_type === 1; else elseBlock">
    <td>{{sample.item_number}}</td>
    <td>{{sample.make}}</td>
    <td>{{sample.model}}</td>
</ng-container>
<ng-template #elseBlock>
    <td>{{sample.serial_number}}</td>
    <td>{{sample.capacity}}</td>
    <td>{{sample.model}}</td>
</ng-template>

Or when you want to use ng-template only:

<ng-template [ngIf]="sample.configuration_type === 1" [ngIfElse]="elseBlock">
    <td>{{sample.item_number}}</td>
    <td>{{sample.make}}</td>
    <td>{{sample.model}}</td>
</ng-template>
<ng-template #elseBlock>
    <td>{{sample.serial_number}}</td>
    <td>{{sample.capacity}}</td>
    <td>{{sample.model}}</td>
</ng-template>

You can find more info about structural directives at the angular docs page.

For Angular version <4.0.0 ther's no ngIfElse directive. You have to do it like this:

<ng-template [ngIf]="sample.configuration_type === 1">
    <td>{{sample.item_number}}</td>
    <td>{{sample.make}}</td>
    <td>{{sample.model}}</td>
</ng-template>
<ng-template [ngIf]="sample.configuration_type !== 1">
    <td>{{sample.serial_number}}</td>
    <td>{{sample.capacity}}</td>
    <td>{{sample.model}}</td>
</ng-template>

Note: The below answer was for the initial question, OP edited it to achieve another goal.

You should filter the data inside your component, with for example the array filter method.

Example:

export class MyComponent {
    // ...
    public get filteredData() {
       return this.data.filter(sample => sample.configuration_type !== 1);
    }
    // ...
}

And then in your component use the filteredData to loop over:

<tr *ngFor="let sample of filteredData; let i = index" [attr.data-index]="i">
    <td>{{sample.item_number}}</td>
    <td>{{sample.make}}</td>
    <td>{{sample.model}}</td>
    <td>{{bucket.class}}</td>
    <td>{{bucket.capacity}}</td>
</tr>

Upvotes: 0

Sajeetharan
Sajeetharan

Reputation: 222582

As the error says you cannot use ngFor and ngIf on the same tag, instead do this using ng-container,

<tr *ngFor="let sample of data; let i = index" [attr.data-index]="i">
    <ng-container *ngIf="sample.configuration_type === 1">
        <td>{{sample.item_number}}</td>
        <td>{{sample.make}}</td>
        <td>{{sample.model}}</td>
        <td>{{bucket.class}}</td>
        <td>{{bucket.capacity}}</td>
    </ng-container>
</tr>

Upvotes: 2

Related Questions