I'm currently working on ng2 RC6. I have a parent component and a child component.
Within the child component, I am utilizing an ng2-bootstrap modal and the following start function:
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();
}
}
In the parent component, I would like to call the function "this.lgModal.show()", which opens the modal window.
{...}
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) {}
However, when I use:
ngOnInit() {
this.formComponent.lgModal.show();
}
I receive an error stating that show(); is undefined.
Here is the snippet of code from app.module.ts:
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 & 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 {
}
PS. I am able to open the modal from the child component successfully, but encountering issues when trying to do so from the parent component. Any hints or solutions would be greatly appreciated! :)
Regards, Bosper