Angular How to toggle the color of a button which is inside a button group if it is clicked? - twitter-bootstrap-3

Question

I have a group of buttons in an angular 6 component:
<div class="container">
<div class="row">
<div class="clearfix text-center" [hidden]="!searchTerm">
<span class="inline">Filter results by :</span>
<div class="float-right">
<button type="submit" class="btn btn-primary" (click)="performSearch(searchTerm)">All</button>
<button type="submit" class="btn btn-secondary" (click)="domainesFilter(searchTerm)">Domaines</button>
<button type="submit" class="btn btn-secondary" (click)="sectionsFilter(searchTerm)">Sections</button>
<button type="submit" class="btn btn-secondary" (click)="groupsFilter(searchTerm)">Groups</button>
<button type="submit" class="btn btn-secondary" (click)="documentFilter(searchTerm)">Documents</button>
</div>
</div>
</div>
</div>
I want to change the color of the button to primary if it is clicked and set the color of the other buttons to secondary, how can I achieve that?

Answer 1

You can do something like this:
Component ts
#Component({
selector: 'app-my',
templateUrl: './my.component.html',
styleUrls: ['./my.component.css']
})
export class MyComponent implements OnInit {
selBtn: string;
constructor() { }
ngOnInit() {
}
performA(): void {
this.selBtn = 'a';
}
performB(): void {
this.selBtn = 'b';
}
performC(): void {
this.selBtn = 'c';
}
performD(): void {
this.selBtn = 'd';
}
performE(): void {
this.selBtn = 'e';
}
}
Template
<div class="container">
<div class="row">
<div class="clearfix text-center">
<span class="inline">Filter results by :</span>
<div class="float-right">
<button type="submit" class="btn {{ selBtn === 'a' ? 'btn-primary' : 'btn-secondary' }}" (click)="performA()">A</button>
<button type="submit" class="btn {{ selBtn === 'b' ? 'btn-primary' : 'btn-secondary' }}" (click)="performB()">B</button>
<button type="submit" class="btn {{ selBtn === 'c' ? 'btn-primary' : 'btn-secondary' }}" (click)="performC()">C</button>
<button type="submit" class="btn {{ selBtn === 'd' ? 'btn-primary' : 'btn-secondary' }}" (click)="performD()">D</button>
<button type="submit" class="btn {{ selBtn === 'e' ? 'btn-primary' : 'btn-secondary' }}" (click)="performE()">E</button>
</div>
</div>
</div>
</div>
Otherwise you could assign .btn-secondary to all your buttons, then adding btn-primary only if necessary like this:
<button type="submit" class="btn btn-secondary" [ngClass]="{'btn-primary' : selBtn === 'e'}" (click)="performE()">E</button>
With this solution you may need to adjust your css to be sure that btn-primary class overrides all of the properties of btn-secondary class

Answer 2

<div class="container">
<div class="row">
<div class="clearfix text-center" >
<span class="inline">Filter results by :</span>
<div class="float-right">
<button type="submit" class="btn" [ngClass]="{'btn-primary':ActiveButton=='All', 'btn-secondary':ActiveButton!='All'}" (click)="Search(searchTerm, 'All')">All</button>
<button type="submit" class="btn" [ngClass]="{'btn-primary':ActiveButton=='Domaines', 'btn-secondary':ActiveButton!='Domaines'}" (click)="Search(searchTerm, 'Domaines')">Domaines</button>
<button type="submit" class="btn" [ngClass]="{'btn-primary':ActiveButton=='Sections', 'btn-secondary':ActiveButton!='Sections'}" (click)="Search(searchTerm, 'Sections')">Sections</button>
<button type="submit" class="btn" [ngClass]="{'btn-primary':ActiveButton=='Groups', 'btn-secondary':ActiveButton!='Groups'}" (click)="Search(searchTerm, 'Groups')">Groups</button>
<button type="submit" class="btn" [ngClass]="{'btn-primary':ActiveButton=='Documents', 'btn-secondary':ActiveButton!='Documents'}" (click)="Search(searchTerm, 'Documents')">Documents</button>
</div>
</div>
</div>
</div>
And js code is like this.
Search(searchTerm, btn) {
this.ActiveButton = btn;
switch ( btn ) {
case 'All':
console.log('All');
break;
case 'Domaines':
console.log('Domaines');
break;
case 'Sections':
console.log('Sections');
break;
case 'Groups':
console.log('Groups');
break;
case 'Documents':
console.log('Documents');
break;
}
}