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: `    
     
            Here are some inline styles!    
     
    
            set    
  `})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:

width: '200px'