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

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.

Robert Hovhannisyan · Accepted Answer · 2019-05-09 06:40:02Z

2

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

answered May 9, 2019 at 6:40

Robert Hovhannisyan

3,4106 gold badges25 silver badges51 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Michael Mano Over a year ago

hes after a click on the first page and class on the second page.

sebaferreras Over a year ago

Direct access to the DOM is not recommended in Angular apps. If you want to add or remove a class from the template, using NgClass would be the right approach.

Shijin TR · Accepted Answer · 2019-05-09 06:41:29Z

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>

Collectives™ on Stack Overflow

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

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related