Reputation: 59
I'm writing an App in Ionic 3, where I want to show pictures which are hidden with the
document.getElementById("ImgID").style.display = "none";
Attribute. Therefore I took a button which will change the Attribute to
document.getElementById("ImgID").style.display = "";
My .ts
file:
button_tapped(){
document.getElementById("ImgID1").style.display = "";
document.getElementById("ImgID2").style.display = "";
document.getElementById("ImgID3").style.display = "";
}
My .html file for the button:
<ion-img
class = "button_img_1"
(click)="button_tapped()"
src="path_to_image">
</ion-img>
My .html
file for the Image:
<ion-img
class = "Image_1"
id = "Image_1"
src="path_to_image">
</ion-img>
my .css
for the image:
.Image_1{
width: 10%;
height: 0;
position: absolute;
padding-bottom: 3%;
top: 65%;
left: 20%;
}
So, if I start the app with not showing the picture, and press the button, the images wont show up, just a grey square at their position. But if I implement another button for hiding the image, start the app showing the pictures, press the button to hide them, and press the "show"-button, they appear like they should.
Does anyone know where my problem is?
Upvotes: 0
Views: 989
Reputation: 574
IONIC uses Angular. So you can also use *ngIf to show/hide the image(s) on tap. You put the *ngIf on the image(s).
Upvotes: 2