{"action":"created","issue":{"url":"https://api.github.com/repos/valor-software/ng2-bootstrap/issues/624","repository_url":"https://api.github.com/repos/valor-software/ng2-bootstrap","labels_url":"https://api.github.com/repos/valor-software/ng2-bootstrap/issues/624/labels{/name}","comments_url":"https://api.github.com/repos/valor-software/ng2-bootstrap/issues/624/comments","events_url":"https://api.github.com/repos/valor-software/ng2-bootstrap/issues/624/events","html_url":"https://github.com/valor-software/ng2-bootstrap/issues/624","id":160952079,"number":624,"title":"how to call modal from parent component,","user":{"login":"xinrui-ma","id":15201198,"avatar_url":"https://avatars.githubusercontent.com/u/15201198?v=3","gravatar_id":"","url":"https://api.github.com/users/xinrui-ma","html_url":"https://github.com/xinrui-ma","followers_url":"https://api.github.com/users/xinrui-ma/followers","following_url":"https://api.github.com/users/xinrui-ma/following{/other_user}","gists_url":"https://api.github.com/users/xinrui-ma/gists{/gist_id}","starred_url":"https://api.github.com/users/xinrui-ma/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/xinrui-ma/subscriptions","organizations_url":"https://api.github.com/users/xinrui-ma/orgs","repos_url":"https://api.github.com/users/xinrui-ma/repos","events_url":"https://api.github.com/users/xinrui-ma/events{/privacy}","received_events_url":"https://api.github.com/users/xinrui-ma/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":5,"created_at":"2016-06-17T18:49:52Z","updated_at":"2016-06-18T20:33:33Z","closed_at":null,"body":"I am using [ng2-bootstrap][1] for the modal stuff.\r\n\r\nI am trying to separate my modals and my other components apart. So I have the following files:\r\n\r\n***addPlaylist.modal.ts***\r\n\r\n    import {Component} from '@angular/core';\r\n    import {CORE_DIRECTIVES} from '@angular/common';\r\n    \r\n    \r\n    import {MODAL_DIRECTVES, BS_VIEW_PROVIDERS} from 'ng2-bootstrap/ng2-bootstrap';\r\n    \r\n    @Component({\r\n      selector: 'addplaylist-modal',\r\n      directives: [MODAL_DIRECTVES, CORE_DIRECTIVES],\r\n      viewProviders: [BS_VIEW_PROVIDERS],\r\n      templateUrl: 'app/channel/modals/addPlaylistModal.html'\r\n    })\r\n    \r\n    export class AddPlaylistModalComponent {\r\n      constructor() {\r\n        console.log(this);\r\n      }\r\n    }\r\n\r\n***addPlaylistModal.html***\r\n\r\n    <div bsModal #lgModal=\"bs-modal\" class=\"modal fade\" tabindex=\"-1\" role=\"dialog\" aria-labelledby=\"myLargeModalLabel\" aria-hidden=\"true\">\r\n      <div class=\"modal-dialog modal-lg\">\r\n        <div class=\"modal-content\">\r\n          <div class=\"modal-header\">\r\n            <button type=\"button\" class=\"close\" (click)=\"lgModal.hide()\" aria-label=\"Close\">\r\n              <span aria-hidden=\"true\">&times;</span>\r\n            </button>\r\n            <h4 class=\"modal-title\">Large modal</h4>\r\n          </div>\r\n          <div class=\"modal-body\">\r\n            ...\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\nIn it's parent component's html I have code piece like this:\r\n\r\n      <a (click)=\"lgModal.show()\"><span class=\"bigplus pull-right\"></span></a>\r\n       //some other code\r\n      <addplaylist-modal></addplaylist-modal>\r\n\r\nThis is the parent component: \r\n***channel.component.ts***\r\n\r\n    import { AddPlaylistModalComponent } from './shared/addPlaylist.modal';\r\n    \r\n    @Component({\r\n      selector: 'channel',\r\n      styleUrls: ['app/channel/channel.css'],\r\n      directives: [PlatformsComponent, PagesComponent, PlaylistComponent, VideosComponent, AddPlaylistModalComponent],\r\n      providers: [PlatformService],\r\n      templateUrl: 'app/channel/channel.html'\r\n    })\r\n\r\nWhat I want to do, I want to be able to let the parent componet to access it and open the modal even if I write the (click)=\"lgModal.show()\" at parent component.\r\n\r\nNow if I click the   `<a (click)=\"lgModal.show()\"><span class=\"bigplus pull-right\"></span></a>` , it will say “ can not read property show of undefined\"\r\n\r\nSo, how to let the parent component know that the lgModal is defined and it's in its child component.\r\n  [1]: http://valor-software.com/ng2-bootstrap/#/modals\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n"},"comment":{"url":"https://api.github.com/repos/valor-software/ng2-bootstrap/issues/comments/226963441","html_url":"https://github.com/valor-software/ng2-bootstrap/issues/624#issuecomment-226963441","issue_url":"https://api.github.com/repos/valor-software/ng2-bootstrap/issues/624","id":226963441,"user":{"login":"thohoh","id":7307645,"avatar_url":"https://avatars.githubusercontent.com/u/7307645?v=3","gravatar_id":"","url":"https://api.github.com/users/thohoh","html_url":"https://github.com/thohoh","followers_url":"https://api.github.com/users/thohoh/followers","following_url":"https://api.github.com/users/thohoh/following{/other_user}","gists_url":"https://api.github.com/users/thohoh/gists{/gist_id}","starred_url":"https://api.github.com/users/thohoh/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/thohoh/subscriptions","organizations_url":"https://api.github.com/users/thohoh/orgs","repos_url":"https://api.github.com/users/thohoh/repos","events_url":"https://api.github.com/users/thohoh/events{/privacy}","received_events_url":"https://api.github.com/users/thohoh/received_events","type":"User","site_admin":false},"created_at":"2016-06-18T20:33:33Z","updated_at":"2016-06-18T20:33:33Z","body":"@xinrui-ma Hey, did you solve that lint issue ?"}}
{"actor":{"display_login":"thohoh"}}