Hiding div after clicking on a button


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


#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!