Ionic 4 : Hiding <div> after adding the new item

Ionic Framework ionic-v3
1

Hi, is it possible to make the text and button in

in home page disappear after i’m adding a new item in new-item page in ionic 4?
Capture
Capture.PNG384×598 9.37 KB

Capture2
Capture2.PNG382×558 8.46 KB

I want the text welcome, let’s get started and the button below disappear after user click the create button in the newchild page. Can someone help me with this? Here is the code :

home.html
<ion-header>
  <ion-toolbar>
    <ion-title>Dashboard</ion-title>
    <ion-buttons slot="end">
      <ion-button [routerLink]="['/addchild']">
        <ion-icon slot="icon-only" name="add"></ion-icon>
      </ion-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

<ion-content>
    <ion-item>
        <ion-label>Search</ion-label>
        <ionic-selectable item-content [(ngModel)]="port" itemValueField="id" itemTextField="name" [items]="ports" [canSearch]="true"
            (onChange)="portChange($event)">
          </ionic-selectable>
    </ion-item>

  <section class="ion-padding-top" text-center>
    <div><br><br><br><br><br><br><br><br><br>
    <h1 style="font-size:1.4em" ion-margin>Welcome, let's get started !</h1><br>
    <ion-button (click)="myAction()" fill="outline" color="secondary-shade" shape="round" class="my-action-button" routerLink="/addchild">Add your first child's profile</ion-button>
    </div>
  </section>
  </ion-content>

newchild.html

<ion-header>
  <ion-toolbar>
      <ion-buttons slot="start" defaultHref="/tabs/childdetails">
        <ion-back-button></ion-back-button>
      </ion-buttons>
    <ion-title>New Child</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content padding>
  <ion-list>
    <form [formGroup]="new_child_form" (submit)="createChild(new_child_form.value)">
        <ion-item>
          <ion-label position="floating">Child Name</ion-label>
          <ion-input type="text" formControlName="childname" required></ion-input>
        </ion-item>

        <ion-item>
            <ion-label position="floating">Display Name</ion-label>
            <ion-input type="text" formControlName="childnickname" required></ion-input>
        </ion-item>

        <ion-item>
          <ion-label>Gender</ion-label>
            <ion-select id="gender">
              <ion-select-option value="g">Girl</ion-select-option>
              <ion-select-option value="b">Boy</ion-select-option>
            </ion-select>
        </ion-item>

        <ion-item>
            <ion-label>Date</ion-label>
            <ion-datetime display-format="DD MMM YYYY"></ion-datetime>
        </ion-item>

        <ion-button class="submit-btn" expand="block" type="submit" [disabled]="!new_item_form.valid">Create</ion-button>
    </form>
  </ion-list>
</ion-content>
2

I would use *ngIf in home page for the parts you want to hide
and with @ViewChild() in newchild.ts to pass the boolean from newchild to home

3 
 <section class="ion-padding-top" text-center>
    <div *ngIf> // put it here ?
    <h1 style="font-size:1.4em" ion-margin>Welcome, let's get started !</h1><br>
    <ion-button (click)="myAction()" fill="outline" color="secondary-shade" shape="round" class="my-action-button" routerLink="/addchild">Add your first child's profile</ion-button>
    </div>
  </section>

Thank you for responding, but can you explain more, I don’t really understand how to apply it

4

*ngIf and @ViewChild() are Angular APIs,
it is not attributes of Ionic UI components

for example:
in home page html:

<div *ngIf="yourBoolean">
...
</div>

but remember in home page ts you need:

...
yourBoolean = true; /*viewable by default*/
...

and in the component/page that contains your button

...
@ViewChild(home.page.ts) home;
...
in_your_method() {
    this.home.yourBoolean = false;
}
...
1 Like