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!
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
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!
hi @rtalexk .
can we hide and show the div with using animation? I am not getting any example for ionic 4.
somethingClicked: boolean = false;
hideOnSomethingClicked() {
this.somethingClicked= !this.somethingClicked;
}
include this on this on the tag you want to hide
[hidden]=“somethingClicked” or [hidden]="!somethingClicked">