Hi I am developing an angular application. I want to create tabs, clicking on each calls a different function. I am using mat buttons for it. My code

<div flexLayout="row">
    <button mat-flat-button [color]="this.paletteColour" (click)="change()">B2-L1</button>
    <button mat-flat-button [color]="this.paletteColour" (click)="change()">B2-L3</button>
    <button mat-flat-button [color]="this.paletteColour" (click)="change()">B2-L3</button>
    <button mat-flat-button [color]="this.paletteColour" (click)="change()">B2-L4</button>

</div>

.ts file

 paletteColour
  change() {
  this.paletteColour = 'warn';
  }

.css file

.mat-flat-button {
    background-color: grey;
    border-radius: 0 px !important;;  
}

.mat-button, .mat-flat-button, .mat-icon-button, .mat-stroked-button { border-radius: 0px; }

but this changes colour of all the buttons when clicked on one button. How do I change the color of only one button that has been clicked and rest all remain the same colour.

PS : Colour change is working only when i ment background-colour in css.

Hi I am developing an angular application. I want to create tabs, clicking on each calls a different function. I am using mat buttons for it. My code

<div flexLayout="row">
    <button mat-flat-button [color]="this.paletteColour" (click)="change()">B2-L1</button>
    <button mat-flat-button [color]="this.paletteColour" (click)="change()">B2-L3</button>
    <button mat-flat-button [color]="this.paletteColour" (click)="change()">B2-L3</button>
    <button mat-flat-button [color]="this.paletteColour" (click)="change()">B2-L4</button>

</div>

.ts file

 paletteColour
  change() {
  this.paletteColour = 'warn';
  }

.css file

.mat-flat-button {
    background-color: grey;
    border-radius: 0 px !important;;  
}

.mat-button, .mat-flat-button, .mat-icon-button, .mat-stroked-button { border-radius: 0px; }

but this changes colour of all the buttons when clicked on one button. How do I change the color of only one button that has been clicked and rest all remain the same colour.

PS : Colour change is working only when i ment background-colour in css.

• javascript
• html
• css
• angular
• angular-material

Share Improve this question Follow edited Sep 24, 2019 at 21:41 Dharman♦ 33.4k2727 gold badges101101 silver badges147147 bronze badges asked Sep 20, 2019 at 9:32 chinkchink 1,66355 gold badges3737 silver badges8282 bronze badges 5

• 1 It's happening cause all buttons are pointing to the same variable. You need to create a separate variable OR an array of variables that correspond to each button. – Nicholas K Commented Sep 20, 2019 at 9:36
• I was thinking more on lines like active, if that button is clicked only that button colour change, other buttons must remain the same – chink Commented Sep 20, 2019 at 9:45
• Did you try the native javascript way ? – Sagar Khatri Commented Sep 20, 2019 at 9:50
• Also, you say you're calling multiple different functions but you're actually always calling the same function. – Peter Carter Commented Sep 20, 2019 at 10:07
• Hi, i wish to make two function calls, one to change the colour of button, other an api call, i haven't added the other function because my main objective here is to understand how to change the colour of selected button – chink Commented Sep 20, 2019 at 10:25

Add a ment  | 

7 Answers 7

Sorted by: Reset to default 3

Since you mentioned you were specifically using navigation I have another solution for you; You can make angular add a class named active when a route is active. This is achieved by routerLinkActive="active".

Stackblitz: https://stackblitz./edit/angular-ijn9bz

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { RouterModule } from '@angular/router'

import { AppComponent } from './app.ponent';
import { HelloComponent } from './hello.ponent';
import { HomeComponent } from './home/home.ponent';
import { Page2Component } from './page2/page2.ponent';
import { Page3Component } from './page3/page3.ponent';

