Angular2 OverlayComponent does not update message variable

Question

I have the following OverlayComponent which serves as a processing counter during asynchronous calls. The overlay pops up without any problems, but when I try to send him a message, the message does not get up.

Child component

import {Component, OnInit} from '@angular/core'; import {OverlayComponent} from "../../shared/app.mysite.overlay.component"; @Component({ moduleId: module.id, selector: 'tracker-component', templateUrl: '/public/app/templates/pages/racker/mysite.tracker.component.html', styleUrls: ['../../../scss/pages/tracker/tracker.css'], providers: [OverlayComponent] }) export class TrackerComponent implements OnInit{ constructor(private overlayComponent: OverlayComponent) { } ngOnInit(): void { this.overlayComponent.showOverlay("Testing 123"); //<-- shows overlay but doesn't show the message in the overlay } } 

HTML child component

 <div id="TrackerContainer"> <div class="col-lg-12" class="container"> <div class="jumbotron jumbotron-header"> <div> <div id="pageTitle">Tracker</div> </div> </div> <div class="content-container container"> <div *ngFor="let item of tracker.activeMenu.items"> <card-component [item]="item"></card-component> </div> </div> </div> </div> <overlay-component [message]="overlayMessage"></overlay-component> 

Overlaycompponent.ts

 import { Component } from '@angular/core'; @Component({ selector: 'overlay-component', templateUrl: '/public/app/templates/shared/mysite.overlay.component.html', styleUrls: ['../../app/scss/shared/overlay.css'] }) export class OverlayComponent { message: string; //message: string = 'testing...'; <-- this updated the message just fine showOverlay(msg: string) { this.message = msg; // <-- the right value comes through in the msg variable but doesn't update in the page $('.overlay-component-container').show(); } hideOverlay() { $('.overlay-component-container').hide(); this.message = ''; } } 

Overlaycompponent.html

 <div class="overlay-component-container"> <div class="overlay-component"> <div class="overlay-message">{{message}}</div> <div> <i class="fa fa-spinner fa-spin" aria-hidden="true"></i> </div> </div> </div> 

Answer 1

The problem can be caused by several things:

You don't need this here, it's just for services, not for components

 providers: [OverlayComponent] 

This is not a way to get a link to another component; you may not have the corresponding instance.

 constructor(private overlayComponent: OverlayComponent) 

Is the <overlay-component> actually inside the Tracker HTML component?

Also where is the overlayMessage property on the tracker component? (as used below)

 <overlay-component [message]="overlayMessage"></overlay-component> 

Just make sure the add-on is inside the tracker component, remove this.message = msg; from showOverlay() this.message = msg; from showOverlay() and use two-way data binding to modify the message.

IE <overlay-component [message]="overlayMessage"></overlay-component>

If you add overlayMessage: string; to the Tracker component (or the parent overlay component). Then you only need to update it in your parent component and your overlay component will close the changes.