Adding a Popup Window with Angular TypeScript

Question

Basically, I would like for a Popup window to appear when I click on this button:

 <a (click)="open()" class='btn btn-primary m-r-5px'>
 <span class='glyphicon glyphicon-eye-open'></span> View
 </a>

To do this, I used the following example.

Here's how I applied the example to my app:

This is my popup HTML code:

<div class="modal-header">
<h4 class="modal-title">Challenge Details</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">
    <!-- HTML table for displaying a challenge details -->
    <table class='table table-hover table-responsive table-bordered'>

        <tr>
            <td class="w-40-pct">Name</td>
            <td>{{challenge?.name}}</td>
        </tr>

        <tr>
            <td>Duration</td>
            <td>&#36;{{challenge?.duration}}</td>
        </tr>

        <tr>
            <td>Description</td>
            <td>{{challenge?.description}}</td>
        </tr>

        <tr>
            <td>Quiz</td>
            <td>{{challenge?.Quiz.title}}</td>
        </tr>

    </table>
</div>
    <div class="modal-footer">
  <button type="button" class="btn btn-outline-dark" (click)="activeModal.close('Close click')">Close</button>
</div>

Here's it's typescript file view-one-challenge.component.ts:

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

@Component({
  selector: 'app-view-one-challenge',
  templateUrl: './view-one-challenge.component.html',
  styleUrls: ['./view-one-challenge.component.css']
})
export class ViewOneChallengeComponent implements OnInit {
  @Input() name;
  @Input() duration;
  @Input() description;
  @Input() title;
  constructor(public activeModal: NgbActiveModal) { }

  ngOnInit() {
  }

}

And here's the typescript file of the component where I want the popup to appear chalist.component.ts:

import {Component, OnInit, Output, EventEmitter, NgModule} from '@angular/core';
import {Challenge} from '../../_models/challenge';
import { Quiz } from '../../_models/quiz';
import {User} from '../../_models/user';
import {ChallengeService} from '../../_services/challenge.service';
import {BrowserModule} from '@angular/platform-browser';
import {CommonModule, Location} from '@angular/common';
import {AlertService} from '../../_services';
import { QuizService } from '../../_services/quiz.service';
import { ViewOneChallengeComponent } from '../view-one-challenge/view-one-challenge.component';
import {FormGroup, FormBuilder, Validators} from '@angular/forms';
import {ActivatedRoute, Params, Router} from '@angular/router';
import { NgbModal, NgbModule } from '@ng-bootstrap/ng-bootstrap';


@Component({
  selector: 'app-chalist',
  templateUrl: './chalist.component.html',
  styleUrls: ['./chalist.component.css'],
  providers: [ChallengeService, QuizService],

})

  @NgModule({
  entryComponents: [ViewOneChallengeComponent]
  })

export class ChalistComponent implements OnInit {
  challenge_list: Array<Challenge>;
  challenge: Challenge;
  create_challenge_form: FormGroup;
  show_create_challenge_html=false;
  quizzes: Array<Quiz>;

  constructor(
    private challengeService: ChallengeService,
    private alertService: AlertService,
    private route: ActivatedRoute,
    private router: Router,
    formBuilder: FormBuilder,
    private _location: Location,
    private modalService: NgbModal) {

  }

  ngOnInit() {
    console.log("inside ngOnInit...");
    this.challengeService.getChallenges().subscribe(
      data => {
        this.challenge_list = data;
        this.alertService.success('Récupération des challenges OK', true);

      },
      error => {
        this.alertService.error(error);
      });

  }


  viewChallenge(id: number) {
    if (id > 0) {
      this.challengeService.getChallengeById(id).subscribe(
        data => {
          this.challenge = data;
        },
        error => {
          this.alertService.error(error);
        });
    }
  }

    // user clicks 'create' button
createChallenge(){

    this.show_create_challenge_html = !this.show_create_challenge_html;
}

  readOneChallenge(id) {}
  updateChallenge(id) {}
  deleteChallenge(id) {}

    open() {
    const modalRef = this.modalService.open(ViewOneChallengeComponent);
    modalRef.componentInstance.name = 'World';
  }

}

The method that should open the popup once a user clicks on the button is open(), and the button in question is this one:

 <a (click)="open()" class='btn btn-primary m-r-5px'>
 <span class='glyphicon glyphicon-eye-open'></span> View
 </a>

However, when I run the app and clicks on the link that contains the button, i get the following error in my browser's console:

"StaticInjectorError(AppModule)[ChalistComponent -> NgbModal]: \n StaticInjectorError(Platform: core)[ChalistComponent -> NgbModal]: \n NullInjectorError: No provider for NgbModal!"

The example that I'm following clearly states that:

You can pass an existing component as content of the modal window. In this case remember to add content component as an entryComponents section of your NgModule.

So what I did was, I added the ViewChallengeComponent as an entrypoint to my @NgModule in my chalist.component.ts file, still that didn't solve the problem.

Could anyone please tell me what am I doing wrong here?

Answer 1

Your ngbModal should be provided in the providers.

Change your code to this in chalist.component.ts

@Component({
  selector: 'app-chalist',
  templateUrl: './chalist.component.html',
  styleUrls: ['./chalist.component.css'],
  providers: [ChallengeService, QuizService, NgbModal],
})

If you want to use this module throughout your application, then it is better that you provide it in app.module.ts

You have to import it and supply it in the providers list. So instead of doing it in chalist.component.ts or any other component individually, you can provide it globally so that all components under app.module can use it.