zoukankan      html  css  js  c++  java
  • [Angular] Remove divs to Preserve Style and Layout with ng-container in Angular

    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=" 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>
  • 相关阅读:
    mysql-community-server-5.7.24 & 5.7.31 (5.6.35 升级到 5.7.24)
    企业 数据 能力 中台 大数据平台 CRM
    Tomcat日志切割配置
    你不知道的 Blob
    细说websocket快速重连机制
    DNS反向查询
    从安全的角度看待DNS
    LVS 负载均衡集群
    Linux服务器配置DNS解析
    react修改state的值
  • 原文地址:https://www.cnblogs.com/Answer1215/p/9221430.html
Copyright © 2011-2022 走看看