Home > Software design >  How to pass TempRef to angular service
How to pass TempRef to angular service

Time:07-29

Is there any option to pass/use angular TemplateRef from component in angular Service ? I use https://ng.ant.design/components/message/en, it has a method: this.message.success('text'); instead of 'text' i can pass TemplateRef. Is there an option to pass here TemplateRef from a component ? Or maybe any other ideas to handle this ?

CodePudding user response:

You can use ViewChild:

@Component({
  selector: 'example',
  template: '<template #templateRef>xxx</template>'
})
class ExampleComponent {
  @ViewChild('templateRef') templateRef:TemplateRef;

  constructor(private teplateService: TemplateService) { }

  onAction() {
    this.someService.sendTemplate(this.template1);
  }
}

CodePudding user response:

It is not working with template ref instead of Template you can use elementRef

Check this out....

import { Component, ElementRef, TemplateRef, ViewChild } from '@angular/core';
import { th } from 'date-fns/locale';

import { NzMessageService } from 'ng-zorro-antd/message';

@Component({
  selector: 'nz-demo-message-info',
  template: ` <button nz-button [nzType]="'primary'" (click)="createBasicMessage()">Display normal message</button>
  <p #tempRef>ok</p>
  `,
})
export class NzDemoMessageInfoComponent {
  constructor(private message: NzMessageService) {}
  @ViewChild('tempRef') tempRef: ElementRef<any>;
  createBasicMessage(): void {
    this.message.info(this.tempRef.nativeElement.innerHTML);
  }
}
  • Related