title: ionic 3 angular accessing viewchild into other pages
body: <p>I created a standard nav menu. my <code>home.html</code> has a slider component. this slider component can be navigated using few links that invoke the <code>goToSlide()</code> method exposed using </p>
  
  <pre><code>@ViewChild(Slides) slides: Slides;
  </code></pre>
  
  <p>As the side navigator menu is implemented and accessible via <code>app.component.ts</code> so how do i get access to slides component defined in <code>home.ts</code> ?</p>
  
  <p>hime.html</p>
  
  <pre><code>&lt;ion-header&gt;
    &lt;ion-navbar no-padding&gt; 
      &lt;button ion-button menuToggle&gt;
        &lt;ion-icon name="menu"&gt;&lt;/ion-icon&gt;
      &lt;/button&gt;
      &lt;ion-title style="background-color:#2298D3"&gt;
        &lt;ion-row&gt;&lt;ion-col text-left&gt;
        &lt;img (click)="goToSlide(0)" src="assets/images/white_logo_color_background.jpg" width="20%" /&gt;
        &lt;/ion-col&gt;
        &lt;ion-col text-right&gt;
         &lt;button ion-button clear (click)="goToSlide(1)" style="color:white"&gt;Services&lt;/button&gt;
         &lt;button ion-button clear (click)="goToSlide(2)" style="color:white"&gt;Contact Us&lt;/button&gt;
        &lt;/ion-col&gt;
        &lt;/ion-row&gt;
      &lt;/ion-title&gt;
    &lt;/ion-navbar&gt;
  &lt;/ion-header&gt;
  
  &lt;ion-content no-padding&gt;
   &lt;ion-slides direction="horizontal" speed="1000" slidesPerView="1" pager="true"&gt;
    &lt;ion-slide  class="home-intro" style="background-color:#2298D3;max-height:440px"&gt;
    &lt;/ion-slide&gt;
  
    &lt;ion-slide padding class="site-slide" &gt;
       &lt;ion-row&gt;
       &lt;ion-row&gt;
    &lt;/ion-slide&gt;
  &lt;/ion-slides&gt;
  &lt;/ion-content&gt;
  </code></pre>
  
  <p>home.ts</p>
  
  <pre><code>import { Component } from '@angular/core';
  import { NavController, Slides } from 'ionic-angular';
  import { ViewChild } from '@angular/core';
  import { FormBuilder, FormGroup, Validators } from '@angular/forms';
  
  import { SendEnquiryService } from '../../providers/send-enquiry.service'
  
  @Component({
    selector: 'page-home',
    templateUrl: 'home.html'
  })
  export class HomePage {
     @ViewChild(Slides) slides: Slides;
     slideTwoForm: FormGroup;
    constructor(public navCtrl: NavController,
                public formBuilder: FormBuilder,
                public enquiryService:SendEnquiryService) {
    }
  
    goToSlide(num){
      this.slides.slideTo(num, 500);
    }
  </code></pre>
  
  <p>}</p>
  
  <p>app.components.ts:</p>
  
  <pre><code>import { Component, ViewChild } from '@angular/core';
  import { Nav, Platform, Slides, Events } from 'ionic-angular';
  import { StatusBar } from '@ionic-native/status-bar';
  import { SplashScreen } from '@ionic-native/splash-screen';
  
  import { HomePage } from '../pages/home/home';
  @Component({
    templateUrl: 'app.html'
  })
  export class MyApp {
     rootPage:any = HomePage;
     @ViewChild(Nav) nav: Nav;
  
    constructor(platform: Platform, 
                statusBar: StatusBar, 
                splashScreen: SplashScreen,
                public events: Events) {
      platform.ready().then(() =&gt; {
        // Okay, so the platform is ready and our plugins are available.
        // Here you can do any higher level native things you might need.
        statusBar.styleDefault();
        splashScreen.hide();
        this.nav.setRoot(HomePage);
      });
    }
  
    goToSlide(index){
      this.changeCurrentSlide(index);
    }
  
    changeCurrentSlide(index) {
      this.events.publish('slider:slideTo', index);
    }
  }
  </code></pre>