Is there a way to verify if a component contains a child node with the tag <template></template>?

Question

Is there a way to verify if a component contains a child node with the tag <template></template>?

Consider the scenario with MyComponent:

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

Within the code, I have access to this.viewContainerRef, which refers to the DOM node itself (<div>).

However, for customization purposes, a user might want to include their own template within myComponent. In such cases, they would do the following:

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

The question at hand is how can I programmatically determine if there is a <template> element within the <div> and then manipulate its content?

angular typescript angular2-directives angular2-components

Answer 1

Answer №1

To display content conditionally based on the availability of a template in Angular, you can use the ContentChild(TemplateRef) method. This allows you to render different blocks depending on whether a template is defined or not. Below is an example showcasing this technique for Angular 2, while Angular 4 uses '*ngIf;else Block'.

  @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() {
    }
  }

Answer 2

To display content conditionally based on the availability of a template in Angular, you can use the ContentChild(TemplateRef) method. This allows you to render different blocks depending on whether a template is defined or not. Below is an example showcasing this technique for Angular 2, while Angular 4 uses '*ngIf;else Block'.

  @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() {
    }
  }

Is there a way to verify if a component contains a child node with the tag <template></template>?

Answer №1

Similar questions

Using *ngFor with trackBy for multiple properties

Exploring the method to deactivate and verify a checkbox by searching within an array of values in my TypeScript file

The function e.preventDefault() appears to be ineffective when applied to both the submit button and anchor tag within an

The theming feature in Angular 5 with Bootstrap 4 and Bootswatch seems to be malfunctioning

Using Typescript: Defining a function parameter that can be either of two interfaces

Access your account using Google authentication within an Angular framework

Tips for utilizing the "this" keyword in TypeScript

Angular NodeJS API failing to retrieve search data

Developing personalized modules in Angular version 6

Prevent accidental misuse of object[index] in Typescript

Creating a custom validation for browsing HTML files in Angular using the Form Builder

Promise rejection not handled: The play() function was unsuccessful as it requires the user to interact with the document beforehand

Navigating to Angular component from Mapbox popup

Missing 'id' property in ngFor loop for object type

Setting a binary value for an angular checkbox through user input: a step-by-step guide

Validating specific controls in an Angular 2 FormGroup and marking them as invalid

Is there a way to reverse the direction of the slider's track?

What is the best approach for designing a UI in Angular to showcase a matrix of m by n dimensions, and how should the JSON format

When a React component in TypeScript is passed as a parameter and then assigned to a variable, an error with code TS2604 may occur stating that the JSX element type does not

methods for extracting JSON key values using an identifier