Using TemplateRef to open Modal

0

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">&times;</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.

    
asked by Findelias 07.03.2017 в 08:53
source

2 answers

1

You can use ng-bootstrap and easily, open / close popups and have control over the action carried out by the user.

  

link

The steps to install it are very simple, here's the doc:

  

link

EDITED

Here you have the modified plunk working. I suggest you change the name of the component and that you create your html and associated sass;)

link

    
answered by 07.03.2017 / 11:31
source
0

This information may be useful to you:

Angular 2/5 - Custom Modal Window / Dialog Box

    
answered by 04.12.2017 в 15:27