Apply css based on condition

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;
 }

score 0 · Answer 1 · answered Jun 17 '20 at 11:20

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;
}

score 0 · Answer 2 · answered Jun 17 '20 at 11:22

0

In html you must use the class name without the dot.

[ngClass]="{'section-postal': selectedEmployee.isHrEmailAddress}">

answered Jun 17 '20 at 11:22

emihud

138
8

score 0 · Answer 3 · answered Jun 17 '20 at 11:30

0

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>

answered Jun 17 '20 at 11:30

Amyth

1,367
1
9
15

rubinmon · Answer 4 · 2020-06-17T11:39:04.987

0

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

edited Jun 17 '20 at 11:39

answered Jun 17 '20 at 11:33

rubinmon

153
3
12

score 0 · Accepted Answer · answered Jun 17 '20 at 11:39

0

You can use ternary operator in ngClass to select the class based on condition

[ngClass]="selectedEmployee.isHrEmailAddress ? 'section-postal' : 'section'"

answered Jun 17 '20 at 11:39

saravana kumar

116
6

Apply css based on condition

5 Answers5