0

I built a tooltip directive by following this article,

I am trying to pass templateRef to the tooltip directive.

Below is my shared component,

at ts,

@Input() fieldPreferences: IFieldPreference[];

at html,

<mat-selection-list #list>
  <mat-list-option  
    *ngFor="let preference of fieldPreferences"
    [selected]="preference.selected"
    (click)="showPreferenceChanged(list)"
    [value]="preference.field">
    {{preference.field}}
  </mat-list-option>
</mat-selection-list>

At parent,

<mat-icon tooltip [content]="template">settings</mat-icon>

<ng-template #template>
 <field-preferences
    [fieldPreferences]="fieldPreferences"
    (selectedFields)="showPreferenceChanged($event)">
 </field-preferences>
</ng-template>

Tooltip is showing up with no content (i.e) mat-list-option is not generated. According to this SO OP, the problem is with *ngFor and ng-template.

I tried changing it to,

<mat-selection-list #list>
  <mat-list-option  ngFor let-preference [ngForOf]="fieldPreferences"
      [selected]="preference.selected"
      (click)="showPreferenceChanged(list)"
      [value]="preference.field">
      {{preference.field}}
    </mat-list-option>
  </mat-selection-list>

Still, tooltip is rendered with no content.

SiddAjmera
  • 38,129
  • 5
  • 72
  • 110
Ahelp
  • 183
  • 4
  • 13

1 Answers1

0

You probably are using some old directives for mat-select-list. Here's how you'd create one for your case:

<mat-select #list [(ngModel)]="selectedField">
  <mat-option 
      *ngFor="let preference of fieldPreferences"
      (click)="showPreferenceChanged(list)"
      [value]="preference.field">
      {{preference.field}}
  </mat-option>
</mat-select>

selectedField should be a property set on your ComponentClass with a value of the 'field' property of the fieldPreference object.

@Input() fieldPreferences: IFieldPreference[];
selectedField = 'One of the items from the fieldPreferences will go here';

mat-option doesn't have a selected property so you won't be able to use it. If you want one item already selected from the list, you could use [(ngModel)] and assign selectedField to it.

SiddAjmera
  • 38,129
  • 5
  • 72
  • 110
  • This for multi select option. The actual problem is with ngFor directive when used with ng-template. I was able to rendered field-preference component outside of ng-template, but when used with ng-template, ngFor doesn't invoke – Ahelp Oct 17 '18 at 16:12