# Move from getComponent('nav') to @ViewChild

**URL:** <https://forum.ionicframework.com/t/move-from-getcomponent-nav-to-viewchild/59809>\
**Category:** ionic-v3\
**Created:** [August 7, 2016, 11:22pm UTC](https://forum.ionicframework.com/t/move-from-getcomponent-nav-to-viewchild/59809 "2016-08-07T23:22:14Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![icarus\_31](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/icarus_31/32/94713_2.png) [@icarus\_31](https://forum.ionicframework.com/u/icarus_31)\
**Post date:** [August 7, 2016, 11:22pm UTC](https://forum.ionicframework.com/t/move-from-getcomponent-nav-to-viewchild/59809/1 "2016-08-07T23:22:14Z")

</div>

Hi,

I still did not find a solution with my issue when the getComponent support disappeared to be replaced by @ViewChild. The issue is my ‘this.nav’ is undefined.

Hope someone will figure out what is going wrong with my code. Thanks in advance

dashboard.ts

```
  menuSelected(menu) {      
    this._nav.push(menu.page, {
       unitsList: unitsList <-- this will call a new view, here, units.ts
    });   
  }

```

units.ts

```
  constructor() {
    this._unitsList = navParams.get('unitsList');
  }

```

units.html

```
<ion-header>
  <ion-navbar>
    ...
  </ion-navbar>
<ion-header>
  
<ion-content>      
  <units-list [unitsList]="_unitsList"></units-list>
</ion-content>

```

units-list.component.ts

```
import { IONIC_DIRECTIVES, Nav, LoadingController } from 'ionic-angular';
import { Component, Input, ViewChild } from '@angular/core';
import { UnitTabsPage } from '../unit/unit-tabs';

@Component({
  selector: 'units-list',
  templateUrl: 'build/pages/components/units-list.component.html',
  directives: [IONIC_DIRECTIVES]
})

export class UnitsListComponent {
  @Input() unitsList: IUnitInfo[];

  @ViewChild(Nav) nav: Nav; **<-- not sure about this line**
  
  constructor() {
    ...
  }
  
  unitSelected (event, unit: IUnitInfo) {
    
    // Need to grab the parent nav in order to push outside
    //let nav = this._app.getComponent('nav');

    this.nav.push(UnitTabsPage); <-- this.nav is undefined!
  }    
}
```

---

<div class="post-metadata">

**Author:** ![mkuklis](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/mkuklis/32/102223_2.png) [@mkuklis](https://forum.ionicframework.com/u/mkuklis)\
**Post date:** [August 8, 2016, 12:51am UTC](https://forum.ionicframework.com/t/move-from-getcomponent-nav-to-viewchild/59809/2 "2016-08-08T00:51:21Z")

</div>

Please try to change your component `units-list.component.ts` to:

```
import { IONIC_DIRECTIVES, NavController, LoadingController } from 'ionic-angular';
import { Component, Input, ViewChild } from '@angular/core';
import { UnitTabsPage } from '../unit/unit-tabs';

@Component({
  selector: 'units-list',
  templateUrl: 'build/pages/components/units-list.component.html',
  directives: [IONIC_DIRECTIVES]
})

export class UnitsListComponent {
  @Input() unitsList: IUnitInfo[];
  constructor(private nav: NavController) {
    ...
  }
  
  unitSelected (event, unit: IUnitInfo) {
    this.nav.push(UnitTabsPage); 
  }    
}

```

and things should work again.

---

<div class="post-metadata">

**Author:** ![icarus\_31](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/icarus_31/32/94713_2.png) [@icarus\_31](https://forum.ionicframework.com/u/icarus_31)\
**Post date:** [August 8, 2016, 1:01am UTC](https://forum.ionicframework.com/t/move-from-getcomponent-nav-to-viewchild/59809/3 "2016-08-08T01:01:36Z")

</div>

It was too simple!!! Thanks! 🙂