Style Binding Example In Angular

  It is basically used to set the style in HTML elements. 

Syntax:
   <tagname [style.characteristic]="varname">
                       |
                    color
                    background-color

Some styles like font-size have a unit extension. To set the font-size in pixels, use below syntax

<button style='color:red' [style.font-size.px]="FontSize">Click Me
                </button>

Example:

I am going to use the previous example only.

https://dotnetbyudayrajakonda.blogspot.com/2023/10/property-binding-in-angular.html

.html changes

 <button style='color:red' [style.font-weight]="IsBold ? 'bold' : 'normal'">Click Me
      </button>
















Output


Multiple Inline Styles


use NgStyle directive

Make below changes to the .ts file






















 IsBold: boolean = false;
  FontSize: number = 40;
  IsItalic: boolean = true;
  safeurl:any;
  AddingStyles() {
    let CssStyles = {
        'font-weight': this.IsBold ? 'bold' : 'normal',
        'font-style': this.IsItalic ? 'italic' : 'normal',
        'font-size.px': this.FontSize
    };

    return CssStyles;


.html changes


Output