title: Angular2 - Run function from child component in parent component
body: <p>I'am working on ng2 RC6. I have parent component, and child component. </p>
  
  <p>Inside child component I got ng2-bootstrap modal, and start function:</p>
  
  <pre><code>import { Component, ViewChild, AfterViewInit, Input } from '@angular/core';
  import { ModalDirective } from 'ng2-bootstrap/ng2-bootstrap';
  
  @Component({
      selector: 'nba-form',
      templateUrl: './form.component.html'
  })
  
  
  export class FormComponent {
      public modal:boolean = false;
  
      @ViewChild('childModal') public childModal: ModalDirective;
      @ViewChild('lgModal') public lgModal: ModalDirective;
  
      public showChildModal(): void {
          this.childModal.show();
      }
  
      public hideChildModal(): void {
          this.childModal.hide();
      }
  
      ngAfterViewInit() {
          this.lgModal.show();
      }
  }
  </code></pre>
  
  <p>In parent component I want to run function "this.lgModal.show()", which is opening modal window.</p>
  
  <pre><code>{...}
  import { FormComponent } from './form.component';
  import 'rxjs/add/operator/toPromise';
  
  @Component({
      selector: 'nba',
      templateUrl: './nba.component.html',
      providers: [FormComponent]
  })
  export class NbaComponent implements OnInit {
  
      constructor(private appService: AppService, private formComponent: FormComponent) {}
  </code></pre>
  
  <p>But when I'am using: </p>
  
  <pre><code>ngOnInit() {
      this.formComponent.lgModal.show();
  }
  </code></pre>
  
  <p>I got ERR that <code>show();</code> is undefined</p>
  
  <p>And app.module.ts:</p>
  
  <pre><code>import { NgModule }      from '@angular/core';
  import { BrowserModule } from '@angular/platform-browser';
  import { FormsModule }   from '@angular/forms';
  import { HttpModule, JsonpModule }    from '@angular/http';
  
  import { ModalModule } from 'ng2-bootstrap/ng2-bootstrap';
  import { AlertModule, DatepickerModule } from 'ng2-bootstrap/ng2-bootstrap';
  
  // Imports for loading &amp; configuring the in-memory web api
  import { InMemoryWebApiModule } from 'angular2-in-memory-web-api';
  import { InMemoryData } from './in-memory-data';
  
  import { FormComponent } from './form.component';
  import { NbaComponent } from './nba.component';
  import { AppComponent }   from './app.component';
  import { AppService } from './app.service';
  import { routing } from './app.routing';
  
  @NgModule({
    imports: [
      BrowserModule,
      AlertModule,
      FormsModule,
      HttpModule,
      DatepickerModule,
      InMemoryWebApiModule.forRoot(InMemoryData),
      ModalModule,
      routing
    ],
    declarations: [AppComponent, NbaComponent, FormComponent],
    providers: [AppService],
    bootstrap: [AppComponent]
  })
  
  export class AppModule {
  
  }
  </code></pre>
  
  <p>PS. I can open modal from child component - this is work, but when I try do it from parent component, I have problem. Please for hint!:)</p>
  
  <p>Regards,
  Bosper</p>