Angular 8中的风格绑定

在Angular 8中使用样式绑定为HTML元素赋予CSS样式是非常容易的。样式绑定是用来设置视图元素的样式。我们可以使用angular中的样式绑定来设置HTML元素的内联样式。你也可以有条件地给一个元素添加样式，从而创建一个动态样式的元素。

语法:

<element [style.style-property] = "'style-value'">

示例 1:

app.component.html:

<h1 [style.color] = "'green'" 
    [style.text-align] = "'center'" >
  GeeksforGeeks
</h1>

输出:

例子2：使用样式绑定来设置字体的大小。

app.component.html:

<div [style.color] = "'green'" 
     [style.text-align] = "'center'" 
     [style.font-size.px]="'24'" >
  GeeksforGeeks
</div>

输出:

例子3：条件性造型。

app.component.html:

<div [style.color]="status=='error' ? 'red': 'green'" 
     [style.text-align] = "'center'" 
     [style.font-size.px]="'24'" >
  GeeksforGeeks
</div>

app.component.ts:

import { Component } from '@angular/core';    
@Component({    
  selector: 'app-root',    
  templateUrl: './app.component.html',    
  styleUrls: ['./app.component.css']    
})    
export class AppComponent {   
  status = "All good";
}

输出: