Применить css в зависимости от условия

Question

Я пытаюсь применить класс css в зависимости от условия. Это мой код, но он, похоже, неправильно применяет класс.

В основном, если selectedEmployee.isHrEmailAddress истинно, я хочу переопределить section на .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

Вы можете использовать тернарный оператор в ngClass для выбора класса на основе условия

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

Answer 2

Здесь мы Go,

   .section-postal { // css file
        color:red;
    }

    i = true; // in ts file

     <section [ngClass]="{'section' : i, 'section-postal' : !i }"> //html file

Со ссылкой Добавление нескольких классов с использованием ngClass: Добавление нескольких классов с использованием ng-class

Answer 3

В html вы должны использовать имя класса без точки.

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

Answer 4

Вы также можете использовать привязку, если хотите просто переопределить отдельный класс. Вот документация , посмотрите раздел class property

<section [class.section-postal]="selectedEmployee.isHrEmailAddress"></section>

Answer 5

Вам необходимо удалить точку из имени класса в значении [ngClass].

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

Точка используется в синтаксисе селектора CSS для обозначения класса . Класс в HTML должен быть без точки.

section {          /* denotes the `<section>` tag: type selector syntax */
  height: 500px;
}

.section-postal {   /* denotes the `section-postal` class: class selector syntax */
  height: 650px;
}