Apply css based on condition - css

Question

I am trying to apply a css class based on a condition. This is my code but it does not seem to apply the class correctly.
Basically if selectedEmployee.isHrEmailAddress is true then I want to override section with .section-postal
HTML
<section [ngClass]="{'.section-postal': selectedEmployee.isHrEmailAddress}">
<div class="page-container">
<div id="wrapper">
<form *ngIf="contactDetailsForm" [formGroup]="contactDetailsForm">
<div class="text-left">
<div class="flex flex-row sm:flex-col md:flex-row-reverse lg:flex-col-reverse xl:flex-row">
<div class="check-container text-left" style="width: 450px;">
<div class="flex flex-row sm:flex-col md:flex-row-reverse lg:flex-col-reverse xl:flex-row">
<div class="line">
<p-checkbox name="isHrEmailAddress" formControlName="isHrEmailAddress"
[(ngModel)]="selectedEmployee.isHrEmailAddress" binary="true"
(onChange)="toggle('emailCheckId')">
</p-checkbox>
<span class="ml-2 pt-4" style="font-size: 15px;">I am using my email address on the
member's behalf</span>
</div>
</div>
</div>
</div>
<div class="note" *ngIf="selectedEmployee.isHrEmailAddress">
<span>Please note: You will need to confirm the employee's postal address, so that they can be
contacted in future.</span>
</div>
</div>
</form>
</div>
</div>
</section>
css
section {
height: 500px;
}
.section-postal {
height: 650px;
}

Answer 1

You can use ternary operator in ngClass to select the class based on condition
[ngClass]="selectedEmployee.isHrEmailAddress ? 'section-postal' : 'section'"

Answer 2

You need to remove the dot from the class name in the [ngClass] value.
<section [ngClass]="{'section-postal': selectedEmployee.isHrEmailAddress}">
The dot is used in the CSS selector syntax to denote a class. The class in the HTML should be without the dot.
section { /* denotes the `<section>` tag: type selector syntax */
height: 500px;
}
.section-postal { /* denotes the `section-postal` class: class selector syntax */
height: 650px;
}

Answer 3

In html you must use the class name without the dot.
[ngClass]="{'section-postal': selectedEmployee.isHrEmailAddress}">

Answer 4

You can also use binding, if you just want to override a single class. Here is the documentation, check out the section class property
<section [class.section-postal]="selectedEmployee.isHrEmailAddress"></section>

Answer 5

Here We Go ,
.section-postal { // css file
color:red;
}
i = true; // in ts file
<section [ngClass]="{'section' : i, 'section-postal' : !i }"> //html file
With reference Adding Multiple Class using ngClass :
Adding multiple class using ng-class