# Angular Layouts and Templates

• Conditional Classes
• Additional References

# Conditional Classes

<div [ngClass]="'first second'">
<div [ngClass]="['first', 'second']">
<div [ngClass]="{first: true, second: true, third: true}">
<div [ngClass]="{'first second': true}">

Add a property to the component

export class AlertComponent {
    @Input() width?: string = '';
}

Set options and the default class

<div [ngClass]="{
    'container py-5': true,
    'maxw-sm': width === 'sm',
    'maxw-md': width === 'md' || !width,
    'maxw-lg': width === 'lg',
}"> </div>

Usage

<app-layout [width]="'sm'"> </app-layout>

# Additional References

https://angular.io/api/common/NgClass