[Angular Directive] Write a Structural Directive in Angular 2
Structural directives enable you to use an element as a template for creating additional elements. Creating structural directives requires a knowledge of <template> elements, but they're easy and extremely powerful once you undrestand the concepts.
What is stuctural looks like:
<h1 *structure>This is structure directive</h1> <!-- Equals to -->
<template structure>
<h1>This is structure directive</h1>
</template>
So Structural Directive is just something shorthand for template.
import {Directive, TemplateRef, ElementRef, ViewContainerRef, Input} from '@angular/core';
@Directive({
selector: '[structure]'
})
export class StructureDirective {
@Input('structure') num;
constructor(private template: TemplateRef<any>,
private view: ViewContainerRef) {
}
ngAfterContentInit() {
let num: number = Number(this.num);
if (num > ) {
while (num --){
this.view.createEmbeddedView(this.template);
}
}
}
}
<h1 *structure="'4'">This is structure directive</h1>
So it will print out:

[Angular Directive] Write a Structural Directive in Angular 2的更多相关文章
- [Angular Directive] Assign a Structual Directive a Dynamic Context in Angular 2
Just like passing in an array to *ngFor, you can pass in any value into your structural directive s ...
- AngularJS.directive系列:嵌套directive的通讯及scope研究
一.directive中的scope directive无疑是AngularJS中比较复杂难懂的部分,而directive中个scope更是其中最复杂的部分了,尤其是在嵌套directive中互相通讯 ...
- [Angular Directive] Implement Structural Directive Data Binding with Context in Angular
Just like in *ngFor, you're able to pass in data into your own structural directives. This is done b ...
- 从Java角度理解Angular之入门篇:npm, yarn, Angular CLI
本系列从Java程序员的角度,带大家理解前端Angular框架. 本文重点介绍Angular的开发.编译工具:npm, yarn, Angular CLI,它们就像Java在中的Maven,同时顺便介 ...
- Angular 个人深究(一)【Angular中的Typescript 装饰器】
Angular 个人深究[Angular中的Typescript 装饰器] 最近进入一个新的前端项目,为了能够更好地了解Angular框架,想到要研究底层代码. 注:本人前端小白一枚,文章旨在记录自己 ...
- (转载)从Java角度理解Angular之入门篇:npm, yarn, Angular CLI
本系列从Java程序员的角度,带大家理解前端Angular框架. 本文是入门篇.笔者认为亲自动手写代码做实验,是最有效最扎实的学习途径,而搭建开发环境是学习一门新技术最需要先学会的技能,是入门的前提. ...
- angular.module()创建、获取、注册angular中的模块
// 传递参数不止一个,代表新建模块;空数组代表该模块不依赖其他模块 var createModule = angular.module("myModule", []); // 只 ...
- Angular入门,开发环境搭建,使用Angular CLI创建你的第一个Angular项目
前言: 最近一直在使用阿里的NG-ZORRO(Angular组件库)开发公司后端的管理系统,写了一段时间的Angular以后发现对于我们.NET后端开发而言真是非常的友善.因此这篇文章主要是对这段时间 ...
- [Angular] Step-By-Step Implementation of a Structural Directive - Learn ViewContainerRef
For example we have two buttons: When we click nether one of those tow button, the modal should show ...
随机推荐
- php中ajax使用实例
php中ajax使用实例 一.总结 1.多复习:这两段代码都挺简单的,就是需要复习,要多看 2.ajax原理:ajax就是部分更新页面,其实还在的html页面监听到事件后,然后传给服务器进行操作,这里 ...
- Python-根据成绩分析是否继续深造
案例:该数据集的是一个关于每个学生成绩的数据集,接下来我们对该数据集进行分析,判断学生是否适合继续深造 数据集特征展示 GRE 成绩 (290 to 340) TOEFL 成绩(92 to 120) ...
- MD5和sha1加密算法--散列加密技术 MD5:128bit的大整数
在很多电子商务和社区应用中,我们都要存放很多的客户的资料,其中包括了很多的隐私信息和客户不愿被别人看到的信息,当然好有客户执行各种操作的密码,此时就需要对客户的信息进行加密再存储,目前有两种比较好的加 ...
- 91.生成ini文件并写入和读取ini文件
写入 WritePrivateProfileStringA("hello money", infx[i].name, money, "1.ini"); 按照字符 ...
- 1.13 Python基础知识 - 字典和集合
一.字典 字典是一组键-值对的数据结构.每个键对应一个值.在字典中,键不能重复.根据键可以查询到值.字典是键和值的映射关系 字典的定义: 字典通过花括号中用逗号分隔的元素(键-值.键-值对使用冒号分隔 ...
- jquery中prop()和attr()的使用
jquery1.6+出现的prop()方法. • 对于HTML元素本身就带有的固有属性,在处理时,使用prop方法. • 对于HTML元素我们自己自定义的DOM属性,在处理时,使用attr方法. • ...
- ACCESS数据库改名asp或asa
到把mdb改为asp或asa ACCESS数据库:把数据库后缀名改成ASP是防止ACCESS数据库被下载
- Mycat常见问题与解决方案---宜将剩勇追穷寇,不可沽名学霸王
1 Mycat目前有哪些功能与特性? 答: • 支持 SQL 92标准 • 支持Mysql集群,可以作为Proxy使用 • 支持JDBC连接多数据库 • 支持NoSQL数据库 • 支持galera f ...
- logback--How do I configure an AsyncAppender with code? 转载
原文地址:https://github.com/tony19/logback-android/issues/54 Please provide an example of how to configu ...
- UVA 10391 - Compound Words 字符串hash
http://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&page=show_problem&p ...