Shulou(Shulou.com)05/31 Report--

This article mainly introduces "how to project content in angular". In daily operation, I believe many people have doubts about how to project content in angular. The editor consulted all kinds of materials and sorted out simple and easy-to-use methods of operation. I hope it will be helpful for you to answer the question of "how to project content in angular". Next, please follow the editor to study!

1. Ng-content for content projection

1.1 ng-content

The ng-content element is a placeholder for inserting external or dynamic content. The parent component passes the external content to the child component, and when the Angular parses the template, the external content is inserted where the ng-content appears in the child component template.

We can use content projection to create reusable components. These components have similar logic and layout and can be used in many places. Generally speaking, we often use it when encapsulating some common components.

1.2 Why use content projection

Define a button component:

Button-component.ts

@ Component ({selector:'[appButton]', template: ``}) export class AppButtonComponent {}

The purpose of this button component is to add a search icon inside the button, which we actually use as follows:

Click

We found that the component will only show the search icon, the text of the button will not be displayed, and you can think of the most commonly used @ Input decorator, but what if we want to send in not just text, but a html? Ng-content will be used at this point.

1.3 single slot content projection

The most basic form of content projection is single-slot content projection.

Single-slot content projection refers to creating a component in which we can project a component.

Take the button component as an example to create a single-slot content projection:

Button-component.ts

@ Component ({selector:'[appButton]', template: ``}) export class AppButtonComponent {}

The actual use is as follows:

Click

You can see that the effect of this button component is to display both the search icon and the click of the button. That is, the middle content is projected to the location of the component.

The ng-content element is a placeholder and does not create a real DOM element. Those custom properties of ng-content will be ignored.

1.4 Multi-slot content projection

A component can have multiple slots, and each slot can specify a CSS selector that determines what is placed in that slot. This mode is called multi-slot content projection. Using this mode, we must specify where we want the projected content to appear. You can do this by using the select property of ng-content.

The component template contains multiple ng-content tags.

In order to distinguish that the projected content can be projected to the corresponding ng-content tag, you need to use the select attribute on the ng-content tag as recognition.

The select attribute supports any combination of label signatures, attributes, CSS classes, and: not pseudo classes.

Ng-content tags that do not add select attributes will be used as default slots. All unmatched projection content is projected at the location of the ng-content.

Take the button component as an example to create a multi-slot content projection:

Button-component.ts

@ Component ({selector:'[appButton]', template: ``}) export class AppButtonComponent {}

The actual use is as follows:

Click

Me here

1.5 ngProjectAs

In some cases, we need to use ng-container to wrap some content and pass it to the component. In most cases, it is because we need to use structured instructions such as ngIf or ngSwitch.

In the following example, we wrap the header in ng-container.

@ Component ({selector: 'app-card' Template: ``}) export class AppCardComponent {}

Use:

Angular One framework. Mobile & desktop. Super-powered by Google

Because of the ng-container, the header part is not rendered to the slot we want to render, but to the ng-content that does not provide any selector.

In this case, we can use the ngProjectAs attribute.

Add this attribute to the ng-container above and you can render as we expect.

Angular One framework. Mobile & desktop. Super-powered by Google II. Conditional content projection

If your symbol needs to render content conditionally or multiple times, configure the symbol to accept a ng-template element that contains the content to be conditionally rendered.

In this case, the ng-content element is not recommended, because as long as the consumer of the component provides content, the content is always initialized even if the component has never defined a ng-content element or the ng-content element is inside the ngIf statement.

With the ng-template element, you can let the symbol explicitly render the content according to any condition you want, and you can render it multiple times. Angular does not initialize the contents of a ng-template element until it is explicitly rendered.

2.1 ng-container

It is neither a component nor an instruction, just a special tag. Use ng-container to render the included template content, not itself.

Angular code snippet

My name is wyl.

What is you name?

In the browser debugging window, you can find that the label has disappeared and has not played any role.

My name is wyl.

What is you name?

Using the scenario, as follows, it can act as a carrier when we need to traverse or if judgment.

{{item .name}} {{item .age}} {{item .sex}}

In addition, for and if, one of the common errors in ng, cannot be written on the same tag (only one structural instruction can be applied to a host element). Using ng-container tags can reduce the level of nesting on the basis of implementing functions.

2.2 ng-template

Let's take a look at the following code.

In template, no attributes.

In ng-container, no attributes.

The browser output is as follows:

In ng-container, no attributes.

That is, the content in will not be displayed. When you add the ngIf directive to the template above:

NgIf with a ng-template.

NgIf with an ng-container.

The browser output is as follows:

NgIf with a ng-template.ngIf with an ng-container.

2.3 combined use of ng-template and

I can't find the data you want for the time being. Oh, come on, start getting it!

2.4 ngTemplateOutlet

Insert an embedded view created by ng-template. NgTemplateOutlet is a structured instruction that receives a value of type TemplateRef

I am span in template {{title}}

* ngTemplateOutlet = "templateRefExp; content: contentExp"

TemplateRefExp: # ID of the ng-template element

ContextExp:

Nullable parameter

Content is an object that can contain a key of $implicit as the default value, which is bound with let-key statements in the template when used.

Non-default fields of content need to be bound using a let-templateKey=contentKey statement

The use is as follows:

@ Component ({selector: 'ng-template-outlet-example', template: `Hello Hello {{name}}! Ahoj {{person}}! `}) class NgTemplateOutletExample {myContext = {$implicit: 'World', localSk:' Svet'};}

2.5 using ngTemplateOutlet for content projection

@ Component ({selector: 'app-card', template: ``}) export class AppCardComponent {@ ContentChild (' header', {static: true}) headerTemplate: TemplateRef; public title = 'Test' Public otherDate = {auth: 'me', name:' appCard'};}

Use

Angular {{label}} (Test) and {{otherDate | json}} ({auth: 'me', name:' appCard'}) this ends the study of "how to project content in angular", hoping to solve everyone's doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

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.