Я создаю многоразовое окно оповещения в Angular 9. Когда я меняю тип оповещения, соответствующий класс не применяется

Question

Я пытаюсь создать повторно используемый компонент оповещения в angular 9. Но у меня проблема. Когда я пытаюсь указать тип оповещения, он не переключает тип оповещения. Только я получаю простой текст. Стили также не применяются. Может кто-нибудь, пожалуйста, помогите мне решить эту проблему.

Использование:

<app-alert-box alertType="warning">
        Hi this is alert
</app-alert-box>

Мой код:

alert-box.component. html

    <ng-container>
        <div
            [ngClass]="{
                'alert-danger': alertType == 'danger',
                'alert-info': alertType == 'info',
                'alert-success': alertType == 'success',
                'alert-warning': alertType == 'warning'
            }"
            class="alert"
            role="alert"
        >

            <span class="alert-content" #alertContent>

                <ng-content></ng-content>

            </span>
            <button (click)="alertClose()" *ngIf="closeButton" aria-label="Close">
X
            </button>
        </div>
    </ng-container>

alert-box.component.s css

.alert {
  padding: 20px;
  color: white;
  opacity: 1;
  transition: opacity 0.6s;
  margin-bottom: 15px;

  .danger {
    background-color: #f44336;
  }
  .success {
    background-color: #4caf50;
  }
  .info {
    background-color: #2196f3;
  }
  .warning {
    background-color: #ff9800;
  }
}

.closebtn {
  margin-left: 15px;
  color: white;
  font-weight: bold;
  float: right;
  font-size: 22px;
  line-height: 20px;
  cursor: pointer;
  transition: 0.3s;
}

.closebtn:hover {
  color: black;
}

alert-box.component.ts

import { Component, OnInit, Input } from "@angular/core";

@Component({
  selector: "app-alert-box",
  templateUrl: "./alert-box.component.html",
  styleUrls: ["./alert-box.component.scss"]
})
export class AlertBoxComponent implements OnInit {
  @Input() alertType = "info";
  @Input() closeButton = false;
  @Input() autoClose = false;
  @Input() autoCloseAfter = 5000;

  alertOpen = true;

  constructor() {}

  ngOnInit(): void {
    if (this.autoClose) {
      const timer = setTimeout(() => {
        this.alertClose();
        clearTimeout(timer);
      }, this.autoCloseAfter);
    }
  }

  alertClose(): void {
    this.alertOpen = false;
  }
}

Answer 1

Ваши классы называются alert-danger, alert-success, ... но ваш css просто ссылается на alert, success Измените на css на

.alert {
  padding: 20px;
  color: white;
  opacity: 1;
  transition: opacity 0.6s;
  margin-bottom: 15px;

  &.alert-danger {
    background-color: #f44336;
  }
  &.alert-success {
    background-color: #4caf50;
  }
 &.alert-info {
    background-color: #2196f3;
  }
  &.alert-warning {
    background-color: #ff9800;
  }
}

Пример Stackblitz