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