Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

402
Views
Angular2 ng-bootstrap modal components

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 ...

about 4 years ago · Santiago Trujillo
3 answers
Answer question

0

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.

about 4 years ago · Santiago Trujillo Report

0

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

about 4 years ago · Santiago Trujillo Report

0

Add the HelloHomeModalComponent to your constructor parameters and call the open function from HomeComponent like so:

import { Component, OnInit } from '@angular/core';
import { HelloHomeModalComponent } from "hello-home-modal.component";

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

export class HomeComponent implements OnInit {
    constructor(private modal: HelloHomeModalComponent) {}

    ngOnInit() {
        this.modal.open();
    }
}

You don't need to pass a content parameter to your component's open() if you use @ViewRef() to get the appropriate template reference from the modal component.

about 4 years ago · Santiago Trujillo Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!