how to include ng-Bootsrap Modal in angular 4 application

Question

I'm trying to create a modal in angular 4 application.For this i'm using ng-bootstrap.

From the example given here i'm not able to open the modal.

My application is divided into various modules. The editModal is a module and editmodelComponent is a component under this module.

I want to open this editmodelComponent from another module component.

ediModalModule:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { EditModalComponent } from './edit-modal/edit-modal.component';

@NgModule({
  imports: [
    CommonModule
  ],
  declarations: [EditModalComponent],
  exports: [EditModalComponent]
})
export class EditModule { }

EditModal Component

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

@Component({
    selector: 'edit-modal',
    templateUrl: './edit-modal.component.html',
    styleUrls: ['./edit-modal.component.css']

})
export class EditModalComponent implements OnInit {


    constructor() { }

    ngOnInit() { }

    close() {

    }
}

Below is the component from which i'm trying to open the modal.

import { Component, OnInit } from '@angular/core';
import { UserService } from '../../modules/shared-service/service/user.service';
import { ManageComponentStatusService } from '../../modules/shared-service/service/manage-component-status.service';
import { ISlimScrollOptions } from 'ng2-slimscroll';

import { Router, ActivatedRoute, Params } from '@angular/router';
import { NgbModal, NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
import { EditModalComponent } from '...edit-modal/edit-blurb-modal.component'

declare var $: any;

@Component({
    selector: 'app-user',
    templateUrl: './user.component.html',
    styleUrls: ['./user.component.css']
})
export class UserComponent implements OnInit {  


    constructor(public userServ: UserService, public compStatus: ManageComponentStatusService,private modalService: NgbModal, private modal:EditModalComponent) {

        this._route = route;
    }

    ngOnInit() {


        $('#waterfall').NewWaterfall({
            width: 340,
            delay: 100,
        });

        this.compStatus.setComponentStatus(true, true, true);
        this.userServ.setUserProfile();
        this.compStatus.setPlainHeader(true);
        this.opts = {
            barBackground: '#C9C9C9',
            gridBackground: '#D9D9D9',
            barBorderRadius: '1',
            barWidth: '2',
            gridWidth: '1'
        };           

    }        

    edit(current: any) {
    const modalRef = this.modalService.open(EditModalComponent);
    }



}

on running this code i get the error

Error: No provider for EditModalComponent!

I'm not sure how to tell the modalService which template to load in the modal.

Please guide

Thanks

I Think The problem is you did't not add entryComponents for your component in module file do like this entryComponents: [ EditModalComponent ] in module.ts — Chandru

Chandru Chandru · Accepted Answer · 2017-09-26T10:45:17

Try like this :

In this below code will add NgbModule to imports and EditModalComponent inside entryComponents

ediModalModule:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { EditModalComponent } from './edit-modal/edit-modal.component';

@NgModule({
    imports: [
        CommonModule,
        NgbModule.forRoot()
    ],
    declarations: [EditModalComponent],
    entryComponents: [EditModalComponent],
    exports: [EditModalComponent]
})
export class EditModule { }

how to include ng-Bootsrap Modal in angular 4 application

1 Answers