Angular 7, ng-bootstrap rendering modal template

Question

I have been researching this for a few days and I still haven't been able to resolve this issue. I want to be able to open up a modal based upon the selection of the dropdown menu. I am trying to use the modal service from NgbModal library. Using the example from the documentation. When I place the modal button inside of a dropdown it not catching the event. So I made a conditional statement based upon what the user selects in the dropdown menu. The problem is, I do not know how to pass the modal content in properly. In the example they used a thumbnail with a ng-template and pass the content when the modal button is clicked. Since this button is now an option in a select component. When I select the right dropdown option the screen goes dark, but no modal appears because the content is not defined any help would be greatly appreciated.

import {component, OnInit, Input} from '@angular/core'
import { NgbModalConfig, NgbModal, NgbActiveModal} from 'ng-bootstrap/ng-bootstrap'

@Component({
  selector: 'app-nav',
  templateUrl: './nav.component.html',
  styleUrls: ['./nav.component.css']
})

export class NavComponent implements OnInit {
  @Input('event') event: any;

  constructor(public modalService: NgbModal){
    this.fileMenu = [];
  };

  changeMenu(e) {
    if (e.target.value === 'Launch Demo Modal'){
      this.modalService.open(content)
    }
  }

}

HTML

<nav class="navbar navbar-expand navbar-dark">
    <select class= "nav-drop (change)= "changeMenu($event)">
     <option> File </option>
     <option> Launch Demo Modal </option>
    </select>
  </nav>

kushal shah kushal shah · Accepted Answer · 2020-01-27T15:32:25

I have made some changes according to your requirements just follow below code

first created NgbdModalContent component file

import {Component, Input} from '@angular/core';
import {NgbModal, NgbActiveModal} from '@ng-bootstrap/ng-bootstrap';

@Component({
  selector: 'ngbd-modal-content',
  template: `
    <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, {{name}}!</p>
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-outline-dark" (click)="activeModal.close('Close click')">Close</button>
    </div>
  `
})
export class NgbdModalContent {
  @Input() name;

  constructor(public activeModal: NgbActiveModal) {}
}

and than call it from my below main component as per your req...

Component name is NgbdModalComponent

import { Component, Input } from "@angular/core";
import { NgbModal, NgbActiveModal } from "@ng-bootstrap/ng-bootstrap";
import { NgbdModalContent } from "./modal-content";

@Component({
  selector: "ngbd-modal-component",
  templateUrl: "./modal-component.html"
})
export class NgbdModalComponent {
  constructor(private modalService: NgbModal) {}

  changeMenu(e) {
    if (e.target.value === "Launch Demo Modal") {
      const modalRef = this.modalService.open(NgbdModalContent);
      modalRef.componentInstance.name = e.target.value;
    }
  }
}

here is the html

<select class= "nav-drop" (change)= "changeMenu($event)">
     <option> File </option>
     <option> Launch Demo Modal </option>
</select>

I hope above code will help you

let me know if you have any issue or query

thanks

Angular 7, ng-bootstrap rendering modal template

1 Answers