CODEWITHSUNDEEP
angular
Andrzej Skierski
Andrzej Skierski

Reputation: 171

angular, function as an input for ng-template

I have a code which works fine

<nz-timeline  >
  <nz-timeline-item
    *ngFor="let event of this.events"
    [nzColor]="getColorForEvent(event.eventType)"
    [nzDot]="event.eventType == 'C' ? dotCreate
      :event.eventType == 'M' ? dotMail
      :event.eventType == 'P' ? dotPhone : '' "
  >{{event.sentDate | date: 'yyyy-MM-dd HH:mm'}} - {{event.subject}}</nz-timeline-item>
</nz-timeline>

<ng-template #dotCreate>
  <i nz-icon nzType="caret-down" style="font-size: 16px;"></i>
</ng-template>
<ng-template #dotMail>
  <i nz-icon nzType="mail" style="font-size: 16px;"></i>
</ng-template>
<ng-template #dotPhone>
  <i nz-icon nzType="phone" style="font-size: 16px;"></i>
</ng-template>

I would like to provide more cases and write cleaner code like

[nzDot]="getIconForEvent(event.eventType)"

But to do it I need return TemplateRef<any>.

How should looks implementation of this function?

How to connect dotCreate with ng-template #dotCreate?

  getIconForEvent(eventType: string): TemplateRef<any> {
    switch (eventType) {
      case 'C':
        return 'dotCreate';
      case 'P':
        return 'dotPhone';
      case 'M':
        return 'dotMail';
      case 'E':
        return 'dotMail';
      default:
        return 'dotMail';
    }
  }

Upvotes: 0

Views: 288

Answers (1)

Damian Plewa
Damian Plewa

Reputation: 1193

Just use @ViewChild decorator to have access to ng-template in your component.ts file, just like that:

export class MyComponent {
  @ViewChild('dotCreate') dotCreate: TemplateRef<any>;
  @ViewChild('dotPhone') dotPhone: TemplateRef<any>;
  @ViewChild('dotMail') dotMail: TemplateRef<any>;

  getIconForEvent(eventType: string): TemplateRef<any> {
    switch (eventType) {
      case 'C':
        return this.dotCreate;
      case 'P':
        return this.dotPhone;
      case 'M':
      case 'E':
      default:
        return this.dotMail;
    }
  }
}

Upvotes: 2

Related Questions