CODEWITHSUNDEEP
angularionic-framework
AbhiRam
AbhiRam

Reputation: 2061

How to hide ionic tags in angular

Sorry if this is a basic question but I can't seem to figure it out.

Basically, I want to hide/show ionic tags when i tapped on button,I tried my level best to find solution to my problem but no result can some one help me please

note.html:-

<ion-content padding>
  <div>
      <h1>No contacts available...</h1>
  </div>
<ion-content>

notes.ts:

export class NotesPage {
  constructor(public navCtrl: NavController, public navParams: NavParams) {

  }

hideContent(){

**I want hide that ionic tag when i call this method** 

}

Upvotes: 0

Views: 487

Answers (1)

Christian Benseler
Christian Benseler

Reputation: 8065

Use a flag property in the component

showContent = true;

hideContent(){
  this.showContent = false;
}

And then use *ngIf

<ion-content padding *ngIf="showContent">
  <div>
      <h1>No contacts available...</h1>
  </div>
<ion-content>

You can also use the hidden property from html

<ion-content padding [hidden]="!showContent">
  <div>
      <h1>No contacts available...</h1>
  </div>
<ion-content>

Read here to know about the differences between the 2 approaches. Note that you can use these to hide/show any element in the template, not only 'ionic tag'.

Upvotes: 1

Related Questions