Passing template to component in Angular

This article mainly introduces two methods for Angular to pass templates to components. The first method is the second method is the NgTemplateOutlet directive and various usage methods. Friends who need it can refer to it

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

## As of the time of writing this article, this tag has not yet been The official documentation doesn't even have placeholders. But this does not hinder our use. Enthusiastic foreign netizens have summarized the characteristics and functions of at the current stage.

Basic usage

<!-- Wrapper.Component.html -->
<p>
  hello
  <ng-content></ng-content>
</p>

Suppose we have the above component, and then call it like this:

<wrapper>
  <span> World </span>
</wrapper>

Then the final rendering result will be like this:

<p>
  hello
  <span> World </span>
</p>

It seems that a very simple replacement has occurred, but if multiple

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>

Then use it like this:

<wrapper>
  <span> World </span>
  2333
</wrapper>

The final rendering result will be like this:

<p>
  hello
  2333
  <hr/>
  <span> World </span>
</p>

In addition to setting the

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 template passed in this time becomes a p, but because ngProjectAs is set, "World" will appear below the dividing line.

The second method NgTemplateOutlet directive

Using

ng-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: &#39;World&#39;};
}

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: &#39;World&#39;};
}

Such a simple change can allow us to The component has accepted templates from the outside world, let’s give it a try:

<wrapper>
  <ng-template let-value="data">
    <span>Hello {{value}}!</span>
  </ng-template>
</wrapper>

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

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!