Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

use of [innerHTML] inside <mat-select><mat-option>

I try to use [innerHTML] inside <mat-option> of <mat-select> which works fine for the drop-down list, but not for the selected value.

Versions:

  • Browser Google Chrome 68.0.3440.106 (Official Build) (64-bit)
  • Angular 6.1.6
  • Angular material 6.4.6
  • bootstrap 4.1.3
  • @ng-bootstrap/ng-bootstrap 3.2.0

In my example the used code is

<mat-form-field class="col-11">
  <mat-select 
    [(ngModel)]="node.nodeType" 
    (change)="nodeTypeChanged()" 
    placeholder="{{'node.node_type' | translate}}"
    [compareWith]="compareObjects">
    <mat-option 
      *ngFor="let item of nodeTypes" 
      [value]="item">
      <span [innerHTML]="item.iconVisual.iconCodeHtml"></span>
      <span> {{item.label}}</span>
    </mat-option>
  </mat-select>
</mat-form-field>

The attached screen captures with combo box unselected where the task icon is not rendered and the selected combo box where the icons are correctly rendered, shows the problem.

Selected combo box: icon not rendered

enter image description here

Unselected combo box: all icons rendered

enter image description here

Simplified stackblitz here.

Is this a bug or am I missing something?

like image 569
Hubert Schumacher Avatar asked Oct 15 '25 20:10

Hubert Schumacher


2 Answers

The correct answer is to use <mat-select-trigger> element:

like:

 <mat-select-trigger>
            <span [innerHTML]="nodeType.iconHtml"></span>
              <span> {{ nodeType.label }}</span>
        </mat-select-trigger>

This is how it will look the full example: Online Demo

template: `
    <mat-form-field>
      <mat-select [(ngModel)]="nodeType" placeholder="NodeType">
      <mat-select-trigger>
        <span [innerHTML]="nodeType.iconHtml"></span>
          <span> {{ nodeType.label }}</span>
    </mat-select-trigger>
        <mat-option *ngFor="let item of nodeTypes" [value]="item">
          <span [innerHTML]="item.iconHtml"></span>
          <span> {{ item.label }}</span>
        </mat-option>
      </mat-select>
    </mat-form-field>
  `,
  styles: [
    `
      h1 {
        font-family: Lato;
      }
    `
  ]
})
like image 140
Dalorzo Avatar answered Oct 18 '25 09:10

Dalorzo


For anyone (future me included) trying this with form control and not ngModel, you can do it like so:

<mat-select #mSelect formControlName="controlName">
  <mat-select-trigger>
    <span [innerHTML]="htmlArray[mSelect.value]"></span>
  </mat-select-trigger>
  <mat-option *ngFor="let html of htmlArray; let idx = index"
              [value]="idx">
     <span [innerHTML]="html"></span>
  </mat-option>
</mat-select>
like image 37
nCr78 Avatar answered Oct 18 '25 09:10

nCr78



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!