Shulou(Shulou.com)06/03 Report--

In this issue, the editor will bring you about the understanding and usage of NgTemplateOutlet instructions in Angular. The article is rich in content and analyzes and describes it from a professional point of view. I hope you can get something after reading this article.

Recently, when I was watching a training program, I saw this NgTemplateOutlet structural instruction, but I had no contact with it before. I didn't know how to use it. Then, I went to the official website to search the api (here is the official website link).

Just talk about the usage and usage scenarios of NgTemplateOutlet.

Usage

According to the official website, the api goes like this:

Insert an embedded view based on a pre-prepared TemplateRef.

Let me translate it: turn the host element of NgTemplateOutlet into an embedded view-- this embedded view is generated based on a pre-defined templateRef template reference. No matter what the host element is, it will not be rendered.

Let's change the example of the official website (because I can't understand the human life on the official website):

@ Component ({selector: 'ng-template-outlet-example', template: `Hello Hello {{name}}! My name is LeBron {{person}}! `}) export class NgTemplateOutletExample {myContext = {$implicit: 'World', lastName:' James'};}

A host element can use the ngTemplateOutlet structural directive to turn itself into an embedded view generated by any template. And you can set a context object for it. Then we can use the let- variable as a template input variable to get the value in the context object in this template, which is more flexible.

Application scenario

Similar to the ng-zorro framework's paging component Pagination (official website link). If we are not satisfied with the default style or structure of the previous and next pages and want to adjust it ourselves, we can provide an input property (the property defined by @ Input) to receive a template and provide it with the necessary properties or methods. In this way, we can reuse the component without modifying the component source code.

Demo

Let's first define a subcomponent HeroDisplayCard, the display interface of the role.

@ Component ({selector:'app-hero-display-card', template: `role list role id: {{h.id}}-- role name: {{h.name}}-- role attribute: {{h.features}}

`, styles: [`.clients-card-box {width: 600px; margin: 10px auto;} .list-style-card-item {list-style: none } `]}) export class HeroDisplayCard {public heroesList = [{id:'013',name:' clock', features:'rock'}, {id:'061',name:' chimney', features:'fire'}, {id:'022',name:' Diona', features:'ice'}, {id:'004',name:' Noelle', features:'rock'},]}

Then introduce this component into a parent component:

@ Component ({selector:'app-templateoutlet-app-demo', template: ``}) export class TemplateOutletAppDemoComponent {}

Run the code, and the effect is as follows:

I think the style of this li is too ugly, and the order is not quite right. I want to change the character attribute before the character name. In this way, it will be troublesome to change the style simply by entering properties, and we may need to define a lot of variables for the user to choose from, which may outweigh the gain. So why don't we just provide a template to the user, we just need to provide the necessary data. Style, typesetting these are free to the user.

So for the subcomponent HeroDisplayCard, we can change it like this:

@ Component ({selector:'app-hero-display-card', template: `role list role id: {{h.id}}-- role name: {{h.name}}-- role attribute: {{h.features}}

`, styles: [/ / omit]}) export class HeroDisplayCard {@ Input () cardItemTemplate:TemplateRef; public heroesList = [/ / omitted]}

Then we pass in the custom template in the parent component:

@ Component ({selector:'app-templateoutlet-app-demo', template: `

Role id: {{id}}

Role attribute: {{features}}

Role name: {{name}}

`, styles: [/ / write the style of custom template here `.template-card-custom-item {width: 100%; height: 35px; border: 1px solid # 999999; border-radius: 5px; display: flex; justify-content:space-around; align-items: center; margin: 10px 0;} .template-card-custom-item p {width: 30% Margin: 0; font-size: 20px; color: # 666666;}. Color-card-custom-item p span {color: red;} `}) export class TemplateOutletAppDemoComponent {}

Then run it, and the effect is as shown in the figure (it's still ugly):

Summary

Using NgTemplateOutlet as a structural directive can enhance the encapsulation of our child components and avoid the need to define a large number of input properties, resulting in a bloated template for the parent component.

The above is the understanding and usage of the NgTemplateOutlet instruction in Angular shared by the editor. If you happen to have similar doubts, please refer to the above analysis to understand. If you want to know more about it, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.