[style] and [class] dynamic binding in angular

style:

example 1:

[style]="{ 'border-color': control?.controls?.dutyDepartmentId?.errors?.required ? 'red' : '' }"

example 2:

<div [style.color]="'red'" [style.font-size.px]="24">This text is red and has a font size of 24 pixels.</div>

class:

example 1:

<div [class.specile-input]="control?.controls?.dutyDepartmentId?.errors?.required"></div>

example 2:

<div [class]="{ 'specile-input': control?.controls?.dutyDepartmentId?.errors?.required, 'big-text': isBigText }"></div>