[Fixed] Angular 5 conact string only if field exists in html

Issue

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>

Solution

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.