[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 ...
随机推荐
- BZOJ 3473
思路: CF原题 ZYF有题解 O(nlog^2n) //By SiriusRen #include <bits/stdc++.h> using namespace std; ; ]; i ...
- Fckeditor使用方法
下载地址 http://ckeditor.com/download <?php require('../fckeditor/fckeditor.php'); ?> <html> ...
- 318 Maximum Product of Word Lengths 最大单词长度乘积
给定一个字符串数组words,找到length(word[i]) * length(word[j])的最大值,并且两个单词不含公共的字母.你可以认为每个单词只包含小写字母.如果不存在这样的两个单词,返 ...
- Elasticsearch的索引模块(正排索引、倒排索引、索引分析模块Analyzer、索引和搜索、停用词、中文分词器)
正向索引的结构如下: “文档1”的ID > 单词1:出现次数,出现位置列表:单词2:出现次数,出现位置列表:…………. “文档2”的ID > 此文档出现的关键词列表. 一般是通过key,去 ...
- ResGen.exe”已退出,代码为2 问题处理
转载自 http://blog.sina.com.cn/s/blog_5f82a1060101d8tm.html 在64位的Windows 7下,用VS2010编译4.0以前的.Net项目会有问题. ...
- Linq学习(三)-基本查询
一.本将主要介绍内容 从linq,sql,lambda三个角度比较来学习 select.orderby.分页.group by.distinct.子查询.in的用法 1.select 查询用户和它们的 ...
- Java class对象说明 Java 静态变量声明和赋值说明
先看下JDK中的说明: java.lang.Object java.lang.Class<T> Instances of the class Class represent cla ...
- ProE常用曲线方程:Python Matplotlib 版本代码(玫瑰曲线)
Pyplot教程:https://matplotlib.org/gallery/index.html#pyplots-examples 玫瑰曲线 文字描述 平面内,围绕某一中心点平均分布整数个正弦花瓣 ...
- IOS7升级攻略
1) Select the main view, set the background color to black (or whatever color you want the status ba ...
- Python 之有道翻译数据抓取
import requests import time def you_dao(): key = input("请输入要翻译的内容:") # key = "哈哈" ...