@NgModule({
  imports:      [ 
    BrowserModule, 
    FormsModule,
    RouterModule.forRoot([
      { path: 'home', ponent: HomeComponent },
      { path: 'page2', ponent: Page2Component },
      { path: 'page3', ponent: Page3Component }
    ])
  ],
  declarations: [ AppComponent, HelloComponent, HomeComponent, Page2Component, Page3Component ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

app.ponent.html

<div flexLayout="row">
    <button [routerLink]="['/home']" routerLinkActive="active">B2-L1</button>
    <button [routerLink]="['/page2']" routerLinkActive="active">B2-L3</button>
    <button [routerLink]="['/page3']" routerLinkActive="active">B2-L3</button>
</div>

<router-outlet></router-outlet>

app.ponent.css

.active{
  background: yellow;
}

you cannot apply class(color attribute of mat) like above in angular.It should use as like below

 <div flexLayout="row">
          <button mat-flat-button [attr.color]="this.selected == 1 ? 'warn' : 'primary'" (click)="change(1)">B2-L1</button>
          <button mat-flat-button [attr.color]="this.selected == 2 ? 'warn' : 'primary'" (click)="change(2)">B2-L3</button>
          <button mat-flat-button [attr.color]="this.selected == 3 ? 'warn' : 'primary'" (click)="change(3)">B2-L3</button>
          <button mat-flat-button [attr.color]="this.selected == 4 ? 'warn' : 'primary'" (click)="change(4)">B2-L4</button>
      </div>

change(n) {
    this.paletteColour = 'warn';
    this.selected=n;
  }

According to your requirment, first you need to know which tab is active and then apply color only for that tab,for that purpose you need to have another variable currentActiveTab. You need to change the currentActiveTab value whenever user clicks on a different tab using change method and this will activate the color of tab by passing the tab index as param to the method.

<div flexLayout="row">
    <button mat-flat-button [color]="this.crrentActiveTab == 1 ? this.paletteColour : null" (click)="change(1)">B2-L1</button>
    <button mat-flat-button [color]="this.crrentActiveTab == 2 ? this.paletteColour : null" (click)="change(2)">B2-L3</button>
    <button mat-flat-button [color]="this.crrentActiveTab == 3 ? this.paletteColour : null" (click)="change(3)">B2-L3</button>
    <button mat-flat-button [color]="this.crrentActiveTab == 4 ? this.paletteColour : null" (click)="change(4)">B2-L4</button>
</div>

Here you will be setting the paleteinside the ts change method

 change(index) {
  this.currentActiveTab = index;
 }

You could put the buttons in their own ponents. I made a quick demo with a simple button. I am sure it works similar with angular material.

A major advantage is that this also separates functionality instead of making a ponent class that does everything.

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

@Component({
  selector: 'my-button',
  template: '<button [style.background]="this.color" (click)="toggleColor()">I am button #1</button>'
})
export class MyButtonComponent  {
  color = 'red';

  constructor(){}

  toggleColor(){
    if( this.color === 'red' )
      this.color = 'blue';
    else
      this.color = 'red';
  }
}

Play around with it: https://stackblitz./edit/angular-y8zf5a

Note: Personally I would not colour the buttons based on a button-click, but change the buttons class to indicate the availability of the function, which the button calls. So you would have classes like unavailable, processing, available, processed, etc. that reflect the state of the button. These classes would be styled with css.

use deep

 .mat-flat-button  /deep/ .mat-button-focus-overlay {
          background-color: grey;
          border-radius: 0 px !important;; 
    }

this will override the default style

I figured out a way

.html

<div flexLayout="row">
    <div flexLayout="row">
        <button mat-flat-button [ngClass]="this.selected == 1 ? 'tab_selected' : 'tab_unselected'" (click)="change(1)">B2-L1</button>
        <button mat-flat-button [ngClass]="this.selected == 2 ? 'tab_selected' : 'tab_unselected'" (click)="change(2)">B2-L3</button>
        <button mat-flat-button [ngClass]="this.selected == 3 ? 'tab_selected' : 'tab_unselected'" (click)="change(3)">B2-L3</button>
        <button mat-flat-button [ngClass]="this.selected == 4 ? 'tab_selected' : 'tab_unselected'" (click)="change(4)">B2-L4</button>
    </div>
</div>

.ts

selected
change(n) {
  this.paletteColour = 'warn';
  this.selected=n;
  console.log(this.selected);
}

.css

   .tab_selected {
    background-color: grey; 
    border-radius: 0 px !important;;  
}

 .mat-button {
  border-radius: 0 px !important;;     
} 

Thank you all for the support.

• Ver easy solution would be like the following:-

• Just use routeLinkActive='active' and set a class in the ponent css called active.

       <button 
           mat-raised-button 
           color="primary" 
           *appHasRole="'admin'" 
           routerLink="/admin"
           routerLinkActive="active"
           [routerLinkActiveOptions]={exact:true}
           >Home
       </button>