CODEWITHSUNDEEP
angularangular-ng-if
BVB1392
BVB1392

Reputation: 187

How to combine multiple *ngifs?

Hello I just want a ng if with three ouputs to print in a table.

Now i have this syntax:

<td><div *ngIf="todo.diffDays >90">ninety</div> </td>

I would to display in a column this ouputs

if diffDays >90 => ninety
if diffDays >180 => hundredeighty
and if diffdays >300 =>theehundred

How to combine them ?

Thanks!

Upvotes: 1

Views: 1277

Answers (4)

Rough Chop
Rough Chop

Reputation: 124

I would put this logic in your model. There's many different ways to implements this, it depends on what you need precisely

TypeScript:

foo(val: number): string {
    if (val > 90) {
        return "ninety";
    }
    if (val > 180) {
        return "hundredeighty";
    }
    return "";
}

HTML:

<div>{{foo(todo.diffDays)}}</div>

Upvotes: 0

Zze
Zze

Reputation: 18805

You probably don't even need an *ngIf if you just want to display for everything > 90.
You could just do something like this:

<div> 
   {{ 
      diffdays > 300 ? "threehundred" : 
      diffDays > 180 ? "hundredeighty" :
      diffDays > 90 ? "ninety" : "Less than 90" 
   }}
</div>

This essentially reads:

if > 300 display "threehundred", otherwise continue...
if > 180 display "hundredeighty, otherwise continue...
if > 90 display "ninety"...
if none satisfied display "Less than 90"

Upvotes: 3

Shakeer Hussain
Shakeer Hussain

Reputation: 2526

First you have declare a days variable in component class.

export class AppComponent {

 public days: number;

 constructor() {

    this.days = 90; // Assign value
   }
}

call days as shown in below div tag.

<td>

<div *ngIf="todo.diffDays > days">{{days}}</div> 

</td>

Upvotes: 0

match
match

Reputation: 11060

You can use ngIf multiple times for this:

<div *ngIf="todo.diffDays > 90">ninety</div>
<div *ngIf="todo.diffDays > 180">hundredeighty</div>
<div *ngIf="todo.diffDays > 300">threehundred</div>

Upvotes: 0

Related Questions