How to change the css of the button on onclick in angular6?

Question

I have few buttons in my webpage. I need to change the backgroundcolor & font-color when it is clicked. I have tried this,

<div class="card-body">
<h6 class="card-text">Data</h6>
<button ion-button block (click)="viewMore('data');
   displayPopup('data');" >
   ViewMore</button>&nbsp;
   <button ion-button block (click)="display('data');" >Display</button>
 </div> 

Likewise I have few more divs. Now I need to change the css of the viewmore button when it is clicked.

My css:

button:focus{
 background-color: blue;
}
button:active{
background-color: red;
} 

Now it is working for second button, when I click the first button popup comes & after closing the popup button css has not changed. Can somebody please suggest me?

Answer 1

The easiest way would be to use CSS pseudoclasses like you did. For clicked - or visited - elements, there's the :visited pseudoclass.

You should be familiar with basic css. W3schools is an awesome resource.

So in your case:

button:visited {
   background: red;
}

:focus is - as the same says - for the element which has focus.

Or:

button:active,
button:visited,
button:focus {
   background: red;
}

Answer 2

Your question it's not clear. The way to use ngStyle or ngClass otr style.attrib is used a variable and ternary operator. As you has severals buttons you need several variables. this variables can be a property of an object or an array. As an array

//You have an array
buttonsClicked:boolean[];
//In your .html

   <!--use index 0 for the first button, index 1 for the second button... -->
    <button ionbutton block [style.background-color]="buttonsClicked[0]?'red':'green'"
            (click)="buttonsClicked[0]=true;
                    viewMore('data');displayPopup('data');" >
       ViewMore</button>&nbsp;
       ....
     </div>

//when you close the popup you can clear all the buttonsClicked
this.buttonsClicked=[] //<--reinit the array