How to hide a div with a button?


#1

I’am trying to hide a div with a button, but unfortunately it doesn’t seem to work

Here’s html code:

<ion-content nopadding>
  <ion-list>

    <div *ngIf="DropdownVar === 2 || hideMe" class="dropdown-content">
        <button ion-button full (click)="hide()"> Cancelar</button>
        <ion-item>
            <ion-label color="primary" stacked>Nome</ion-label>
            <ion-input type="text" ></ion-input>
          </ion-item>
          <ion-item>
            <ion-label color="primary" stacked> Nif </ion-label>
            <ion-input type="number" ></ion-input>
          </ion-item>
      </div>
  </ion-list>
    <button ion-button full (click)="callAll(onSelect())">Inserir exequente</button>
</ion-content>

Here’s my typescript:

export class ExequentesPage {

  model = new Processos();
  DropdownVar = 0;
  x = 2;
  timesClicked = 0;
  hideMe = false;

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

  }


  ionViewDidLoad() {
    console.log('ionViewDidLoad ExequentesPage');

  }

  onSelect(x) {
    this.DropdownVar = x;
    console.log(x);
  }


  callAll() {

    this.timesClicked++;
    if (this.timesClicked % 2 == 0) {
      this.open();
    } else {
      this.onSelect(2);
    }


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


  open() {
    return console.log('Opened', 3);
  }

}

Could u give any tips on hiding a div, thanks in advance?!


#2

Hello,
ngif put an element in the dom or not. If not, then there is nothing you can hide.
Use [hidden]=‘hideMe’ to hide or show an element.

Best regards, anna-liebt