[Angular] Angular Advanced Features - ng-template , ng-container, ngTemplateOutlet
Previously we have tab-panel template defined like this:
<ul class="tab-panel-buttons" *ngIf="tabs">
<li
[ngClass]="{selected: tab.selected}"
(click)="selectTab(tab)"
*ngFor="let tab of tabs;">{{tab.title}}
</li>
</ul> <ng-content></ng-content>
So the template is not overrideable. If we want later able to pass in a different template, we need to use some advanced features from Angular.
ng-template: We can wrap the whole header into <ng-template>, by defualt, ng-template will not render to the DOM.
<ng-template #defaultTabHeader>
<ul class="tab-panel-buttons" *ngIf="tabs">
<li
[ngClass]="{selected: tab.selected}"
(click)="selectTab(tab)"
*ngFor="let tab of tabs;">{{tab.title}}
</li>
</ul>
</ng-template>
To be able to render the template to the DOM; we need to use <ng-content>:
<ng-template #defaultTabHeader let-tabs="tabsX">
<ul class="tab-panel-buttons" *ngIf="tabs">
<li
[ngClass]="{selected: tab.selected}"
(click)="selectTab(tab)"
*ngFor="let tab of tabs;">{{tab.title}}
</li>
</ul>
</ng-template> <ng-content *ngTemplateOutlet="defaultTabHeader; context: tabsContext"></ng-content> <ng-content></ng-content>
import {AfterContentInit, Component, ContentChildren, OnInit, QueryList} from '@angular/core';
import {AuTabComponent} from '../au-tab/au-tab.component'; @Component({
selector: 'au-tab-panel',
templateUrl: './au-tab-panel.component.html',
styleUrls: ['../tab-panel.component.scss']
})
export class AuTabPanelComponent implements OnInit, AfterContentInit { @ContentChildren(AuTabComponent)
tabs: QueryList<AuTabComponent>; constructor() { } ngOnInit() {
} ngAfterContentInit(): void {
const selectedTab = this.tabs.find(tab => tab.selected);
if(!selectedTab && this.tabs.first) {
this.tabs.first.selected = true;
}
} selectTab(tab: AuTabComponent) {
this.tabs.forEach(t => t.selected = false);
tab.selected = true;
} get tabsContext() {
return {
tabsX: this.tabs
};
} }
[Angular] Angular Advanced Features - ng-template , ng-container, ngTemplateOutlet的更多相关文章
- [Angular 6] 初学angular,环境全部最新,[ ng serve ] 不能启动,卡在 95% 不动 => 解决方案
2018.9.7 问题描述: 通过ng serve命令启动angular应用时,卡在95%, ctrl+c 停掉后看到错误内容为找不到ng_modules下的angular模块下的package.js ...
- [Python] Advanced features
Slicing 12345 L[:10:2] # [0, 2, 4, 6, 8]L[::5] # 所有数,每5个取一个# [0, 5, 10, 15, 20, 25, 30, 35, 40, 45, ...
- Angular template ng-template/container/content
1. ng-template 形式:<ng-template>...</ng-template> 默认ng-template中的内容会隐藏; 可通过[ngIf]来控制内容显示隐 ...
- [Angular] Change component default template (ng-content, ng-template, ngTemplateOutlet, TemplateRef)
Here is the defulat tab header template: <ng-template #defaultTabHeader let-tabs="tabsX" ...
- [Angular Directive] Structure directive and <template>
The structure directive is just a sugar syntax of <template>. Such as: <div *ngIf="nam ...
- [Angular] Angular Elements Intro
Make sure install the latest Angular v6 with Angular CLI. Checkout ght Github for the code. 1. Creat ...
- Angular - - angular.bind、angular.bootstrap、angular.copy
angular.bind 返回一个调用self的函数fn(self代表fn里的this).可以给fn提供参数args(*).这个功能也被称为局部操作,以区别功能. 格式:angular.bind(se ...
- Angular - - angular.element
angular.element 将DOM元素或者HTML字符串一包装成一个jQuery元素. 格式:angular.element(element); element:包装成jquery对象的html ...
- [Angular] Angular CDK Intro
1. Installl latest @angular/cli: sudo npm i -g @angular/cli@next The version I used is:6.0.0-rc.10 2 ...
随机推荐
- OpenCV特征点检测——Surf(特征点篇)&flann
学习OpenCV--Surf(特征点篇)&flann 分类: OpenCV特征篇计算机视觉 2012-04-20 21:55 19887人阅读评论(20)收藏举报 检测特征 Surf(Spee ...
- postgresql sql语句 更改表名
SELECT'alter table "public"."'|| t.tablename||'"'||' rename to "'|| "l ...
- flask_wtf flask 的 CSRF 源代码初研究
因为要搞一个基于flask的前后端分离的个人网站,所以需要研究下flask的csrf防护原理. 用的扩展是flask_wtf,也算是比较官方的扩展库了. 先上相关源代码: def validate_c ...
- 【Codeforces Round #456 (Div. 2) B】New Year's Eve
[链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 显然10000..取到之后 再取一个01111..就能异或成最大的数字了. [代码] /* 1.Shoud it use long ...
- 【例题 8-13 UVA - 11093】Just Finish it up
[链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 尺取法. 假设现在取[l..r]这一段. 然后发现累加的和小于0了. 那么方法只能是不走l..l+1这一段了 即delta递减(p[ ...
- 顶级、块级、内联,html元素的三大分类
学习html后, 你会了解一些基本的html元素(Element), 如p, h1~h6, br, div, li, ul, img等.如果将这些元素细分, 又可以分别归为顶级(top-level)元 ...
- Maven实战(五)——自己主动化Web应用集成測试
自己主动化集成測试的角色 本专栏的上一篇文章讲述了Maven与持续集成的一些关系及详细实践,我们都知道,自己主动化測试是持续集成不可缺少的一部分,基本上,没有自己主动化測试的持续集成,都非常难称之为真 ...
- ubuntu下sudo命令不再输入密码
ubuntu下普通用户是没有root权限,很多命令在使用时都需要使用命令sudo 'cmd',但系统需要user验证自己,即需要输入普通用户的密码.但普通用户是否有执行该cmd的权限,需要到系统文件/ ...
- Maven和Ant的差别
近期做的项目中一直是在使用maven.可是要知道最早出来的构建工具是Ant,如今Ant依旧有好多人再用.于是自己就抽出来时间.学习了一下Ant的主要的使用.这样也能跟好的理解Maven提供的新特性. ...
- 初步使用RecyclerView实现瀑布流
先看效果 关于RecyclerView,真的是很强大. 个人觉得主要方便的地方是 1.直接可以设置条目布局,通过setLayoutManager LinearLayoutManager:线性布局,横向 ...