How to change button colour on click?

user_14052238 0
Viewed 111

I want to change my button colour on click using angular and css as I am very new to it.

.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>
angular css
6 Answers

You can add this in the html button tag ‘<button [class.mycolorclass]=’hasClicked’ (click)=’hasClicked=true’ The logic in the click directive can be moved into a method in the typescript class if you prefer that

user_33020040

I'm not familiar with angular, but CSS :active should manage to do this:

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>

user_67438080

on button click set variable true/false as per your requirement

buttonClicked=false;

onButtonClick(){
this.buttonClicked=true;
}

and give condition in HTML like this

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

and in css add classes like

.myClassHighlighted{
//your styles here
}

.none{
//your styles here
}
user_68747680

.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>
user_31835920

Use ngClass in your buttons to give 'em conditional classes based on a flag which is set true only when you click on that button so I guess you will need ngClick as well, well I don't know about the version of Angular that you are using right now cuz you didn't mention that but now you know you will need ngClass and ngClick for sure and your code might look like sth like this:

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

Need to add css class for button based on click css value change

user_23514700
Related