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 @@
Content Page
+
+ ngIf Page
+
Show/Hide When Page
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: `
+
+
+
+ ngIf
+
+
+
+ Value should stay the same after ngIf removes the component from the DOM then adds it back in.
+
+
+ Value: {{value}}
+
+
+
+
+
+
+
+
+
+
+
+ ngIf {{ show ? 'hide' : 'show'}}
+
+
+ `
+})
+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 { }