Angular 2 How do I make a div appear that is based in a parent container

Question

I would like to have my loading modal pop-up at the parent component (ie "app.component.ts"). Reason being is that I need to call to it several times throughout the app and I don't wish to have to paste it to every page.

I then have pages which are several routes down which need to be able to turn that loading modal screen on and off. Is the best way to do this via a service, or using input?

Answer 1

You can always emit event to parent (app.component) to show modal-popup.

app.component.html

<div>
     <child-component (onShow)="showPopup($event)"></child-component>
</div>

app.component.ts

public showPopup(show : boolean){
   if(show){
   /* code to show popup goes there */
   }
}

child.component.ts

@Output() onShow= new EventEmitter()<boolean>; 

    public someFunc(){
    /*once you are ready to show popup */
    this.onShow.emit(true);
    }