I have a ngfor of buttons with certain images, but I want that initially these images appear with black color and only when clicking the image the image appears. How would my class show_image in css?
<ion-content>
<ion-grid>
<ion-row>
<ion-col col-4 *ngFor="let img of array.image" >
<button id="botao" (click)="mostraImagem(img)">
<img src="{{img}}" class="mostra_imagem">
</button>
</ion-col>
</ion-row>
</ion-grid>
</ion-content>
IONIC 2:
Place an ID on the image:
<ion-content>
<ion-grid>
<ion-row>
<ion-col col-4 *ngFor="let img of array.image" >
<button id="botao" (click)="mostraImagem(img)">
<img src="{{img}}" class="mostra_imagem" #minha_imagem>
</button>
</ion-col>
</ion-row>
</ion-grid>
</ion-content>
imports:
import {ElementRef, Renderer2, ViewChild, AfterViewInit} from '@angular/core';
@ViewChild('minha_imagem') elem:ElementRef;
No constructor:
private rd: Renderer2
In function:
mostrarImagem(img): void {
// dentro fica assim:
this.rd.addClass(this.elem.nativeElement, "mostra_imagem"); // adiciona a classe
}