title: How to change div background color on click in angular 6
body: <p>Below is the mark up</p>
  
  <pre><code>&lt;mat-card class="example-card" *ngFor="let filteredScreen of 
          filteredScreens"  let i = index &gt;
  
        &lt;mat-card-header&gt;
            &lt;div mat-card-avatar class="example-header-image" &gt;
                &lt;img mat-card-image class="list-img" src=" 
                  {{filteredScreen?.img}}" &gt;
            &lt;/div&gt;
              &lt;mat-card-content class="names" [innerHTML]="filteredScreen.name 
                | highlight: name"  &gt;{{ 
                      filteredScreen?.name }}
             &lt;/mat-card-content&gt;
        &lt;/mat-card-header&gt;
      &lt;/mat-card&gt;
  </code></pre>
  
  <p>How can i change the </p>
  
  <pre><code>    &lt;mat-card&gt;
  </code></pre>
  
  <p>background color on mouse click(not mouse hover) to any color,and</p>
  
  <pre><code>     &lt;mat-card-content&gt; 
  </code></pre>
  
  <p>color to any color permanently in angular. I have done changing the background color on mouse hover but i want it on click.</p>