From 0793d2bf5e447578c31f17ff14805c153441544d Mon Sep 17 00:00:00 2001
From: Adam Bradley <adambradley25@gmail.com>
Date: Sat, 31 Mar 2018 20:37:50 -0500
Subject: [PATCH] test(ngIf): add angular ngIf test

---
 .../test/nav/src/app/app-routing.module.ts    |  1 +
 .../app/home-page/home-page.component.html    |  3 ++
 .../nav/src/app/ng-if/ng-if-page.component.ts | 42 +++++++++++++++++++
 .../nav/src/app/ng-if/ng-if-routing.module.ts | 14 +++++++
 .../test/nav/src/app/ng-if/ng-if.module.ts    | 18 ++++++++
 5 files changed, 78 insertions(+)
 create mode 100644 angular/test/nav/src/app/ng-if/ng-if-page.component.ts
 create mode 100644 angular/test/nav/src/app/ng-if/ng-if-routing.module.ts
 create mode 100644 angular/test/nav/src/app/ng-if/ng-if.module.ts

diff --git a/angular/test/nav/src/app/app-routing.module.ts b/angular/test/nav/src/app/app-routing.module.ts
index b327720b9a..38e7de49d2 100644
--- a/angular/test/nav/src/app/app-routing.module.ts
+++ b/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' },
diff --git a/angular/test/nav/src/app/home-page/home-page.component.html b/angular/test/nav/src/app/home-page/home-page.component.html
index 7a394299eb..973fc8d30e 100644
--- a/angular/test/nav/src/app/home-page/home-page.component.html
+++ b/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>
diff --git a/angular/test/nav/src/app/ng-if/ng-if-page.component.ts b/angular/test/nav/src/app/ng-if/ng-if-page.component.ts
new file mode 100644
index 0000000000..ec6bf90637
--- /dev/null
+++ b/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;
+  }
+
+}
diff --git a/angular/test/nav/src/app/ng-if/ng-if-routing.module.ts b/angular/test/nav/src/app/ng-if/ng-if-routing.module.ts
new file mode 100644
index 0000000000..3327111d6a
--- /dev/null
+++ b/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 { }
diff --git a/angular/test/nav/src/app/ng-if/ng-if.module.ts b/angular/test/nav/src/app/ng-if/ng-if.module.ts
new file mode 100644
index 0000000000..2a0624b818
--- /dev/null
+++ b/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 { }