Hiding div after clicking on a button

Ionic Framework ionic-v3
1

Hi, I am new to this forum and also to Ionic 3.
I am struggling with following problem and I hope someone can help me:
I want to hide a div on my html page after clicking on a button. In another post I have read that this should work with ng-hide but for some reason this does not work for me.

My html looks like following

Hideme: {{hideMe}}

Hide this

<button ion-button large (click)=“hide()”>Hide List

On the corresponging .ts file of the page the code looks like this:

export class MyPage {
myValue:Boolean=false;

hideMe=false;
constructor(public navCtrl: NavController, public navParams: NavParams) {
}

hide(){
this.hideMe=true;
}
}

If I click the button this.hideme becomes true, the variable value changes also on the html page but the div still stays visible. Am I missing something or what is the proper way to do this?

I hope that someone can help me! Thanks a lot!

2

You can format your code putting it inside
```
// Here your code
```

To answer you, I don’t understand your HTML, but something like this do the trick:

HTML

<button ion-button (click)="hide()">Hide Div</button>
<div *ngIf="hideMe"> here your content</div>

TS

hide() {
  this.hideMe = true;
}

You should look up differences between hide elements with *ngIf, [hidden] and style="display: none;"

9 Likes
3

Thank you very much for your answerand your advices! The tags were automatically stripped and unfortunatelly I did not realize this.
Your code works perfect for me, thanks a lot!

4

hi @rtalexk .
can we hide and show the div with using animation? I am not getting any example for ionic 4.

5

somethingClicked: boolean = false;

hideOnSomethingClicked() {
this.somethingClicked= !this.somethingClicked;
}

include this on this on the tag you want to hide

[hidden]=“somethingClicked” or [hidden]="!somethingClicked">

6

Check out this link too…

https://stackoverflow.com/questions/59257176/how-do-i-show-and-hide-details-on-a-single-item-on-click