How to display modal Component from another Component in Angular 11

Question

I'm trying to display a modal component from another main component, but I receive 404 error from the modal component when it renders the parent component. I think beacuse is trying to access the modal component from main component before it gets loaded.

I declared the modal component on NgModule declarations. tried a lot of things but i couldn't make it work yet...

This is my parent component portfolio.component.html

`  <button class="btn btn-outline-primary"(click)="viewModal()">
      View portfolio n. 1
   </button>`

Then in portfolio.component.ts

import { PortfolioService } from './portfolio.service';
@Component({
  selector: 'app-portfolio',
  templateUrl: './portfolio.component.html',
  styleUrls: ['./portfolio.component.scss'],
})
export class PortfolioComponent implements AfterViewInit {
   //declare service to render the data from another component
   constructor(private portfolioService: PortfolioService) {}
    
ngAfterViewInit() {}

viewModal() {
    this.portfolioService.displayPortfolio();
  }
}

Finally on portfolio.service.ts

import { Injectable } from '@angular/core';
import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
import { ExamplePortfolioComponent } from './portfolios-list/example-portfolio.template.component';
@Injectable()
export class PortfolioService {
  examplePortfolio: ExamplePortfolioComponent;
  modalService: NgbModal;

  constructor() {}
  // here I'm trying to display the modal, but it doesn't work
  displayPortfolio() {
    this.modalService.open(this.examplePortfolio, {
      windowClass: 'dark-modal',
    });
  }
}

How can I display a modal component from another main component properly?

Answer 1

Attributes only declared within a service are not injected into it. I think you should inject the ngmodal service through the constructor instead of declared as attribute

constructor(modalService: NgbModal) {}

You should also pass ExamplePortfolioComponent directly when you try to open the modal instead of trying to pass a reference to an object, I think that receives a type of component and not a reference to an instance of it. Also check if you inject your service as providers inside any module, I think you should declare with scope like this

@Injectable({
    providedIn: 'root'
})
export class PortfolioService