CODEWITHSUNDEEP
c#angulartypescriptangular-material
TechGuy
TechGuy

Reputation: 4570

Show 1 item if another item comes empty (angular 6 material)

I've used material bootstrap with angular 6. In here I have bound area code and area description. In my database we have a record that only consists of area codes. If so, I need to show the record with only the area code. In here it looks like this:

ZA550D - // with small hyphen

But I need it to look like below:

ZA550D

  <mat-select formControlName="news" name="description" id="id" [(ngModel)]="model.newsId"
                                placeholder="{{'NewsName'}}" required>
                        <mat-option *ngFor="let news of newsDetails" [value]="news.id">
                            {{news.areaCode +"-"+news.areaDescription}}
                        </mat-option>
                    </mat-select>

Upvotes: 0

Views: 31

Answers (1)

Haidar Zeineddine
Haidar Zeineddine

Reputation: 998

There are many ways to do this, try out the following sample :

<mat-select formControlName="news" name="description" id="id" [(ngModel)]="model.newsId" placeholder="{{'NewsName'}}" required>
   <mat-option *ngFor="let news of newsDetails" [value]="news.id">
       {{news.areaDescription ? news.areaCode +"-"+ news.areaDescription : news.areaCode }}
   </mat-option>
</mat-select>

You can write a function for this to get a cleaner template.

Upvotes: 2

Related Questions