0

I have been reading posts online regarding if else logic using angular. I was able to achieve the desired result but I am wondering if there is a another way / better way to do if else in angular.

The code below prints Flower available date if the flower name is not Tulip. And prints SomeOther date if flower name is Tulip.

<td *ngIf ="data.FlowerName !=='Tulip'" id="someId" class="flower-detail bold">Flower Available Date: {{data.AvailableDate | date:'shortDate'}}</td>
<td *ngIf ="data.FlowerName ==='Tulip'" id="someOtherId" class="flower-detail bold">SomeOther Date: {{data.NextDate | date:'shortDate'}}</td>
<td id="some-action" class="flower-detail">
  <button id="actionTricolon" class="action-tricolon"> </button>
</td>

Is there a way to write it in a better way?

Maddy
  • 2,025
  • 5
  • 26
  • 59
  • 2
    Possible duplicate of [How to use \*ngIf else in Angular?](https://stackoverflow.com/questions/43006550/how-to-use-ngif-else-in-angular) – Daniel W Strimpel Mar 13 '18 at 01:21

1 Answers1

2

Angular has an else. This is from the docs here: https://angular.io/api/common/NgIf#showing-an-alternative-template-using-else

@Component({
  selector: 'ng-if-else',
  template: `
    <button (click)="show = !show">{{show ? 'hide' : 'show'}}</button>
    show = {{show}}
    <br>
    <div *ngIf="show; else elseBlock">Text to show</div>
    <ng-template #elseBlock>Alternate text while primary text is hidden</ng-template>
`
})
class NgIfElse {
  show: boolean = true;
}
DeborahK
  • 57,520
  • 12
  • 104
  • 129