The Angular <ng-container> is a grouping element that doesn't interfere with styles or layout because Angular doesn't put it in the DOM.

When we using Content Projection in a DUMP component:

<div class="card" style="width: 18rem;">
<ng-content select=".heading"> </ng-content>
<div class="card-body">
<ng-content select=".body"> </ng-content>
</div>
</div>

We are using <ng-content> here to get projected element from the SMAR component:

<app-card>
<div class="heading"> <!-- add a extra div with class selector to wrap the elements -->
<img class="card-img-top" src="https://picsum.photos/g/200/300" alt="Card image cap">
</div>
<div class="body"> <!-- add a extra div with class selector to wrap the elements -->
<h5 class="card-title">Card Title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</app-card>

It ends up we have a extra div in the DOM, to remove that extra div, we just need to replace 'div' with 'ng.container':

<app-card>
<ng-container class="heading">
<img class="card-img-top" src="https://picsum.photos/g/200/300" alt="Card image cap">
</ng-container>
<ng-container class="body">
<h5 class="card-title">Card Title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</ng-container>
</app-card>

[Angular] Remove divs to Preserve Style and Layout with ng-container in Angular的更多相关文章

  1. angular学习的一些小笔记(中)之基础ng指令

    一.布尔属性指令: ng-disabled:就是ng-disabled=true-->就指向不可用 <!doctype html> <html ng-app="&qu ...

  2. Visual Studio Code作为Angular开发工具常用插件安装、json-server安装与使用、angular/cli安装失败问题

    前提准备: 搭建好Angular开发环境 1 安装Visual Studio Code 教程简单,不会的去问度娘 2 安装Chrome浏览器 教程简单,不会的趣闻度娘 3 Visual Studio ...

  3. [Angular] Improve Server Communication in Ngrx Effects with NX Data Persistence in Angular

    Communicating with a remote server via HTTP presents an extra level of complexity as there is an inc ...

  4. Angular14 Visual Studio Code作为Angular开发工具常用插件安装、json-server安装与使用、angular/cli安装失败问题、emmet安装

    前提准备: 搭建好Angular开发环境 1 安装Visual Studio Code 教程简单,不会的去问度娘 2 安装Chrome浏览器 教程简单,不会的趣闻度娘 3 Visual Studio ...

  5. AngularJS进阶(三十九)基于项目实战解析ng启动加载过程

    基于项目实战解析ng启动加载过程 前言 在AngularJS项目开发过程中,自己将遇到的问题进行了整理.回过头来总结一下angular的启动过程. 下面以实际项目为例进行简要讲解. 1.载入ng库 2 ...

  6. [转]VS Code 扩展 Angular 6 Snippets - TypeScript, Html, Angular Material, ngRx, RxJS & Flex Layout

    本文转自:https://marketplace.visualstudio.com/items?itemName=Mikael.Angular-BeastCode VSCode Angular Typ ...

  7. 使用 angular directive 和 json 数据 D3 随着标签 donut chart演示样本

    使用angular resource载入中priorityData.json中间json数据,结合D3绘制甜甜圈图.执行index.html其结果见于图.: priorityData.json中jso ...

  8. Angular 2 to Angular 4 with Angular Material UI Components

    Download Source - 955.2 KB Content Part 1: Angular2 Setup in Visual Studio 2017, Basic CRUD applicat ...

  9. angularJs , json,html片段,bootstrap timepicker angular

    css .demotest { width: %; height: auto; overflow: auto; position: relative; margin: auto; margin-top ...

随机推荐

  1. Python/Django 批量下载Excel

    一.前提 项目上需求的变更总是时时发生的,应对需求的我们,也只能变更我们代码,所以.继前两篇之后,我们的批量下载诞生了 二.安装 本文使用zipstream库进行压缩,安装方式:pip install ...

  2. ASP.NET MVC5 之路由器

    这篇博客介绍的很详细 http://www.cnblogs.com/yaozhenfa/p/asp_net_mvc_route_1.html

  3. Linux命令(004) -- watch

    对Linux系统的操作过程中,经常会遇到重复执行同一命令,以观察其结果变化的情况.惯用的方法是:上下键加回车,或是Ctr+p然后回车.今天我们来了解一下watch命令,它可以帮助我们周期性的执行一个命 ...

  4. HDFS你一定要知道,要考的

    你肯定听过Hadoop,对就是那头奔跑的小象. Hadoop作为大数据时代代表性的解决方案被大家所熟知,它主要包含两部分内容: HDFS分布式文件存储 MapReduce分布式计算框架 前面我们分析存 ...

  5. ios9 -3dtouch 手势添加到app上

    模拟器实现3dtouch参考以下网站: http://my.oschina.net/u/2340880/blog/511509 - (BOOL)application:(UIApplication * ...

  6. [ CodeForces 865 D ] Buy Low Sell High

    \(\\​\) \(Description\) 给出\(N\)天股票的价钱\(A_1,...,A_N\),每天可以什么都不做,或者买入或卖出\(1\)支股票,分别花出或收入\(A_i\)元,求最大收益 ...

  7. node 搭建本地服务器

    /** * 代理服务器 natapp -authtoken f1bdaa0535788971 * 热部署指令 supervisor index */ const Koa = require('koa' ...

  8. 【MySQL】二进制分发安装

    操作系统:Red Hat Enterprise Linux Server release 6.5 Mysql安装包:mysql-5.6.34-linux-glibc2.5-x86_64.tar.gz ...

  9. struts.xml详解

    参考自:http://blog.csdn.net/zz_mm/article/details/5460397 1.    深入Struts2的配置文件 本部分主要介绍struts.xml的常用配置. ...

  10. vue中的父组件及子组件生命周期的执行顺序

    一.没有任何任何显示与隐藏限制条件的情况下: 1.运行的顺序依次是: 父组件created→父组件beforeMounted→子组件created→子组件beforeMounted→子组件mounte ...