How to get image and text after selection option from drop down using angular 7

Question

In drop down images is showing but when i select the option then only text is coming

<mat-select placeholder="Scanner region" [(ngModel)]="job.regions" name="job.regions"
[ngModelOptions]="{standalone: true}">
    <mat-option *ngFor="let option of list" [value]="option.name">
    <span *ngIf="option.account.accountType === 'AZURE'">
        <img class="img-responsive " src="assets/images/azure-small.png" />
    </span>
    <span *ngIf="option.account.accountType === 'AWS'">
        <img class="img-responsive" src="assets/images/aws-small.png" />
    </span>
    {{option.name}}
    </mat-option>
</mat-select>

Answer 1

It is because your image links are hard-coded. You could use a service like Renderer2 to read the value from the DOM but a better way is to:

Store image links as part of the model ie option in list.

and change

<mat-option *ngFor="let option of list" [value]="option.name">

to

<mat-option *ngFor="let option of list" [value]="option">

so that when the selected item is an object that contains both the name and the image link through data-binding.

Answer 2

<mat-form-field class="full-width"> 
   <span matPrefix  [hidden]="project.issueTracker.accountType !== 'AZURE'">
   <img class="img-responsive " src="assets/images/azure-small.png" />
   </span>  
   <span matPrefix  [hidden]="project.issueTracker.accenter code hereountType !== 'AWS'">
   <img class="img-responsive " src="assets/images/aws-small.png" />
   </span>  
   <mat-select placeholder="Scanner region" [(ngModel)]="job.regions" name="job.regions"
   [ngModelOptions]="{standalone: true}">
   <mat-option *ngFor="let option of list" [value]="option.name">
   <span *ngIf="option.account.accountType === 'AZURE'">
   <img class="img-responsive " src="assets/images/azure-small.png" />
   </span>
   <span *ngIf="option.account.accountType === 'AWS'">
   <img class="img-responsive" src="assets/images/aws-small.png" />
   </span>
   {{option.name}}
   </mat-option>
   </mat-select>
</mat-form-field>