IntermediateWeb Developmentintermediate

Attribute: ngStyle

Relax. We'll talk through this in plain words — no textbook voice.

ngStyle directive is used to dynamically set inline styles on an element.

typescript

<div [ngStyle]="{
  'background-color': bgColor,
  'font-size': fontSize + 'px',
  'font-weight': isBold ? 'bold' : 'normal',
  'padding': '20px'
}">
  Styled Content
</div>

// component.ts
export class MyComponent {
  bgColor = '#3498db';
  fontSize = 18;
  isBold = true;
}

You should see

(The div will show up with a blue background, 18px font size, and bold font weight)