[Angular] Using ngTemplateOutlet to create dynamic template
I can use <tamplete> syntax and a entry component as a container to create a dynamic component. Notice it will create a empty div as a placeholder in the DOM. If we don't wanner this empty div, we can actually using ng-conainer together with ngTemplateOutlet (for template ref) and ngTemplateOutletContext (the context).
import { Component, TemplateRef, ComponentRef, ViewContainerRef, ViewChild, AfterContentInit, ComponentFactoryResolver } from '@angular/core'; import { AuthFormComponent } from './auth-form/auth-form.component'; import { User } from './auth-form/auth-form.interface'; @Component({
selector: 'app-root',
template: `
<div>
<div #entry></div>
<template #tmpl let-obj let-location="location">
<details>
<summary>{{obj.name}}</summary>
<p> - Age: {{obj.age}}</p>
<p> - Address :{{location}}</p>
</details>
</template>
<hr />
<ng-container
[ngTemplateOutlet]="tmpl"
[ngTemplateOutletContext]="ctx"
></ng-container>
</div>
`
})
export class AppComponent implements AfterContentInit { @ViewChild('entry', { read: ViewContainerRef }) entry: ViewContainerRef;
@ViewChild('tmpl') tmpl: TemplateRef<any>; ctx = {
$implicit: {
name: 'John',
age:
},
location: 'USA'
} ngAfterContentInit() {
this.entry.createEmbeddedView(this.tmpl, {
$implicit: {
name: 'Zhentian',
age:
},
location: 'China'
})
} }
And in the generated DOM we can see that there is no empty div created.
[Angular] Using ngTemplateOutlet to create dynamic template的更多相关文章
- [Angular] Create dynamic content with <tempalte>
To create a dynamic template, we need to a entry component as a placeholder. Then we can use entry c ...
- Create Dynamic Modal Dialog Form in AdminLTE Bootstrap template
原文地址 Create modal dialog form in jquery using bootstrap framework, slightly different from the usual ...
- 索引模板和动态索引模板 (Index Template和Dynamic Template)
相关阅读 Index Templates https://www.elastic.co/guide/en/elasticsearch/reference/7.1/indices-templates.h ...
- [MST] Create Dynamic Types and use Type Composition to Extract Common Functionality
Since MST offers a runtime type system, it can create and compose types on the fly, making it possib ...
- [Angular Directive] Create a Template Storage Service in Angular 2
You need to define a <template> to be able to use it elsewhere in your app as a TemplateRef. Y ...
- [Angular] Use Angular style sanitization to mark dynamic styles as trusted values
Angular has a very robust security model. Dynamically inserted html, style or url values into the DO ...
- [Angular] Using directive to create a simple Credit card validator
We will use 'HostListener' and 'HostBinding' to accomplish the task. The HTML: <label> Credit ...
- [Angular 2] Using ng-for to repeat template elements
This lesson covers Angular 2’s version of looping through data in your templates: ng-for. It’s conce ...
- [Angular] Two ways to create Angular Animation, using animation() or using state()
We have two blocks to show to difference ways to do animation in Angular: <button (click)="t ...
随机推荐
- $Vijos P1250$
背包? 跑完并查集 分组背包完事 #include <bits/stdc++.h> #define rep(i,j,n) for(register int i=j;i<=n;i++) ...
- jsp文件就是Servlet,可以在tomcat里进行查看
D:\apache-tomcat-8.0.21\work\Catalina\localhost\springmvc2\org\apache\jsp\index_jsp.class
- iOS动画——UIKit动画
iOS动画 iOS有很多动画技术,API主要分布在两个库中,一个是UIKit,另一个是CoreAnimation,先对UIKit动画做一下总结. UIKit动画 在UIKit中,很多API都可以看到a ...
- 【转】Java 集合系列02之 Collection架构
概要 首先,我们对Collection进行说明.下面先看看Collection的一些框架类的关系图: Collection是一个接口,它主要的两个分支是:List 和 Set. List和Set都是接 ...
- jQuery中国各个省份地图分部代码
jQuery中国各个省份地图分部代码 在线演示本地下载
- Ch03 React/JSX/Component 簡介
Facebook 本身有提供 Test Utilities,但由于不够好用,所以目前主流开发社群比较倾向使用 Airbnb 团队开发的 enzyme,其可以与市面上常见的测试工具(Mocha.Karm ...
- CSS中的disable,hidden,readonly
项目中有时候需要对某个input进行隐藏或者禁止修改等. 需要隐藏某个input的时候就用hidden <input hidden="true" > 如果要禁止修改in ...
- CentOS7将firewall切换为iptables防火墙
- Web 服务器与应用服务器的区别是什么?
不太严谨的说法:web服务器就是负责接收用户的Request,然后响应html等给客户浏览器.应用服务器处理一些业务逻辑等. 作者:luo链接:https://www.zhihu.com/questi ...
- 太坑了,mybatis注解一对多,id没了
@Select("SELECT *, id nodes FROM QUESTION_PO WHERE ID=#{id}") @Results({ @Result(property ...