Angular template ng-template/container/Content

Source: Internet
Author: User
1. ng-template
  • Form:<ng-template>...</ng-template>
  • The content in NG-template is hidden by default;
  • You can use [ngif] to control content display and hiding;
  • This tag does not affect the original HTML structure;
HTML:
<ng-template [ngIf]="true">  this is template!</ng-template>
Browser output:

Browser debugging window

2. Template
  • Form:<template>...</template>
  • The default content is hidden;
  • You can use CSS style display to control content display and hiding;
  • This tag will affect the original HTML structure;
HTML:
<template style="display: block;">  block;</template>
Browser output:

Browser debugging window:

3. ng-container
  • Form:<ng-container>...</ng-container>
  • The default content is displayed;
  • You can use * ngif to control content display and hiding;
  • This tag does not affect the original HTML structure;
HTML:
<ng-container>  this is container!</ng-container>
Browser output:

Browser debugging window:

4. ng-content
  • Form:<Ng-content select = 'dom tag/class/ID/attribute '>... </ng-content>
  • Used for content ing. reusable components can be customized;
  • When this component is referenced, the content in the selector tag is projected (or inserted) into the NG-content of this component;
  • There is a select attribute on this tag to find the content that can match the select value and map it here; its value can be the selector, HTML Tag, class or ID of other components;
(1). Code without the select attribute:
// Sub-component @ component ({selector: 'app-child ', template:' <ng-content> </ng-content> '}) // parent component @ component ({selector: 'app-parent', template: '<app-Child> content ing 1 </APP-Child> <app-Child> content ing 2 </APP-Child> '})
Browser output: browser debugging window:

(2) code with the select attribute:
// Content-component.html <div> <ng-content select = "h3.title"> </ng-content> <ng-content select = "P. intro "> </ng-content> <Div class =" content-CMP "> <ng-content select =" app-Extra "> </ng-content> </Div> </div> // parent-component.html <app-content> <P class = 'intro'> section </P> <H3 class = 'title'> title 
Browser output:

4-1. Get <ng-content></ng-content>Ing content
  • Contentchild-obtain a single instance
  • Contentchildren-returns multiple instances in querylist format
// Content. component. Ts @ contentchild (extracomponent) extracmp: extracomponent; // you can operate the extracmp component instance in the ngaftercontentinit () method after obtaining it.

Angular template ng-template/container/Content

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.