For example we have two buttons:

When we click nether one of those tow button, the modal should show up:

We will use structure directive to do that.

So create a new directive 'auModalOpenOnClick':

import {Directive, TemplateRef, ViewContainerRef} from '@angular/core';

@Directive({
selector: '[auModalOpenOnClick]'
})
export class AuModalOpenOnClickDirective { constructor(
private template: TemplateRef<any>,
private viewContainer: ViewContainerRef
) { }
}

A stucture need to use 'TemplateRef' and 'ViewContainerRef'. You can simply think that templateRef refer to the html you are going to show/hide. ViewContainerRef refers to the container that wrap the template/compoent, normally it should be <ng-template>.

HTML:

  <ng-template [auModalOpenOnClick]="[loginButton, signUpButton]">
<au-modal class="auth-modal">
<!-- modal content goes here-->
</au-modal>
</ng-template> <div class="modal-buttons"> <button #loginButton>Login</button> <button #signUpButton>Sign Up</button> </div>

So the way we use the directive is that it takes a input which can be array of template ref or just a single templateRef.

We are going to check in the directive, if the passed in templateRef(s) are clicked or not, if it is click, we are going to create a embbed view based on the template (au-modal) we got.

directive:

import {Directive, Input, TemplateRef, ViewContainerRef} from '@angular/core';

@Directive({
selector: '[auModalOpenOnClick]'
})
export class AuModalOpenOnClickDirective { @Input()
set auModalOpenOnClick (els) { let elements: HTMLBaseElement[]; if(Array.isArray(els)) {
elements = els;
} else {
elements = [els];
} elements.forEach(el => {
el.addEventListener('click', () => {
this.viewContainer.clear();
this.viewContainer.createEmbeddedView(this.template);
});
});
} constructor(
private template: TemplateRef<any>,
private viewContainer: ViewContainerRef
) { } }

And also worth to mention that:

  <ng-template [auModalOpenOnClick]="[loginButton, signUpButton]">
<au-modal class="auth-modal">
<!-- modal body-->
</au-modal>
</ng-template>

the same as:

    <au-modal class="auth-modal"*auModalOpenOnClick="[loginButton, signUpButton]">
<!-- modal body-->
</au-modal>

[Angular] Step-By-Step Implementation of a Structural Directive - Learn ViewContainerRef的更多相关文章

  1. Tomcat Clustering - A Step By Step Guide --转载

    Tomcat Clustering - A Step By Step Guide Apache Tomcat is a great performer on its own, but if you'r ...

  2. [ZZ] Understanding 3D rendering step by step with 3DMark11 - BeHardware >> Graphics cards

    http://www.behardware.com/art/lire/845/ --> Understanding 3D rendering step by step with 3DMark11 ...

  3. 课程一(Neural Networks and Deep Learning),第四周(Deep Neural Networks)——2.Programming Assignments: Building your Deep Neural Network: Step by Step

    Building your Deep Neural Network: Step by Step Welcome to your third programming exercise of the de ...

  4. Step by step Dynamics CRM 2011升级到Dynamics CRM 2013

    原创地址:http://www.cnblogs.com/jfzhu/p/4018153.html 转载请注明出处 (一)检查Customizations 从2011升级到2013有一些legacy f ...

  5. Step by Step 创建一个新的Dynamics CRM Organization

    原创地址:http://www.cnblogs.com/jfzhu/p/4012833.html 转载请注明出处 前面演示过如何安装Dynamics CRM 2013,参见<Step by st ...

  6. Step by step Install a Local Report Server and Remote Report Server Database

    原创地址:http://www.cnblogs.com/jfzhu/p/4012097.html 转载请注明出处 前面的文章<Step by step SQL Server 2012的安装 &g ...

  7. Step by step Dynamics CRM 2013安装

    原创地址:http://www.cnblogs.com/jfzhu/p/4008391.html 转载请注明出处   SQL Server可以与CRM装在同一台计算机上,也可安装在不同的计算机上.演示 ...

  8. Step by step 活动目录中添加一个子域

    原创地址:http://www.cnblogs.com/jfzhu/p/4006545.html 转载请注明出处 前面介绍过如何创建一个域,下面再介绍一下如何在该父域中添加一个子域. 活动目录中的森林 ...

  9. SQL Server 维护计划实现数据库备份(Step by Step)(转)

    SQL Server 维护计划实现数据库备份(Step by Step) 一.前言 SQL Server 备份和还原全攻略,里面包括了通过SSMS操作还原各种备份文件的图形指导,SQL Server  ...

随机推荐

  1. 【基础篇】Android MediaPlayer基本使用方式

    使用MediaPlayer播放音频或者视频的最简单例子: JAVA代码部分: public class MediaPlayerStudy extends Activity { private Butt ...

  2. 动态引入js代码

    var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = & ...

  3. host---域名查询

    host命令是常用的分析域名查询工具,可以用来测试域名系统工作是否正常. 选项 -a:显示详细的DNS信息: -c<类型>:指定查询类型,默认值为“IN“: -C:查询指定主机的完整的SO ...

  4. 阅读笔记—EL表达式

    表达式语言(EL) 表达式语言是一种在JSP页面中使用的数据访问语言,通过它可以很方便地在JSP页面中访问应用程序数据. 使用EL访问数据 表达式语言的使用形式:              ${exp ...

  5. Android中关于JNI 的学习(零)简单的样例,简单地入门

    Android中JNI的作用,就是让Java可以去调用由C/C++实现的代码,为了实现这个功能.须要用到Anrdoid提供的NDK工具包,在这里不讲怎样配置了,好麻烦,配置了好久. . . 本质上,J ...

  6. while 循环的理解

    if 与 while 的主要区别:if 只判断和执行一次,而 while 却代表着一个循环,执行多少次,要视情况而定: 两种情况(A.B)都会让循环体执行: while A or B: 两种情况(A. ...

  7. BZOJ2565: 最长双回文串(Manacher)

    Description 顺序和逆序读起来完全一样的串叫做回文串.比如acbca是回文串,而abc不是(abc的顺序为“abc”,逆序为“cba”,不相同).输入长度为n的串S,求S的最长双回文子串T, ...

  8. CISP/CISA 每日一题 21

    CISSP 每日一题(答)What is the term that identifies data ona disk after the data has supposedly been erase ...

  9. javascript中函数声明、变量声明以及变量赋值之间的关系与影响

    javascript中函数声明.变量声明以及变量赋值之间的关系与影响 函数声明.变量声明以及变量赋值之间有以下几点共识: 1.所有的全局变量都是window的属性 2.函数声明被提升到范围作用域的顶端 ...

  10. 51NOD——T 1079 中国剩余定理

    http://www.51nod.com/onlineJudge/questionCode.html#!problemId=1079 基准时间限制:1 秒 空间限制:131072 KB 分值: 0 难 ...