demo/src/app/components/+modal/demos/service-component/service-component.ts
import { Component, OnInit } from '@angular/core';
import { BsModalService } from 'ngx-bootstrap/modal';
import { BsModalRef } from 'ngx-bootstrap/modal/bs-modal-ref.service';
@Component({
selector: 'demo-modal-service-component',
templateUrl: './service-component.html'
})
export class DemoModalServiceFromComponent {
bsModalRef: BsModalRef;
constructor(private modalService: BsModalService) {}
openModalWithComponent() {
const initialState = {
list: [
'Open a modal with component',
'Pass your data',
'Do something else',
'...'
],
title: 'Modal with component'
};
this.bsModalRef = this.modalService.show(ModalContentComponent, {initialState});
this.bsModalRef.content.closeBtnName = 'Close';
}
}
/* This is a component which we pass in modal*/
@Component({
selector: 'modal-content',
template: `
<div class="modal-header">
<h4 class="modal-title pull-left">{{title}}</h4>
<button type="button" class="close pull-right" aria-label="Close" (click)="bsModalRef.hide()">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<ul *ngIf="list.length">
<li *ngFor="let item of list">{{item}}</li>
</ul>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" (click)="bsModalRef.hide()">{{closeBtnName}}</button>
</div>
`
})
export class ModalContentComponent implements OnInit {
title: string;
closeBtnName: string;
list: any[] = [];
constructor(public bsModalRef: BsModalRef) {}
ngOnInit() {
this.list.push('PROFIT!!!');
}
}