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

3 Answers 3

2

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>
Sign up to request clarification or add additional context in comments.

1 Comment

Hey I need something like if else. I edited my code. Your code is giving me blank rows when condition is not met. Can you please check?
0

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>

10 Comments

My requirement is I have to display both the data depending on the conditions. I need something like If-else
It was for your initial question.
Edited my answer.
It throws the same error Can't bind to 'ngIfElse' since it isn't a known property of 'ng-container'.
NgIfElse directive is only available since angular version 4.0.0. You have to use *ngIf on both elements and invert it for the "elseBlock" element.
|
0

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

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.