Opening a Modal inside an Angular Component from another Com

Hi guys, Ive been through ton of different issues trying to solve my issue but for the life of me, I cannot figure out what I am doing wrong, as nothing seems to work. Basically, I have 3 pages(components) on my app, each of which will need to be able to call an MD Modal. The fourth Component is where I am keeping the Modal code in the HTML and the ts file for that modal will show it, using ViewChild. And then each of the 3 pages will just be able to call the show function on the Modals component. For this example, I will just show components called Buyers, and AddBuyerModal as if they work, I should be able to get the rest to work. buyers.component.html <div class="container"> <div class="row"> <div class="col-sm-6"> <h2>Buyers</h2> </div> <div class="col-sm-6"> <button type="button" class="btn btn-secondary">View Incomplete Calls</button> <button class="btn btn-primary waves-light" (click)="showModal()">Open modal</button> </div> </div> <div class="row"> <div class="col-sm-12"> <!--Table--> <table id="tablePreview" class="table"> <!--Table head--> <thead> <tr> <th>Address</th> <th>Suburb</th> <th>Town</th> <th>Dropdown</th> </tr> </thead> <!--Table head--> <!--Table body--> <tbody> <ng-container *ngFor="let item of items"> <tr> <th scope="row">1</th> <td>{{ item.propertyAddress }}</td> <td>{{ item.suburb }}</td> <td>{{ item.town }}</td> <td> <button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Material dropdown </button> <!--Menu--> <div class="dropdown-menu dropdown-primary"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Something else here</a> <a class="dropdown-item" href="#">Something else here</a> </div> </td> </tr> </ng-container> </tbody> <!--Table body--> </table> <!--Table--> </div> </div> </div> buyers.component.ts import { Component, OnInit, ViewChild } from '@angular/core'; import { BuyersService } from '../../../services/buyers/buyers.service' import { APIResponseObject } from '../../../classes/APIResponseObject'; import { AddbuyermodalComponent } from '../addbuyermodal/addbuyermodal.component'; @Component({ selector: 'app-buyers', templateUrl: './buyers.component.html', styleUrls: ['./buyers.component.scss'], providers: [AddbuyermodalComponent] }) export class BuyersComponent implements OnInit { constructor(private buyersService: BuyersService, private addbuyerModal: AddbuyermodalComponent) { } items = []; ngOnInit() { let parent: BuyersComponent = this; this.buyersService.getBuyersRecords(1).then(function (result: APIResponseObject) { parent.items = result.successResponse; }) } showModal() { this.addbuyerModal.showAndHideModal() } } addbuyermodal.component.html <div mdbModal #basicModal="mdbModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myBasicModalLabel" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close pull-right" aria-label="Close" (click)="basicModal.hide()"> <span aria-hidden="true">×</span> </button> <h4 class="modal-title w-100" id="myModalLabel">Modal title</h4> </div> <div class="modal-body"> ... </div> <div class="modal-footer"> <button type="button" mdbBtn color="secondary" class="waves-light" aria-label="Close" (click)="basicModal.hide()" mdbWavesEffect>Close</button> <button type="button" mdbBtn color="primary" class="relative waves-light" mdbWavesEffect>Save changes</button> </div> </div> </div> </div> addbuyermodal.component.ts import { Component, ViewChild, AfterViewInit } from '@angular/core'; import { ModalDirective } from 'angular-bootstrap-md'; @Component({ selector: 'app-addbuyermodal', templateUrl: './addbuyermodal.component.html', styleUrls: ['./addbuyermodal.component.scss'], }) export class AddbuyermodalComponent implements AfterViewInit{ ngAfterViewInit(): void { console.log(this.demoBasic) } @ViewChild('basicModal') demoBasic: ModalDirective; constructor() { } showAndHideModal() { this.demoBasic.show(); } } app.module.ts import { BrowserModule } from '@angular/platform-browser'; import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { HttpClientModule } from '@angular/common/http'; import { MDBBootstrapModule } from 'angular-bootstrap-md'; import { AppComponent } from './app.component'; import { LoginComponentComponent } from './components/login/login-component.component'; import { AppRoutingModule } from './modules/routing/app-routing.module'; import { HomeComponent } from './components/home/home.component'; import { FarmingComponent } from './components/farming/farming/farming.component'; import { BuyersComponent } from './components/buyers/buyers/buyers.component'; import { SellersComponent } from './components/sellers/sellers/sellers.component'; import { AgentsComponent } from './components/agents/agents/agents.component'; import { AddbuyermodalComponent } from './components/buyers/addbuyermodal/addbuyermodal.component'; @NgModule({ declarations: [ AppComponent, LoginComponentComponent, HomeComponent, FarmingComponent, BuyersComponent, SellersComponent, AgentsComponent, AddbuyermodalComponent ], imports: [ BrowserModule, HttpClientModule, AppRoutingModule, FormsModule, MDBBootstrapModule.forRoot() ], schemas: [NO_ERRORS_SCHEMA], providers: [], bootstrap: [AppComponent] }) export class AppModule { } When I click the button on the buyers.component.html, it goes off to the addbuyersmodal.component.ts and calls a show function there, but the error that I get is: ERROR TypeError: Cannot read property 'show' of undefined at AddbuyermodalComponent.push../src/app/components/buyers/addbuyermodal/addbuyermodal.component.ts.AddbuyermodalComponent.showAndHideModal (addbuyermodal.component.ts:19) at BuyersComponent.push../src/app/components/buyers/buyers/buyers.component.ts.BuyersComponent.showModal (buyers.component.ts:25) at Object.eval [as handleEvent] (BuyersComponent.html:8) at handleEvent (core.js:10251) at callWithDebugContext (core.js:11344) at Object.debugHandleEvent [as handleEvent] (core.js:11047) at dispatchEvent (core.js:7710) at core.js:8154 at HTMLButtonElement.<anonymous> (platform-browser.js:988) at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:421)

Im hoping that theres something small that Im doing wrong and I can kick myself for being stupid and move on. Thanks for the help guys!

---