zoukankan      html  css  js  c++  java
  • [Angular] Style HTML elements in Angular using ngStyle

    We will learn how to make use of the ngStyle directive to directly add multiple style attributes to a DOM element as a style property. We’ll also learn how we can make these styles more dynamic through user input.

    import { Component } from '@angular/core';
    
    @Component({
      selector: 'ngstyle-component',
      template: `
        <div [ngStyle]="borderStyle">
          Here are some inline styles!
        </div>
    
        <p>
          <input type="text" #boxWidth>
          <button (click)="updateStyle(boxWidth.value)">set</button>
        </p>
      `
    })
    export class NgStyleComponent {
      borderStyle = {
        border: '1px solid black',
        'border-radius': '3px',
        'width.px': 200,
        padding: '15px'
      };
    
      updateStyle(width) {
        this.borderStyle['width.px'] = width;
      }
    }

    Notice that when we use ngStyle, we are able to add '.unit' to the style.

    'width.px': 200,

    If not useing this syntax, you need to do:

     '200px'
  • 相关阅读:
    2.4学习
    2.3学习
    2.2学习
    2.1学习
    公文流转系统 模拟
    《GCC编译器的使用以及静态库和动态库的制作与使用》
    《驱动调试
    《海思3521D
    《驱动调试
    《驱动调试
  • 原文地址:https://www.cnblogs.com/Answer1215/p/7358536.html
Copyright © 2011-2022 走看看