Нажмите, чтобы изменить стиль компонента

Question

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

Deafult is my.componenet.scss

Новая версия my2.componenet.scss

это моя загрузка компонента, я бы изменил styleurls, когда я нажал на функцию

@Component({
  selector: 'mycomponent',
  templateUrl: './mycomponent.component.html',
  styleUrls: ['./mycomponent.component.scss'],
})

есть моя функция

  public LoadDefaultStyle(){
    //  loading it styleUrls: ['./my.componenet.scss'], after rendering page
  }

  public LoadNewStyle(){
    //  loading it styleUrls: ['./my2.componenet.scss'], after rendering page
  }

Можете ли вы дать мне некоторые инструкции?

Answer 1

Пожалуйста, напишите стиль в двух разных классах и переключайте класс по клику.

 <div class="test_class" (click)="changeColor()"  
    [ngClass]="status ? 'success' : 'danger'">                
     Some content
</div>

    let status: boolean = false;
changeColor(){
    this.status = !this.status;       
}

.success{
  color: green;
}
.danger{
  color: red;
}