Angular uses content projection to input the ngForOf template to the component. angularngforof

Angular uses content projection to input the ngForOf template to the component. angularngforof

Now, we write a puppiesListCmp component to display the list of puppies:

//puppies-list.component.ts@Component({ selector: 'puppies-list', template: `  <div *ngFor="let puppy of puppies">   <span>{{puppy.name}}</span>   <span>{{puppy.age}}</span>   <span>{{puppy.color}}</span>  </div>`})export class puppiesListCmp{ @Input() puppies: Puppy[];}interface Puppy { name: string, age: number, color: string}

Then use the following code:

//app.component.ts@Component({ selector: 'my-app', template: `  <puppies-list [puppies]="puppies"></puppies-list>`})export class App{ puppies = [  {   name: "sam",   age: 0.6,   color: "yellow"  },  {   name: "bingo",   age: 1.5,   color: "black"  } ]}

The effect is as follows:

However, I hope that our puppiesListCmp component can meet different requirements. For example, if the data remains unchanged, only the name and color of the dog are displayed, just like this:

This is the focus of this article. We need to implement user-defined templates!

Now we don't want to write the component template, but let the user input it from the outside!

First, our component template:

<div *ngFor="let puppy of puppies">   <span>{{puppy.name}}</span>   <span>{{puppy.age}}</span>   <span>{{puppy.color}}</span></div>

It is equivalent:

<ng-template ngFor let-puppy [ngForOf]="puppies">   <div>    <span>{{puppy.name}}</span>    <span>{{puppy.age}}</span>    <span>{{puppy.color}}</span>   </div></ng-template>

Then, use @ ContentChild (for more information about @ ContentChild, see here. FQ is required) to obtain the external (relative to the puppiesListCmp component) Custom template and assign it to ngForTemplate. That is to say, this part:

<div>  <span>{{puppy.name}}</span>  <span>{{puppy.age}}</span>  <span>{{puppy.color}}</span></div>

Instead of being written to the component as before, it is defined by the user in the parent component, and then projected into the puppiesListCmp component using Angular Content Projection. Like this:

//puppies-list.component.tsimport { Component, Input, ContentChild, TemplateRef } from '@angular/core';import { NgForOfContext } from '@angular/common';@Component({ selector: 'puppies-list', template: `<ng-template ngFor let-puppy [ngForOf]="puppies" [ngForTemplate]="tpl"></ng-template>`})export class puppiesListCmp{ @Input() puppies: Puppy[]; @ContentChild(TemplateRef) tpl: TemplateRef<NgForOfContext<Puppy>>}interface Puppy { name: string, age: number, color: string}

In this way, our components are complete. Then we use it:

//app.component.ts@Component({ selector: 'my-app', template: `<puppies-list [puppies]="puppies"> <ng-template let-puppy>  <div>   <span>{{puppy.name}}</span>   <span>{{puppy.age}}</span>   <span>{{puppy.color}}</span>  </div> </ng-template></puppies-list>`})

The results are still the same:

If we only need to display the name and color of the puppy, we can simply write it like this:

//app.component.ts@Component({ selector: 'my-app', template: `<puppies-list [puppies]="puppies"> <ng-template let-puppy>  <div>   <span>{{puppy.name}}</span>   <span>{{puppy.color}}</span>  </div> </ng-template></puppies-list>`})

The effect is as follows:

Such components are flexible and can be customized for any effect, which achieves Component reuse.

Now, this article is complete. Improper. Please note that! I hope it will be helpful for everyone's learning, and I hope you can support the house of helping customers more.