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>的更多相关文章

  1. Create Dynamic Modal Dialog Form in AdminLTE Bootstrap template

    原文地址 Create modal dialog form in jquery using bootstrap framework, slightly different from the usual ...

  2. Django Views: Dynamic Content

    世味年来薄似纱,谁令骑马客京华. 小楼一夜听春雨,深巷明朝卖杏花. 矮纸斜行闲作草,晴窗细乳戏分茶. 素衣莫起风尘叹,犹及清明可到家. Your Second View: Dynamic Conten ...

  3. 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 错误. 总结一下发生错误的原因,一般的 ...

  4. swipe js dynamic content

    swipe js dynamic content swipe 动态改变内容时,需要用 update 一下. swiper.update(true); 实例: HTML Code  页面用的FreeMa ...

  5. [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 ...

  6. [Angular] Using ngTemplateOutlet to create dynamic template

    I can use <tamplete> syntax and a entry component as a container to create a dynamic component ...

  7. 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 ...

  8. [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 ...

  9. [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 ...

随机推荐

  1. 读书笔记-Java设计模式

    本文来自http://blog.csdn.net/liuxian13183/ ,引用必须注明出处! Java的封装性很好,拿访问控制符来讲,没有权限的类或方法是不能访问的.如public,都可访问:p ...

  2. COGS——T 2057. [ZLXOI2015]殉国

    http://cogs.pro/cogs/problem/problem.php?pid=2057 ★☆   输入文件:BlackHawk.in   输出文件:BlackHawk.out   评测插件 ...

  3. 【SonicUI】关于字体高亮的问题。。

    m_pSonicString[1]->Format(_T("/c=%x, a='http://hi.csdn.net/', linkh=0xFF00F0, font, font_hei ...

  4. openGLES(一)

    准备工作 工具安装 jdk安装 sdk安装 IDE开发环境 一个手机 推荐使用真机,它可以反映真实的性能和结果. 虚拟机创建 Android SDK 执行SDK Manager.exe Tools-- ...

  5. localStorage存储数据位置

    chrome浏览器:C:\Users\Username\AppData\Local\Google\Chrome\User Data\Default\Local Storage 中,虽然后缀名是.loc ...

  6. 泛型T和Object 区别?

    T表示不能确定具体类型,Object是超类.最直接的区别在于:当用T时,开发人员不用强转类型 如:public T MethodName(T t); 如果传入String,则T就是String,所以返 ...

  7. 【例题 7-9 UVA-1601】The Morning after Halloween

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 对于没有出现的,当成0节点就好. 所以总是认为有3个人需要走到各自的终点. 将平面图转成点边图.这样比较好枚举. (二维变成一维,模 ...

  8. 语言模型(Language Modeling)与统计语言模型

    1. n-grams 统计语言模型研究的是一个单词序列出现的概率分布(probability distribution).例如对于英语,全体英文单词构成整个状态空间(state space). 边缘概 ...

  9. 8.6 Android灯光系统_源码分析_背光灯

    Change system screen brightness, using android.provider.Settings.System.SCREEN_BRIGHTNESSandroid-er. ...

  10. Android中各种drawable的使用

    转载请说明出处.本文来自Android菜鸟:http://blog.csdn.net/android_cai_niao/article/details/46854767  QQ:2717521606 ...