Merge branch 'master' of github.com:ionic-team/ionic

angular/test/nav/src/app/app-routing.module.ts

@@ -16,6 +16,7 @@ const routes: Routes = [
   { path: 'toast', loadChildren: './toast/toast.module#ToastModule' },
   { path: 'loading', loadChildren: './loading/loading.module#LoadingModule' },
   { path: 'modal', loadChildren: './modal/modal.module#ModalModule' },
+  { path: 'ng-if', loadChildren: './ng-if/ng-if.module#NgIfModule' },
   { path: 'popover', loadChildren: './popover/popover.module#PopoverModule' },
   { path: 'segment', loadChildren: './segment/segment.module#SegmentModule' },
   { path: 'virtual-scroll', loadChildren: './virtual-scroll/virtual-scroll.module#VirtualScrollModule' },

angular/test/nav/src/app/home-page/home-page.component.html

@@ -94,6 +94,9 @@
   <li>
     <a [routerLink]="['/content']">Content Page</a>
   </li>
+  <li>
+    <a [routerLink]="['/ng-if']">ngIf Page</a>
+  </li>
   <li>
     <a [routerLink]="['/show-hide-when']">Show/Hide When Page</a>
   </li>

angular/test/nav/src/app/ng-if/ng-if-page.component.ts

@@ -0,0 +1,42 @@
+import { Component, ViewChild } from '@angular/core';
+
+@Component({
+  selector: 'ng-if-page',
+  template: `
+  <ion-app>
+    <ion-header>
+      <ion-toolbar>
+        <ion-title>ngIf</ion-title>
+      </ion-toolbar>
+    </ion-header>
+    <ion-content>
+      <p padding>Value should stay the same after ngIf removes the component from the DOM then adds it back in.</p>
+      <ion-list>
+        <ion-item>
+          <ion-label>Value: {{value}}</ion-label>
+        </ion-item>
+        <ion-item *ngIf="show">
+          <ion-input value="{{value}}"></ion-input>
+        </ion-item>
+        <ion-item *ngIf="show">
+          <ion-input [value]="value"></ion-input>
+        </ion-item>
+        <ion-item *ngIf="show">
+          <ion-input [(ngModel)]="value"></ion-input>
+        </ion-item>
+      </ion-list>
+      <ion-button (click)="toggle()">ngIf {{ show ? 'hide' : 'show'}}</ion-button>
+    </ion-content>
+  </ion-app>
+  `
+})
+export class NgIfPageComponent {
+
+  value = Math.round(Math.random() * 10000000);
+  show = true;
+
+  toggle() {
+    this.show = !this.show;
+  }
+
+}

angular/test/nav/src/app/ng-if/ng-if-routing.module.ts

@@ -0,0 +1,14 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { NgIfPageComponent } from './ng-if-page.component';
+
+const routes: Routes = [
+  { path: '', component: NgIfPageComponent }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class NgIfRoutingModule { }

angular/test/nav/src/app/ng-if/ng-if.module.ts

@@ -0,0 +1,18 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+
+import { IonicModule } from '@ionic/angular';
+import { NgIfPageComponent } from './ng-if-page.component';
+import { NgIfRoutingModule } from './ng-if-routing.module';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    NgIfRoutingModule,
+    IonicModule
+  ],
+  declarations: [NgIfPageComponent]
+})
+export class NgIfModule { }