How to add perticular css class based on the button click? - css

Question

I'm designing Ionic 4 plus angular app, I create 3 buttons with 3 different colour to each other (suppose all buttons is in the first page), in the second page I'm using HTML fieldset. Now I want when I click on the first button then second-page fieldset border colour should be blue,
when I click on second button fieldset border colour should be red etc.
Below image shows what exactly I want.

Answer 1

You can use add class and remove class.Create a function that will remove class which border color is black and add class which border color is red and e.t.
function myFunction() {
var element = document.getElementById("myDIV");
element.classList.add("mystyle");//add class
}
function myFunction() {
var element = document.getElementById("myDIV");
element.classList.remove("mystyle");//remove class
}
For better understanding read this: https://www.w3schools.com/howto/howto_js_add_class.asp
And this: https://www.w3schools.com/howto/howto_js_remove_class.asp
Good Luck :)

Answer 2

You can refer the following code sample in your code. It is not a complete working example but this has the basic idea about that.
page1.html
<button ion-button (click)="gotoPage2('blue')" color="blue">First button</button>
<button ion-button (click)="gotoPage2('red')" color="red">Second button</button>
<button ion-button (click)="gotoPage2('green')" color="green">Third button</button>
page1.ts
public gotoPage2(event ,color ){
this.navCtrl.push(page2,{
color:color
});
}
page2.ts
export class Page2 {
value:any;
constructor(public navParams: NavParams) {
this.color = navParams.get('color');
}
ionViewDidLoad() {
console.log('ionViewDidLoad EmiCalPage');
}
}
page2.html
<div [ngClass]="color" >
</div>