How to change div background color on click in angular 6

Question

Below is the mark up

<mat-card class="example-card" *ngFor="let filteredScreen of 
        filteredScreens"  let i = index >

      <mat-card-header>
          <div mat-card-avatar class="example-header-image" >
              <img mat-card-image class="list-img" src=" 
                {{filteredScreen?.img}}" >
          </div>
            <mat-card-content class="names" [innerHTML]="filteredScreen.name 
              | highlight: name"  >{{ 
                    filteredScreen?.name }}
           </mat-card-content>
      </mat-card-header>
    </mat-card>

How can i change the

    <mat-card>

background color on mouse click(not mouse hover) to any color,and

     <mat-card-content>

color to any color permanently in angular. I have done changing the background color on mouse hover but i want it on click.

Krishna Rathore · Accepted Answer · 2018-08-07 06:13:02Z

3

use @HostListener

I have create a demo on Stackblitz

@HostListener('click') onMouseClick() {
    this.highlight(this.highlightColor || 'red');   
}

 private highlight(color: string) {
    this.el.nativeElement.style.backgroundColor = color;   
 }

answered Aug 7, 2018 at 6:13

Krishna Rathore

9,7375 gold badges28 silver badges50 bronze badges

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

1 Comment

PGH Over a year ago

what about text color i mean (<mat-card-content> ) color

Muhammed Albarmavi · Accepted Answer · 2018-08-07 07:41:42Z

directive is a good solution for this kind of thing and can be configurable like color for example and can be reusable on other component mean outside this component and you don't need to add extra logic inside current component.

import { Directive, HostBinding, Input,HostListener} from '@angular/core';
import { DomSanitizer, SafeStyle } from "@angular/platform-browser";

@Directive({
  selector: '[clickColor]'
})
export class ClickColorDirective {

  private toggle: boolean = false;
  @Input() color: string = 'red';

  constructor(private doms: DomSanitizer) { }

  @HostBinding('style') get myStyle(): SafeStyle {
    let style : string = this.toggle ? `background: ${this.color}` : '';
    return this.doms.bypassSecurityTrustStyle(style);
  }

  @HostListener('click') onClick() {
    this.toggle = !this.toggle;
  } 

}

template

<div clickColor>
  Hello World from Angular
</div>

<div clickColor color='blue'>
   Angular  World
</div>

<div clickColor [color]="'#000'">
 Batman !!!
</div>

stackblitz example

K. Ayoub · Accepted Answer · 2018-08-07 06:33:41Z

1

<mat-card [ngClass]="{'background-mad': x}" (click)="x = true">
<mat-card-content [ngClass]="{'color-mad': y}" (click)="y = true">

in the ts file

public x: boolean = false;
public y: boolean = false;

And in the css file add for example:

.background-mad {
    background-color: red
}
.color-mad {
    color: green
}

EDIT
html:

<span [style.color]="color" (click)="changeColor()">aaaa</span>

ts:

private list: any = [
    'red',' green', 'blue'
];
  public color: 'black';
  changeColor() {
    this.color1 = this.list[Math.floor(Math.random() * this.list.length)];
  }

edited Aug 7, 2018 at 6:33

answered Aug 7, 2018 at 6:14

K. Ayoub

4461 gold badge6 silver badges16 bronze badges

1 Comment

PGH Over a year ago

I m using this mat-card to display the json data(names),your code is working but its applying to all json data

Collectives™ on Stack Overflow

How to change div background color on click in angular 6

3 Answers 3

1 Comment

Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

1 Comment

Related