I am currently utilizing ng2-bootstrap for handling modal functionality.
To organize my modals and components separately, I have created the following files:
addPlaylist.modal.ts
import {Component} from '@angular/core';
import {CORE_DIRECTIVES} from '@angular/common';
import {MODAL_DIRECTVES, BS_VIEW_PROVIDERS} from 'ng2-bootstrap/ng2-bootstrap';
@Component({
selector: 'addplaylist-modal',
directives: [MODAL_DIRECTVES, CORE_DIRECTIVES],
viewProviders: [BS_VIEW_PROVIDERS],
templateUrl: 'app/channel/modals/addPlaylistModal.html'
})
export class AddPlaylistModalComponent {
constructor() {
console.log(this);
}
}
addPlaylistModal.html
<div bsModal #lgModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" (click)="lgModal.hide()" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title">Large modal</h4>
</div>
<div class="modal-body">
...
</div>
</div>
</div>
</div>
In the parent component's HTML file, there is a snippet like this:
<a (click)="lgModal.show()"><span class="bigplus pull-right"></span></a>
//some other code
<addplaylist-modal></addplaylist-modal>
This is the parent component: channel.component.ts
import { AddPlaylistModalComponent } from './shared/addPlaylist.modal';
@Component({
selector: 'channel',
styleUrls: ['app/channel/channel.css'],
directives: [PlatformsComponent, PagesComponent, PlaylistComponent, VideosComponent, AddPlaylistModalComponent],
providers: [PlatformService],
templateUrl: 'app/channel/channel.html'
})
The goal is to allow the parent component to access and open the modal even if using (click)="lgModal.show()" in the parent component.
However, clicking on
<a (click)="lgModal.show()"><span class="bigplus pull-right"></span></a>To resolve this, how can we inform the parent component that lgModal is defined within its child component?