In this article, we will explore how to useng-contentfor content projection to create flexible and reusable components. The

ng-content

ng-contentelement is a placeholder for inserting external or dynamic content. The parent component passes external content to the child component, and whenAngularparses the template, the external content is inserted in the child component template whereng-contentappears.

We can use content projection to create reusable components. These components have similar logic and layout and can be used in many places. Generally we often use it when encapsulating some public components. [Related tutorial recommendations: "angular tutorial"]

Do not use content projection

In order to understand whyng-contentshould be used for content projection, First let's create a very common button component.

btn.component.ts

import { Component } from '@angular/core'; @Component({ selector: 'app-btn', templateUrl: './btn.component.html', styleUrls: ['./btn.component.scss'], }) export class BtnComponent { constructor() {} onClick($event: any) { console.log($event); } }

btn.component.html

 Click Me 

In this component, the text of the button is alwaysClick Me, if Do we want to pass different text in? You may think of the most commonly used@Inputdecorator, but what if we don’t just want to pass in text, but a piece of html? At this time, you need to use the protagonist of this article:ng-content.

Single Slot Content Projection

The most basic form of content projection isSingle Slot Content Projection. Single slot content projection means creating a component into which we can project a component.

To create a component that uses single-slot content projection, we just need to make some simple modifications to the component above: replaceClick Mewithd553bd28b5bbbbd4b6fb4990edbabbf0 78e68693bbc3a4be56286441c90e88e6.

btn.component.html

Where the btn component is used:

Cancel Submit

In4f5ea333ca342b306353367e241915b03e56165a02e29eb7b68166825115687f# The content in ## will be passed to the btn component and displayed inng-contnet.

Multi-slot content projection

The btn component above is very simple, but in fact

ng-contentis more powerful than this. A component can have multiple slots, and each slot can specify a CSS selector that determines what content goes into that slot. This mode is calledMulti-Slot Content Projection. Using this mode, we must specify where we want the projected content to appear. This can be accomplished by using theselectattribute ofng-content.

To create a component that uses multi-slot content projection, you need to do the following:

• Create a component.

• In the component template, add the

  ng-contentelement where you want the projected content to appear.

• Add the

  selectattribute to theng-contentelement. The selectors used by Angular support any combination of tag names, attributes, CSS classes, and:notpseudo-classes.

Let’s create a more complex card component.

card.component.html

Where the card component is used:

app.component.html

 
 
Angular
 
 One framework. Mobile & desktop.    
 
React
 
 A JavaScript library for building user interfaces  

If in

app- Is there content in cardthat does not belong to header, content, and footer? For example, if you use theapp-cardcomponent as follows:

app.component.html

 
 
Angular
 
 
Not match any selector
 One framework. Mobile & desktop.  
This text will not not be shown
 

, you will find that both

divare not rendered in page, in order to solve this problem, we can add ang-contenttag without anyselectorin the component. All content that does not match any other slot will be rendered in this one.

card.component.html

ngProjectAs

In some cases, we need to use

ng-containerto wrap some content and pass it to in the component. Most of the time it's because we need to use structural directives likengIforngSwitchetc. For example, headers are passed to the card component only under certain circumstances.

In the example below, we wrap the header in

ng-container.

  
 
Angular
 
  One framework. Mobile & desktop.  

Due to the existence of

ng-container, the header part is not rendered to the slot we want to render, but is rendered tong- which does not provide any selector. contentin.

In this case, we can use the

ngProjectAsattribute.

Add this attribute to the above

ng-container, and you can render it according to our expectations.

  ... 

For more programming-related knowledge, please visit:

Programming Teaching! !

The above is the detailed content of A brief discussion on how Angular uses ng-content for content projection. For more information, please follow other related articles on the PHP Chinese website!