Hide image from a button

Asked

Viewed 247 times

1

I have an ngfor of buttons with certain images, but I want that image to appear initially with the black color and only when clicking on the image appears the image. What would my class look like 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>
javascript html css ionic

  • ng-show or ng-toggle would not help you?

  • Wouldn’t it be the idea to press all the buttons with that image and hide the image from the button, you know? and at some point I’ll make her appear again so it wouldn’t be to withdraw but to hide.

1 answer

1


IONIC 2:

Puts 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>

makes the imports:

import {ElementRef, Renderer2, ViewChild, AfterViewInit} from '@angular/core';
@ViewChild('minha_imagem') elem:ElementRef;

in the constructor: 

private rd: Renderer2

in the function:

mostrarImagem(img): void {
// dentro fica assim:
  this.rd.addClass(this.elem.nativeElement, "mostra_imagem"); // adiciona a classe
}
  1. PLUNKER
  2. SOURCE

Browser other questions tagged javascript html css ionic

You are not signed in. Login or sign up in order to post.