Angular 5 conact string only if field exists in html

Question

I am trying to concat two fields but the problem is in some cases the second field doesn't exist. In the below code group.GroupDescription field is not present in some entires. Is there any way to concat both fields only if second field group.GroupDescriptionexists.

Note - I also tried safe navigation operator but it displays null if value is not present.

Thanks in adavnce

         <select
            [(ngModel)]="selectedGroup"
            class="form-control"
            (ngModelChange)="onChange($event)"
          >
            <option [ngValue]="undefined" selected>Select</option>

            <option *ngFor="let group of groups" [ngValue]="group">{{
              group.GroupName.S + ' - ' + group.GroupDescription?.S
            }}</option>
          </select>

TrinTragula · Accepted Answer · 2021-04-16 07:15:18Z

2

A fast and simple solution could be:

<select [(ngModel)]="selectedGroup" class="form-control" (ngModelChange)="onChange($event)">
    <option [ngValue]="undefined" selected>Select</option>

    <option *ngFor="let group of groups" [ngValue]="group">
        {{
            group.GroupName.S + (group.GroupDescription ? " - " + group.GroupDescription.S : '')
        }}
    </option>
</select>

but I suggest you to pre-build the string somewhere else in your code.

answered Apr 16, 2021 at 7:15

TrinTragula

3802 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Buczkowski · Accepted Answer · 2021-04-16 07:14:28Z

1

<ng-container *ngIf="group.GroupDescription">
  {{group.GroupName.S + ' - ' + group.GroupDescription.S}}
</ng-container>
<ng-container *ngIf="!group.GroupDescription">
  {{group.GroupName.S}}
</ng-container>

answered Apr 16, 2021 at 7:14

Buczkowski

2,41614 silver badges19 bronze badges

Collectives™ on Stack Overflow

Angular 5 conact string only if field exists in html

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related