What are the steps to input the ngForOf template to the component using content projection through Angular?

This article mainly introduces the method of Angular using content projection to input the ngForOf template into the component. Now I share it with you and give it as a reference.

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

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

Then use it like this:

//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 will be like this:

However, I hope that our puppiesListCmp component can meet different needs , for example, only the name and color of the puppy are displayed when the data remains unchanged, like this:

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

Now we don’t hard-code the component template, but let the user input from the outside!

First, our component template:

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

is equivalent to:

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

Then, use @ContentChild (about @ContentChild, you can view it here, FQ is required ) obtains the external (relative to the puppiesListCmp component) custom template and assigns it to ngForTemplate. In other words, this part:

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

is no longer hard-coded in the component as before, but is customized by the user in the parent component. Then use Angular's Content Projection to project it into the puppiesListCmp component. Like this:

//puppies-list.component.ts
import { 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
}

This way our component is complete. Then we use it:

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

The effect is still the same:

If we just To display the puppy’s name and color, just write it like this:

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

The effect is like this:

Such components are very flexible and can be customized to whatever effect you want, which realizes the reuse of components.

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

Detailed explanation of Angularjs Promise examples

Detailed explanation of five methods of JS exporting Excel

JavaScript implements the method of writing files to local

The above is the detailed content of What are the steps to input the ngForOf template to the component using content projection through Angular?. For more information, please follow other related articles on the PHP Chinese website!