Good morning.
Currently I 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 erasing that a confirmation modal appears before and depending on the answer to continue or not with the API call that will erase the BD record.
I am looking for and I think that what I need is to open the modal through TemplateRef but I can not find anything that serves me or a source where they explain how to use it at least in the way I need it. Does anyone who has already had this problem have some documentation or similar that may be useful?
Greetings.
After helping me with the answer I am at this point:
HTML MODAL:
<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);
}
Still, I still do not open the modal when I click. Even that the rest of actions associated with the function (which I have omitted for greater clarity of the code) continue to work. I DO NOT have errors in console.