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. Linux - 用 Konstruct 安装 KDE 3.x

    make-kde3.x Linux - 用 Konstruct 安装 KDE 3.x 找个截图工具 khtml2png (http://khtml2png.sourceforge.net/), 现在都 ...

  2. js08--函数1

    函数当成类看当成匿名对象看,都是跟java吻合的,只有当成函数看(函数自己可以执行)跟java区别在这里. function fact(){} var F = fact ; 函数名是函数对象的地址,是 ...

  3. eclipse个人插件

    1.SVN eclipse markets 安装m2e-subversion.svnkit 2.maven 本地装好mvn prefences导入maven安装目录和配置 3.单元测试覆盖率 EclE ...

  4. actionBarTab-actionBarTab自定义 布局没法改变其中字体相对中间的位置

    我们经常遇到对actionBarTab 进行操作的情况.现在记录修改它的样式的方法,已经如何自定义tab的显示布局 1.在你的theme主题中添加<item name="android ...

  5. Zabbix监控Tomcat,Redis

    一 Tomcat监控 1.1.1 Tomcat 端配置 JMX 编辑catalina.sh文件,配置如下: CATALINA_OPTS="$CATALINA_OPTS -Dcom.sun.m ...

  6. Day3晚笔记

    DEV C++扩展栈空间 -Wl,--stack=64000000000 带权二分图匹配 建一个超级源点S,超级汇点T 把左边的点的点权作为权值,连一条S到左边的点的边 把右边的点的点权作为权值,连一 ...

  7. Android 用Socket实现PC和手机的文件传输

    PC服务器端代码: /* * PC与<a href="http://lib.csdn.net/base/android" class='replace_word' title ...

  8. ecshop微信接口基础认识

    ecshop微信接口基础认识,当你要学习ecshop和微信整合的时候,你就必须研究ecshop的数据结构对接以及微信数据接口的基本知识.我们知道微信其实就是通过有效的消息推送,用JSON格式的数据或者 ...

  9. ToggleButton控件

    ToggleButton 两种状态 ·状态button     -继承自CompoundButton ·主要属性:-Android:textOn    -Android:textOff ·主要方法: ...

  10. Android DiskLruCache全然解析,硬盘缓存的最佳方案

    转载请注明出处:http://blog.csdn.net/guolin_blog/article/details/28863651 概述 记得在非常早之前.我有写过一篇文章Android高效载入大图. ...