[Angular] Learn Angular Multi-Slot Content Projection
Now for au-modal component, we pass in tow component though contenct projection:
<au-modal
class="auth-modal"
#modal
*auModalOpenOnClick="[loginButton, signUpButton]"
[closeOnClickOutside]="true"
[closeOnEsc]="true">
<i class="fa fa-times" (click)="modal.close()"></i>
<au-tab-panel>
<!-- modal body-->
</au-tab-panel>
</au-modal>
One is 'au-tab-panel' which contains all the content body for modal. Another is 'i' tag, repersent a close icon.
Now both are passed in though content projection, so au-modal component, we need to know how to project two components into correct places.
au-modal component:
<div class="modal-overlay" (click)="onClick()"> <div class="modal-body" (click)="cancelCloseModal($event)"> <div class="close-icon">
<ng-content select="i"></ng-content>
</div> <ng-container *ngIf="body; else projectionBody">
<ng-container *ngTemplateOutlet="body"></ng-container>
</ng-container> <ng-template #projectionBody>
<ng-content></ng-content>
</ng-template> </div> </div>
Here using 'select' attr for ng-content, it will take the projection body with the correct selector. In this case, is 'i' tag.
The rest content which don't have any selector will goes into:
<ng-template #projectionBody>
<ng-content></ng-content>
</ng-template>
And this ng-template won't shows up until:
*ngIf="body; else projectionBody"
[Angular] Learn Angular Multi-Slot Content Projection的更多相关文章
- [Angular 2] Share Template Content In Another Template With Content Projection <ng-content>
Angular 1 provided a mechanism to place content from your template inside of another template called ...
- [Angular] Configurable Angular Components - Content Projection and Input Templates
We are going to have a modal component: <au-modal > </au-modal> And we can pass default ...
- [Angular] Content Projection with ng-content
For example there is tow form compoennts on the page, and what we want to do is reusing the form com ...
- angular 2 angular quick start Could not find HammerJS
Angular2 的material中 引用了 hammerjs,遇到Could not find HammerJS错误,正确的步骤如下: 需要在如下位置增加 对material 和 hammerjs ...
- ASP.NET Core 2.1 Web API + Identity Server 4 + Angular 6 + Angular Material 实战小项目视频
视频简介 ASP.NET Core Web API + Angular 6的教学视频 我是后端开发人员, 前端的Angular部分讲的比较差一些, 可以直接看代码!!!! 这是一个小项目的实战视频, ...
- [Angular] Learn How To Use ng-template Inputs
For example, we have a modal component, it can config that using ng-template as a configurable templ ...
- [Angular] Use Angular components in AngularJS applications with Angular Elements
When migrating AngularJS (v1.x) applications to Angular you have different options. Using Angular El ...
- 简话Angular 03 Angular内置表达式大全
一句话: 大多数html标签属性和事件都有一个对应的ng指令 说明:这些指令和原生html最大的区别就是可以动态更新.比如一个div的样式用ng-class后,我们就可以随意应用css class. ...
- [Angular] Refactor Angular Component State Logic into Directives
Allow the base toggle to be a tag (<toggle>) or attribute (<div toggle>). The <toggle ...
随机推荐
- 4. Brackets 前端编辑器试用
转自:https://blog.csdn.net/wuji3390/article/details/71170579 Brackets编辑器介绍 "一个现代的,开源的,了解网页设计的编辑器& ...
- dfs算法中求数列的组合
/* 从13个书中挑选5个值,他们的组合可能是 什么, 如下代码 dfs深度遍历, 和全排列是一种方法,但是思路不同 */ public class Main { static int count = ...
- js全局的解析与执行过程
先看下面实例的执行结果: alert(a);//undefined alert(b);//报错 alert(f);//输出f函数字符串 alert(g);//undefined var a = 1; ...
- Android 关于::app:clean :app:preBuild UP-TO-DATE :app:preDebugBuild UP-TO-DATE,引用jar冲突问题
错误提示: Information:Gradle tasks [:app:clean, :app:generateDebugSources, :app:generateDebugAndroidTest ...
- private SortedDictionary<string, object> Dic_values = new SortedDictionary<string, object>();
private SortedDictionary<string, object> Dic_values = new SortedDictionary<string, object&g ...
- 动态引入js代码
var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = & ...
- Easy mock - 安装配置和基本使用
Easy-mock easy-mock是一款比较好用的接口模拟工具, 使用之前我们需要安装和配置 需要下载的内容有以下 Node Redis MongoDB Node和Redis一路点下一步就行, M ...
- fsck---于检查并且试图修复文件系统中的错误
fsck命令被用于检查并且试图修复文件系统中的错误.当文件系统发生错误四化,可用fsck指令尝试加以修复. -a:自动修复文件系统,不询问任何问题: -A:依照/etc/fstab配置文件的内容,检查 ...
- Python爬虫之『urlopen』
本文以爬取百度首页为示例来学习,python版本为python3.6.7,完整代码会在文章末附上 本次学习所用到的python框架:urllib.request 本次学习所用到的函数: urllib. ...
- logback 生成日志
<?xml version="1.0" encoding="UTF-8"?> <configuration> <appender ...