[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 component to create a new Tamplete into it.
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>
</div>
`
})
export class AppComponent implements AfterContentInit { @ViewChild('entry', { read: ViewContainerRef }) entry: ViewContainerRef;
@ViewChild('tmpl') tmpl: TemplateRef<any> ngAfterContentInit() {
this.entry.createEmbeddedView(this.tmpl, {
$implicit: {
name: 'Zhentian',
age: 27
},
location: 'China'
})
} }
As we can see, we defined:
let-obj let-location="location"
let-obj: because nothing is assigned to 'let-obj', it means it will show all the $implicit value we defined in when we 'createEmbeddedView' as a second arguement.
If we open dev tools, we can see there is a '<div></div>' placeholder was created and the template we created is actually not inject into the placeholder div block, it is below placeholder.
[Angular] Create dynamic content with <tempalte>的更多相关文章
- Create Dynamic Modal Dialog Form in AdminLTE Bootstrap template
原文地址 Create modal dialog form in jquery using bootstrap framework, slightly different from the usual ...
- Django Views: Dynamic Content
世味年来薄似纱,谁令骑马客京华. 小楼一夜听春雨,深巷明朝卖杏花. 矮纸斜行闲作草,晴窗细乳戏分茶. 素衣莫起风尘叹,犹及清明可到家. Your Second View: Dynamic Conten ...
- android 使用Tabhost 发生could not create tab content because could not find view with id 错误
使用Tabhost的时候经常报:could not create tab content because could not find view with id 错误. 总结一下发生错误的原因,一般的 ...
- swipe js dynamic content
swipe js dynamic content swipe 动态改变内容时,需要用 update 一下. swiper.update(true); 实例: HTML Code 页面用的FreeMa ...
- [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] Using ngTemplateOutlet to create dynamic template
I can use <tamplete> syntax and a entry component as a container to create a dynamic component ...
- Create Your Content and Structure
The original page source Content is the most important aspect of any site. So let's design for the c ...
- [Angular] Create a custom validator for reactive forms in Angular
Also check: directive for form validation User input validation is a core part of creating proper HT ...
- [Angular] Create a custom validator for template driven forms in Angular
User input validation is a core part of creating proper HTML forms. Form validators not only help yo ...
随机推荐
- 读书笔记-Java设计模式
本文来自http://blog.csdn.net/liuxian13183/ ,引用必须注明出处! Java的封装性很好,拿访问控制符来讲,没有权限的类或方法是不能访问的.如public,都可访问:p ...
- COGS——T 2057. [ZLXOI2015]殉国
http://cogs.pro/cogs/problem/problem.php?pid=2057 ★☆ 输入文件:BlackHawk.in 输出文件:BlackHawk.out 评测插件 ...
- 【SonicUI】关于字体高亮的问题。。
m_pSonicString[1]->Format(_T("/c=%x, a='http://hi.csdn.net/', linkh=0xFF00F0, font, font_hei ...
- openGLES(一)
准备工作 工具安装 jdk安装 sdk安装 IDE开发环境 一个手机 推荐使用真机,它可以反映真实的性能和结果. 虚拟机创建 Android SDK 执行SDK Manager.exe Tools-- ...
- localStorage存储数据位置
chrome浏览器:C:\Users\Username\AppData\Local\Google\Chrome\User Data\Default\Local Storage 中,虽然后缀名是.loc ...
- 泛型T和Object 区别?
T表示不能确定具体类型,Object是超类.最直接的区别在于:当用T时,开发人员不用强转类型 如:public T MethodName(T t); 如果传入String,则T就是String,所以返 ...
- 【例题 7-9 UVA-1601】The Morning after Halloween
[链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 对于没有出现的,当成0节点就好. 所以总是认为有3个人需要走到各自的终点. 将平面图转成点边图.这样比较好枚举. (二维变成一维,模 ...
- 语言模型(Language Modeling)与统计语言模型
1. n-grams 统计语言模型研究的是一个单词序列出现的概率分布(probability distribution).例如对于英语,全体英文单词构成整个状态空间(state space). 边缘概 ...
- 8.6 Android灯光系统_源码分析_背光灯
Change system screen brightness, using android.provider.Settings.System.SCREEN_BRIGHTNESSandroid-er. ...
- Android中各种drawable的使用
转载请说明出处.本文来自Android菜鸟:http://blog.csdn.net/android_cai_niao/article/details/46854767 QQ:2717521606 ...