How to show a bootstrap modal popup in angular 5 when clicking a button in different component...

I have two component , in one component i have a button and in other component i have a popup which is bootstrap modal popup. i need to popup this modal popup and bind a data in that popup when click on this button. can you guys show me a example or sample project how to show popup and data transfer between two components.

<div id="parentdiv">
<button type="button" class="btn btn-info btn-sm" data-toggle="modal" data-target="#myModal" (click)="submit()">Submit</button>
<popup></popup>
</div>

ngOnInit(){
this.commservice.attachSubscribers(['popupevent']);
this.commservice.getSubscriber('popupevent').subscribe((data) => {
this.rolesList = data;
const modalRef = this.modalservice.open(guidanceComponent);
modalRef.componentInstance.data = this.rolesList;
})
}

Continue reading...