zoukankan      html  css  js  c++  java
  • [Angular] Use Angular’s @HostBinding and :host(...) to add styling to the component itself

    One thing that we can do is to add styles directly to HTML elements that live within our component. However, in this lesson we see that style classes added to your template HTML within your component get applied to an inner <div> and not your component host. We will learn how to use :host(...) and @HostBinding to add styling directly to the component host itself.

    import { Component, HostBinding } from '@angular/core';
    
    @Component({
      selector: 'host-styling',
      template: `
        <div>
          I'm a div that wants to be styled
          <button (click)="redFont = !redFont">toggle</button>  
        </div>
      `,
      styles: [
        `
          /* Apply this style if .yellow-style is added to the component tag itself */
          :host {
            background-color: yellow;
            display:block;
          }
          
          :host(.red-font) {
            color: red;
          }
        `
      ]
    })
    export class HostStylingComponent {
      @HostBinding ('class.red-font') redFont = true;
      
    }

    We can use :host(<class-name>) with @HostBinding, it will add .red-font class to the host element based on condition.

  • 相关阅读:
    大数减法模板
    扩展kmp模板
    poj2185(kmp)
    poj3167(kmp)
    kuangbin专题K(next数组)
    kuangbin专题16I(kmp)
    kuangbin专题16H(next数组)
    kuangbin专题16D(next求最小循环节)
    kuangbin专题16B(kmp模板)
    Java集合--TreeSet
  • 原文地址:https://www.cnblogs.com/Answer1215/p/7365657.html
Copyright © 2011-2022 走看看