Good.
I currently have a series of buttons that perform a series of actions. A CRUD system go. I want to add modal windows in some of them, for example when deleting, a confirmation modal appears before and depending on the response, continue or not with the API call that will delete the DB record.
I'm looking and I think what I need is to open the modal through TemplateRef but I can't find anything that works for me or a source that explains how to use it, at least in the way I need. Does anyone who has already had this problem have some documentation or similar that could help?
All the best.
After helping me from the answer I am at this point:
MODALHTML:
<div class="modal-header">
<h4 class="modal-title">Hi there!</h4>
<button type="button" class="close" aria-label="Close" (click)="activeModal.dismiss('Cross click')">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Hello, World!</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" (click)="activeModal.close('Close click')">Close</button>
Modal Component
import { Component } from '@angular/core';
import { NgbModal, ModalDismissReasons, NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
@Component({
selector: 'modal',
moduleId: module.id,
templateUrl: './modal.view.html'
})
export class ModalComponent {
constructor(private activeModal: NgbActiveModal){}
}
Component where I want to call the modal:
import { Component, Input, Output, EventEmitter, AfterViewInit, ViewChild } from '@angular/core';
import { NgbModal, ModalDismissReasons } from '@ng-bootstrap/ng-bootstrap';
import { ModalComponent } from '../modal/modal.component';
// Component decorator
@Component({
selector: 'test',
moduleId: module.id,
templateUrl: 'test.view.html',
})
// Component class
export class TestComponent {
// Constructor
constructor(
private modalService: NgbModal
){}
@ViewChild(ModalComponent)
private modalComponent: ModalComponent;
//Send to father component the copie selected.
showModal(): void {
this.modalService.open(this.modalComponent);
}
Even so, it still does not open the modal when I click. Even though the rest of the actions associated with the function (which I have omitted for clarity of the code) continue to work. I have NO errors in console.
You can
ng-bootstrap
easily use open/close popups and have control over the action performed by the user.The steps to install it are very simple, here is the doc:
EDITED
Here you have the modified plunk working. I suggest you change the component name and create its associated html and sass ;)
http://plnkr.co/edit/dF8p7V1jIikoiyRmBiJe?p=preview
I had the same problem and the solution is as follows: No need
and neither
and in
what is placed is the component you imported
Maybe this information can help you:
Angular 2/5 - Custom Modal Window / Dialog Box