Angular2 ng-bootstrap modal components

Question

I have a modal component created with ng-bootstrap like follow (just a body):

<template #content let-c="close" let-d="dismiss">
    <div class="modal-body">
        <p>Modal body</p>
    </div>
</template>

And it's angular 2 component

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

@Component({
    selector: 'my-hello-home-modal',
    templateUrl: './hellohome.modal.html'
})

export class HelloHomeModalComponent {
    closeResult: string;

    constructor(private modal: NgbModal) {}

    open(content) {
        this.modal.open(content).result.then((result) => {
            this.closeResult = `Closed with: ${result}`;
        }, (reason) => {
            console.log(reason);
        });
    }
}

I really want to be able to call this modal from an other component in my web site. I just want call from my homeComponent the open method.

See my homeComponent

import { Component, OnInit } from '@angular/core';

@Component({
    selector: 'my-home',
    templateUrl: './home.component.html'
})

export class HomeComponent implements OnInit {
    constructor() {
    }

    ngOnInit() {
        console.log('Hello Home');

        /** want call modal popin here from the init component method in order to test the modal. **/

    }
}

Someone can explain me how to do that ? I came from angular 1.x and it was so much simpler ...

Answer 1

This is how I do it with Angular 5 and ng-bootstrap. Create your modal component as follows:

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

@Component({
  selector: 'sm-create-asset-modal',
  templateUrl: './create-asset-modal.component.html',
  styleUrls: ['./create-asset-modal.component.css']
})
export class CreateAssetModalComponent implements OnInit {

  constructor(public activeModal: NgbActiveModal) { }

  ngOnInit() {
  }
}

and the template will be something like:

<div class="modal-header">
  <h4 class="modal-title">Create New </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>One fine body&hellip;</p>
</div>
<div class="modal-footer">
  <button type="button" class="btn btn-success" (click)="activeModal.close('Close click')">Create</button>
</div>

In the component where you want to open the modal from add a variable of type NgbModal and call open as follows:

export class MyComponent {
  constructor(private modal: NgbModal) {}

  onClick() {
    this.modal.open(CreateAssetModalComponent);
  }

}

In the NgModule where the CreateAssetModalComponent is declared add the component in the entryComponents array as follows:

@NgModule({
  imports: [...],
  declarations: [CreateAssetModalComponent],
  entryComponents: [CreateAssetModalComponent]
})

Assuming you have other Modules like NgbModule imported this should work.

Answer 2

I'm not sure I fully understand what you are trying to do but in the essence it is very simple - to open a modal window with a specific content you just call the open method on the NgbModal service. The simplest possible implementation would be a one-liner (this.modalService.open('Hi tehre!');):

@Component({
  selector: 'my-home',
  templateUrl: 'src/modal-basic.html'
})
export class HomeComponent implements OnInit {
  constructor(private modalService: NgbModal) {}

  ngOnInit(content) {
    this.modalService.open('Hi tehre!');
  }
}

See it live in plunker: http://plnkr.co/edit/5qq04Q4HFLOe9tsyeMMI?p=preview

It is exactly the same as in angular-ui/bootstrap for AngularJS 1.x! Principles are exactly the same, nothing have changed.

What might be giving you headaches is how to specify content of the modal. In the above example I'm using a string but in vast majority of cases you want to use HTML with bindings, directives etc. But Angular is different as you just can't pass HTML string if you don't want to ship compiler to production (and you really don't want to do this...).

So your next best option is to use another component as content, here is a minimal example: http://plnkr.co/edit/EJyZ6nF5WVAS9bvQycQe?p=preview

Note: due to a bug in the Angular itself you need to currently wrap the open() method call with the setTimeout. Bug reference: https://github.com/angular/angular/issues/15634