CODEWITHSUNDEEP
angularmodulepackageng-bootstrap
leri
leri

Reputation: 321

ng-bootstrap: NullInjectorError: No provider for NgbModalRef issue

I'm trying to add the NgbModalRef class to my component but I don't know why it refuses to ineject it. I have Angular 10.2.1, bootstrap 4.5.3 and ng-bootstrap 8.0.4, I added the NgbModule in the app.module file and imported the class like this :

modal.ts

import { NgbModal, NgbModalRef } from '@ng-bootstrap/ng-bootstrap';

 constructor(private modalService: NgbModal, private modalRefService: NgbModalRef){}

HTML in the modal

<button (click)="modalRefService.close()">Close</button>

I tried to make a function then call the class but same result.

When I try to open my modal I get :

ERROR NullInjectorError: R3InjectorError(AppModule)[NgbModalRef -> NgbModalRef -> NgbModalRef]:    NullInjectorError: No provider for NgbModalRef!

app.module.ts

@NgModule({
  declarations: [
    AppComponent,
    ModalComponent
  ],
      imports: [
        BrowserModule,
        AppRoutingModule,
        HttpClientModule,
        FormsModule,
        NgbModule
      ],

Upvotes: 0

Views: 10411

Answers (2)

leri
leri

Reputation: 321

I found a solution, I removed NgbModalRef and added NgbActiveModal in the dependecies

 constructor(
    private modalService: NgbModal, private activeModalService: NgbActiveModal ) 
 {}

Then I moved the function to the TS file

 closeModal() {
    this.activeModalService.close();
  }

Upvotes: 2

Gustavo
Gustavo

Reputation: 1

Is the component declare in the app.module? If not you must import the NgbModalRef in the module where this component is declare.

Upvotes: 0

Related Questions