CODEWITHSUNDEEP
csstypescriptionic4
gaus shaikh
gaus shaikh

Reputation: 145

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

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.

This is first page

This is second page

Upvotes: 1

Views: 350

Answers (2)

Shijin TR
Shijin TR

Reputation: 7756

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>

Upvotes: 0

Robert Hovhannisyan
Robert Hovhannisyan

Reputation: 3335

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 :)

Upvotes: 2

Related Questions