Hiding div after clicking on a button

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 {

constructor(public navCtrl: NavController, public navParams: NavParams) {


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:


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


hide() {
  this.hideMe = true;

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


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

Check out this link too…