How to input ngForOf to component in Angular

This time I will show you how Angular inputs ngForOf into the component. What are the precautions for Angular to input ngForOf into the component. The following is a practical case. Let’s take a look. .

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"
  }
 ]
}

Effect Just like this:

However, I hope that our puppiesListCmp component can meet different needs, such as only displaying the name and color of the puppy while the data remains unchanged. Like this:

That’s the point of this article. We need to implement user-defined templates!

Now we don’t hard-code the component template, but let the user input it 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 (you can check here about @ContentChild, FQ is required) to get the external (relative to the puppiesListCmp component) custom template and assign 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, and then uses Angular's content projection (Content Projection) to project Go inside the puppiesListCmp component. Just 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 only want to display the name and color of the puppy, 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 a component is very flexible and can be customized to whatever effect you want, which realizes the component's Reuse.

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

How to publish the vue project through Baidu's BAE

Why axios http request cannot be used in vue2

The above is the detailed content of How to input ngForOf to component in Angular. For more information, please follow other related articles on the PHP Chinese website!