[Angular 8] Keep original DOM structure with ng-container
ng-container is using for grouping elments together, a bit similar to div.
If you want to group some elements together, but don't want to break the DOM structure, you can use ng-container.
For example:
<p>
I turned the corner
<span *ngIf="hero">
and saw {{hero.name}}. I waved
</span>
and continued on my way.
</p>
You also have a CSS style rule that happens to apply to a <span>
within a <p>
aragraph.
css:
p span { color: red; font-size: 70%; }
The p span
style, intended for use elsewhere, was inadvertently applied here.
Another problem: some HTML elements require all immediate children to be of a specific type. For example, the <select>
element requires <option>
children. You can't wrap the options in a conditional <div>
or a <span>
.
<div>
Pick your favorite hero
(<label><input type="checkbox" checked (change)="showSad = !showSad">show sad</label>)
</div>
<select [(ngModel)]="hero">
<span *ngFor="let h of heroes">
<span *ngIf="showSad || h.emotion !== 'sad'">
<option [ngValue]="h">{{h.name}} ({{h.emotion}})</option>
</span>
</span>
</select>
Using ng-contianer:
<p>
I turned the corner
<ng-container *ngIf="hero">
and saw {{hero.name}}. I waved
</ng-container>
and continued on my way.
</p>
<div>
Pick your favorite hero
(<label><input type="checkbox" checked (change)="showSad = !showSad">show sad</label>)
</div>
<select [(ngModel)]="hero">
<ng-container *ngFor="let h of heroes">
<ng-container *ngIf="showSad || h.emotion !== 'sad'">
<option [ngValue]="h">{{h.name}} ({{h.emotion}})</option>
</ng-container>
</ng-container>
</select>
[Angular 8] Keep original DOM structure with ng-container的更多相关文章
- angular中如何监控dom渲染完毕
刚刚看到群上一个人说,他们公司凡是用angular和jquery插件一起用的人,都被解雇了,没看到这句话之前我很惭愧的说我有这样用过,其实angular的生态系统那么完善,完全可以不用去操作任何的do ...
- angular学习笔记-angular中怎么获取dom元素
步骤分解: 第一步:给要获取的元素一个ng-model变量,并且绑定事件啦! <div class="home" ng-model="dirName" n ...
- angular监听dom渲染完成,判断ng-repeat循环完成
一.前言 最近做了一个图片懒加载的小插件,功能需要dom渲染完成后,好获取那些需要懒加载的dom元素.那么问题来了,如果只是感知静态的dom用ready,onload都可以,但项目用的angular, ...
- Angular源代码学习笔记-原创
时间:2014年12月15日 14:15:10 /** * @license AngularJS v1.3.0-beta.15 * (c) 2010-2014 Google, Inc. http:// ...
- Angular之 Scope和 Directive
---------------------------Scope-------------------------------- https://docs.angularjs.org/guide/sc ...
- [转]angular之$apply()方法
这几天,根据buddy指定的任务,要分享一点angular JS的东西.对于一个在前端属于纯新手的我来说,Javascript都还是一知半解,要想直接上手angular JS,遇到的阻力还真是不少.不 ...
- [译]ng指令中的compile与link函数解析 转
通常大家在使用ng中的指令的时候,用的链接函数最多的是link属性,下面这篇文章将告诉大家complie,pre-link,post-link的用法与区别. 原文地址 angularjs里的指令非常神 ...
- Angular移除不必要的$watch之性能优化
双向绑定是Angular的核心概念之一,它给我们带来了思维方式的转变:不再是DOM驱动,而是以Model为核心,在View中写上声明式标签.然后,Angular就会在后台默默的同步View的变化到Mo ...
- Angular 基础入门
简介 什么是AngularJS 一个功能非常完备的前端框架,通过增强HTML的方式提供一种便捷开发Web应用程序的方式 其核心特点就是几乎无任何DOM操作,让开发人员的精力和时间全部集中于业务 MVC ...
随机推荐
- Python-11-生成器
一.定义 可以理解为一种数据类型,这种数据类型自动实现了迭代器协议(其他数据类型需要调用__iter__方法),所以生成器就是一种迭代器. 二.生成器的两种形式 1. 生成器函数 使用yield代替r ...
- idea之常见问题解决
在启动类中的main方式时报类似java.lang.NoClassDefFoundError: javax/servlet/http/HttpServletRequest异常 解决方案:
- 隐马尔可夫模型(HMM)的分类
1.遍历型(ergodic model) 即每个状态都可以由任意一个状态演变而来,aij>0,for all i , j. 如图: 2.left-right type of HMM 每个状态只能 ...
- C# 后台获取GridView列表的值
int rowIndex = ((GridViewRow)((Button)sender).NamingContainer).RowIndex;//获取gridview中的行号 ...
- flask_mail使用
python3里发送邮件使用smtplib模块,内置得,不用下载安装,直接导入即可 smtplib使用实例 import smtplib from email.mime.text import MIM ...
- robot framework笔记(三):扩展SeleniumLibrary库 (自定义关键字)
(一)自定义和浏览器相关的关键字 以下代码GitHub 版本库地址: https://github.com/blairwind/blog_rf SeleniumLibrary的扩展文档中提供了3种增加 ...
- DBUtils模块
Python 中的数据库连接池 DBUtils是Python的一个用于实现数据库连接池的模块. 有两种模式 模式一:为每个线程创建一个连接,线程即使调用了close方法,也不会关闭,只是把连接重新放到 ...
- 程序写入mycat中文乱码解决(也包括mysql编码修改)
乱码问题可能出现的三个地方 1.程序连接的编码要设置 jdbc:mysql://192.168.1.1:8066/TESTDB?useUnicode=true&characterEncodin ...
- 【JUC】5.线程池—Executor
创建线程池可以分为三种方式: 1. 通过ThreadPoolExecutor的构造方法,创建ThreadPoolExecutor的对象,即一个线程池对象: 此构造方法,一共7个参数,5个必须参数,2个 ...
- elk使用不足及弥补报警措施
全部都是6.6.2版本,就这还是没有敢选太新的 场景:每个收集点部署filebeat收集响应日志,然后发送到logstash,logstash发送到elasticsearch,和file,这里插一句, ...