Passing template to component in Angular
This article mainly introduces two methods for Angular to pass templates to components. The first method is
Recently I am writing a date picker component. In order to meet various needs that may arise in the future, I need to be able to highly customize the style of the component. In order to achieve this goal, you need to be able to control the content to be displayed in each date grid outside the date picker component, such as marking holidays. At this time, part of the template of the component needs to be provided by the caller.
In React, this requirement is quite simple. Just implement a function like date => Element , but Angular templates are pure templates and need to use some special The concept can realize this function.
The first way
<!-- Wrapper.Component.html --> <p> hello <ng-content></ng-content> </p>
<wrapper> <span> World </span> </wrapper>
<p> hello <span> World </span> </p>
appear in the Wrapper, will multiple <span> World </span> appear? ? The answer is no. The essence is just to move elements, and will not automatically create the incoming template, so even if you use ngFor to wrap There will be many <span> World </span>. If custom components are passed in, these components will only be instantiated once.
Advanced Usage
Of course, if the function of is just like this, it will be too useless. When using You can specify a selector, which can capture matching direct child elements. For example: <!-- Wrapper.Component.html -->
<p>
hello
<ng-content></ng-content>
<hr/>
<ng-content select="span"></ng-content>
</p>
<wrapper> <span> World </span> 2333 </wrapper>
<p> hello 2333 <hr/> <span> World </span> </p>
ng-content tag In addition to the select attribute, you can also use the ngProjectAs attribute on the child element. This attribute allows this element to be captured by the ng-content specified in the parent element. For example:
<wrapper> <p ngProjectAs="span"> World </p> 2333 </wrapper>
The second method NgTemplateOutlet directive
Usingng-content can indeed have the effect of passing in a template. But there is a very fatal problem, that is, data cannot be passed to the incoming template. In order to pass data into the incoming template, you need to use the NgTemplateOutlet directive.
Basic usage
This command can be used to instantiate a TemplateRef object at a specified location in the template. At the same time, a data can also be passed in during the instantiation process. object. TemplateRef can be created through the ng-template tag. For example:@Component({
selector: 'ng-template-outlet-example',
template: `
<ng-container *ngTemplateOutlet="name; context: myContext"></ng-container>
<ng-template #name let-name="data"><span>Hello {{name}}!</span></ng-template>
`
})
class NgTemplateOutletExample {
myContext = {data: 'World'};
}ng-container is a virtual element. On this element, we use an NgTemplateOutlet directive to specify To instantiate the following ng-template named name. At the same time, the myContext object is passed in as the instantiated data context, so "Hello World!" will eventually be displayed. It is worth noting the way to obtain the transmitted data context in ng-template: let-variableName='key'.
Advanced use
The next step is to implement the requirements mentioned at the beginning of this article, passing in the template outside the component. Let’s take the above example as an example. Because the template needs to be passed in as sub-content from the outside world, we need to capture the template manually. If necessary here, we need to use ContentChild:@Component({
selector: 'wrapper',
template: `
<ng-container *ngTemplateOutlet="name; context: myContext"></ng-container>
`
})
class NgTemplateOutletExample {
@ContentChild(TemplateRef) name: TemplateRef<any>;
myContext = {data: 'World'};
}<wrapper>
<ng-template let-value="data">
<span>Hello {{value}}!</span>
</ng-template>
</wrapper>How to batch edit dynamically bound radio lists in vue.js
When using React components What are the commands to transfer Vue components?
How to copy content to the clipboard in JavaScript
The above is the detailed content of Passing template to component in Angular. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
AI Hentai Generator
Generate AI Hentai for free.
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
1378
52
Let's talk about metadata and decorators in Angular
Feb 28, 2022 am 11:10 AM
This article continues the learning of Angular, takes you to understand the metadata and decorators in Angular, and briefly understands their usage. I hope it will be helpful to everyone!
How to install Angular on Ubuntu 24.04
Mar 23, 2024 pm 12:20 PM
Angular.js is a freely accessible JavaScript platform for creating dynamic applications. It allows you to express various aspects of your application quickly and clearly by extending the syntax of HTML as a template language. Angular.js provides a range of tools to help you write, update and test your code. Additionally, it provides many features such as routing and form management. This guide will discuss how to install Angular on Ubuntu24. First, you need to install Node.js. Node.js is a JavaScript running environment based on the ChromeV8 engine that allows you to run JavaScript code on the server side. To be in Ub
Detailed explanation of angular learning state manager NgRx
May 25, 2022 am 11:01 AM
This article will give you an in-depth understanding of Angular's state manager NgRx and introduce how to use NgRx. I hope it will be helpful to you!
An article exploring server-side rendering (SSR) in Angular
Dec 27, 2022 pm 07:24 PM
Do you know Angular Universal? It can help the website provide better SEO support!
A brief analysis of how to use monaco-editor in angular
Oct 17, 2022 pm 08:04 PM
How to use monaco-editor in angular? The following article records the use of monaco-editor in angular that was used in a recent business. I hope it will be helpful to everyone!
Angular + NG-ZORRO quickly develop a backend system
Apr 21, 2022 am 10:45 AM
This article will share with you an Angular practical experience and learn how to quickly develop a backend system using angualr combined with ng-zorro. I hope it will be helpful to everyone!
How to use PHP and Angular for front-end development
May 11, 2023 pm 04:04 PM
With the rapid development of the Internet, front-end development technology is also constantly improving and iterating. PHP and Angular are two technologies widely used in front-end development. PHP is a server-side scripting language that can handle tasks such as processing forms, generating dynamic pages, and managing access permissions. Angular is a JavaScript framework that can be used to develop single-page applications and build componentized web applications. This article will introduce how to use PHP and Angular for front-end development, and how to combine them
A brief analysis of independent components in Angular and see how to use them
Jun 23, 2022 pm 03:49 PM
This article will take you through the independent components in Angular, how to create an independent component in Angular, and how to import existing modules into the independent component. I hope it will be helpful to you!
