NgbModal.open not working in Angular 4
11,310
Here is how I implemented in my application:
app.module.ts
@NgModule({
// ...
declarations: [
LoginComponent,
ModalComponent
],
imports: [
// ...
NgbModule.forRoot()
],
entryComponents: [ModalComponent], //Only Modal component included here
bootstrap: [AppComponent]
})
export class AppModule { }
Component from where I am opening the modal. LoginComponent in your case :
imports ....
import { ModalComponent} from '../Modal/Modal.component'; //My actual Modal component which includes HTML for modal
@Component({
selector: 'app-login',
templateUrl: './login.component.html',
styleUrls: ['./login.component.css']
})
export class LoginComponent {
@ViewChild('examplemodal')
private modalRef: TemplateRef<any>;
constructor(private modalService: NgbModal) { }
//.... some event that fires onModalRequest()
onModalRequest(): void {
const modalRef = this.modalService.open(ModalComponent); //Added Modal Component here
modalRef.componentInstance.src = link;//anything u wish to pass to modal component @Input
modalRef.result.then((result) => {
console.log(result);
console.log('closed');
}).catch( (result) => {
console.log(result);
console.log('cancelling');
});
}
}
Modal.component.ts:
import { Component, OnInit, Input } from '@angular/core';
import { NgbModal, NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
@Component({
selector: 'app-modal',
templateUrl: './modal.component.html',
styleUrls: ['./modal.component.scss']
})
export class ModalComponent implements OnInit {
@Input() src;
constructor(public activeModal: NgbActiveModal) { }
ngOnInit() {
}
}
Modal.component.html:
<div class="modal-header">
<button type="button" class="close" aria-label="Close" (click)="activeModal.dismiss('Cross click')">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
STUFF HERE
</div>
Here working Demo
PLEASE NOTE: You would need to install Bootstrap 4 for SCSS.
npm install bootstrap -D
and include its reference in your style.scss like :
@import "node_modules/bootstrap/scss/bootstrap";
Author by
Rafael Reyes
Updated on June 18, 2022Comments
-
Rafael Reyes almost 2 years
I want to display a message in a modal using angular 4.0.0 and ng-bootstrap 1.0.0-beta.4 but it does not display the modal.
app-module.ts
@NgModule({ // ... declarations: [ LoginComponent ], imports: [ // ... NgbModule.forRoot() ], entryComponents: [LoginComponent], }) export class AppModule { }
login.component.ts
@Component({ selector: 'app-login', templateUrl: './login.component.html', styleUrls: ['./login.component.css'] }) export class LoginComponent { @ViewChild('examplemodal') private modalRef: TemplateRef<any>; constructor(private modalService: NgbModal) { } //.... some event that fires onModalRequest() onModalRequest(): void { const modalRef = this.modalService.open(this.modalRef); //Not working modalRef.result.then((result) => { console.log(result); console.log('closed'); }).catch( (result) => { console.log(result); console.log('cancelling'); }); } }
examplemodal.html
<ng-template #examplemodal> <div class="modal"> stuff here... </div> </ng-template>
Any help please?