Изменить цвет фона тега <div>при нажатии кнопки в Angular 8

Question

В приведенном ниже HTML коде я пытаюсь изменить цвет фона нажатия кнопки.

<div>Hello This is Ajay<\div>

<button>Change Color!<\button>

Я новичок в Angular и пытался подключиться к JQuery и Angular процессов. Изменить фон настолько плавно в JQuery, но трудно с Angular. Я попробовал это с @Hostlisteners и HostBinding. Просто хотел знать, как это сделать.

Answer 1

Запуск функции по нажатию кнопки, чтобы изменить цвет. Вы можете переключаться между двумя цветами или генерировать случайный, как я.

bgColor : string = 'grey';

changeColor(){
    this.bgColor = '#'+(Math.random()*0xFFFFFF<<0).toString(16);
}

И привязать значение цвета к div, используя ngStyle,

<div [ngStyle]="{'background-color': bgColor}">
    Hello This is Ajay
</div>

<button (click)="changeColor()">Change Color!</button>

Демо: https://stackblitz.com/edit/angular-jrx7dz

Answer 2

Пожалуйста, обратитесь к этому коду, он отлично работает. Я проверил код на моей машине.

HTML Код:

 <div [ngClass]=" setRedClass ? 'redClass' : 'blueClass'">
    Some text
 </div>
 <button (click)="toggleClass()">Toggle Class</button>

Код TS:

 setRedClass: boolean = false;

 toggleClass(){
    this.setRedClass = !this.setRedClass;
 }

Answer 3

Для этой цели вы можете использовать директиву ngClass, используя два css класса, которые будут запускаться на основе логического значения toggle:

template:

<button 
    (click)="enableDisableRule()" 
    [ngClass]="{'green' : toggle, 'red': !toggle}">
    {{status}}
</button>

css

.green {
    background-color: green;
}

.red {
    background-color: red;
}

ц

toggle = true;
status = 'Enable'; 

enableDisableRule(job) {
    this.toggle = !this.toggle;
    this.status = this.toggle ? 'Enable' : 'Disable';
}