CODEWITHSUNDEEP
cssangular
gaurav singh
gaurav singh

Reputation: 35

How to change button colour on click?

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>

Upvotes: 2

Views: 157

Answers (6)

MajiD
MajiD

Reputation: 2585

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

Upvotes: 1

BlackSheep
BlackSheep

Reputation: 613

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>

Upvotes: 1

Shubham
Shubham

Reputation: 135

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
}

Upvotes: 1

Deykun
Deykun

Reputation: 1268

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>

Upvotes: 1

Jens Alenius
Jens Alenius

Reputation: 1931

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

Upvotes: 1

suveer
suveer

Reputation: 35

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

Upvotes: 0

Related Questions