# ngClass & ngStyle — Angular

Source: https://www.geekswithgeeks.com/en/angular/ng-class-style-binding

> Toggle CSS classes and inline styles from your component.

## Conditional classes

`[ngClass]` takes an object where keys are class names and values decide whether they apply.

```html
<div [ngClass]="{ active: isActive, disabled: !isEnabled }">
  Card
</div>

<!-- for a single class, plain binding is simpler -->
<div [class.active]="isActive">Card</div>
```

## Inline styles

`[ngStyle]` binds several CSS properties at once from an object.

```html
<div [ngStyle]="{ color: textColor, 'font-weight': isBold ? 'bold' : 'normal' }">
  Styled text
</div>
```