How to check if component has a child node of ?

Question

MyComponent for example:

<div [my-component]="'text'"></div>

In code I have this.viewContainerRef which is the node itself (<div>).

But the user may want to add its template to myComponent, so he will do this:

<div [my-component]="'text'">
   <template>
   ...
   </template>
</div>

My question is how in code I can check if there is a <template> node and use/read its innerHTML?

hmm... why not? If I need some html that will not be visible to the user, but I do want to use it somewhere, for example a popup that will open... — AngularOne, May 04 '17 at 18:47
So how you insert html markup that you want to give the user to create? popup, tooltip, ... components that sometimes you want inside of them some html the user will write — AngularOne, May 04 '17 at 19:30

score 4 · Accepted Answer · answered May 04 '17 at 23:12

You can use ContentChild(TemplateRef) and after that render when template is defined and when it is just html. Here is an example. This is for Angular 2. For Angular 4 '*ngIf;else Block' can be used.

  @Component({
    selector: '[my-component]',
    template: `
      my-component with input {{v}}
      <ng-container *ngIf="tpl">
        Template block:
        <ng-container [ngTemplateOutlet]="tpl"></ng-container>
      </ng-container>

      <ng-container *ngIf="!tpl">
        No Template block: <ng-content></ng-content>
      </ng-container>
    `
  })
  export class MyComponent {
    @Input('my-component') v : string;
    @ContentChild(TemplateRef) public tpl: TemplateRef;
  }
  @Component({
    selector: 'my-app',
    template: `
      <div>
        <div [my-component]="'text'">
          <template><pre>hi there</pre></template>
        </div>
        <hr>
        <div [my-component]="'text1'">
          aaa
        </div>
      </div>
    `,
  })
  export class App {
    constructor() {
    }
  }

works and simple to understand and also to use, from a user perspective that is going to use this component. Thank you! — AngularOne, May 05 '17 at 14:21

How to check if component has a child node of ?

1 Answers1