Как изменить цвет кнопки при нажатии?

Question

Я хочу изменить цвет моей кнопки при нажатии, используя angular и css, так как я новичок в этом.

.ts

 import { Component } from '@angular/core';

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
title = 'title';
}

. html

 <mat-sidenav color="primary" #sidenav fxLayout="column" mode="over"  opened="false"           fxHide.gt-sm="true">
    <div fxLayout="column">
      
        <button mat-button style="text-align:left" routerLink="butn1" >Attend</button>
        <button mat-button style="text-align:left" routerLink="butn2" >Host</button>
       
        <button mat-button style="text-align:left" routerLink="contact" >Contact</button>
        <button mat-button style="text-align:left" routerLink="login" >Login</button>
    </div>
  </mat-sidenav>

Answer 1

.ts

import { Component } from '@angular/core';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.scss']
})
export class AppComponent {
    title = 'title';
    buttons = [
        { title: 'Attend', link: 'butn1', active: false },
        { title: 'Host', link: 'butn2', active: false },
        { title: 'Contact', link: 'contact', active: false },
        { title: 'Login', link: 'login', active: false },
    ]

    toggleColor(button) {
        button.active = !button.active;
    }
}

. html

<mat-sidenav color="primary" #sidenav fxLayout="column" mode="over"  opened="false"           fxHide.gt-sm="true">
    <div fxLayout="column">
        <button
            mat-button
            *ngFor="let button of buttons"
            [color]="button.active ? 'accent' : 'primary'"
            style="text-align:left"
            [routerLink]="button.link"
            (click)="toggleColor(button)">
            {{ button.title }}
        </button>
    </div>

Answer 2

• 1000 1003 *, который вы используете прямо сейчас, потому что вы не упомянули об этом, но теперь вы знаете, что вам наверняка понадобятся ngClass и ngClick, и ваш код может выглядеть примерно так:

 <button mat-button style="text-align:left" [ngClass]="{'button--clicked': clicked}" routerLink="attend" (click)="clicked=!clicked" >Attend</button>

Answer 3

при нажатии кнопки установите переменную true / false в соответствии с вашим требованием

buttonClicked=false;

onButtonClick(){
this.buttonClicked=true;
}

и задайте условие в HTML как это

 <button mat-button
 [ngClass]="buttonClicked? 'myClassHighlighted' : 'none'" 
 style="text-align:left" routerLink="attend" >Attend</button>

и в css добавьте классы, например

.myClassHighlighted{
//your styles here
}

.none{
//your styles here
}

Answer 4

Я не знаком с angular, но CSS :active должно справиться с этим:

button {
  line-height: 30px;
  height: 30px;
  font-size: 15px;
  color: red;
  border: 1px solid black;
  background-color: #eee;
  color: black;
}

button:active {
  color: red;
  border-color: red;
}

<button>Click me!</button>

Answer 5

Вы можете добавить это в тег кнопки html '

Answer 6

Необходимо добавить css класс для кнопки на основе клика css изменение значения