Update component view from service?

Question

I am looking to create a PopoverService that I will then use to display a popover from another component. My question is, how do I update a component's view from a service?

Ultimately I would like to be able to inject a component into the popover to show any data that I need next to a clicked element.

Thank you for any help that can be provided!

popover.component.ts:

import {Component, Input} from "@angular/core";

@Component({
  selector: 'kt-popover',
  templateUrl: './popover.component.html'
})
export class PopoverComponent {
  @Input() visible: boolean;
}

<div class="popover-container" (click)="hide()" [ngStyle]="{'display': visible ? 'block' : 'none'}">
    <template [ngTemplateOutlet]="content"></template>
</div>

popover.service.ts: (should handle updating the popover component)

import {
  Injectable, ComponentFactoryResolver
} from "@angular/core";
import {PopoverComponent} from "./popover.component";

@Injectable()
export class PopoverService {
  constructor(
    private popover: PopoverComponent,
    private resolver: ComponentFactoryResolver
  ) {}

  public show(element: any, component: any, componentInput: any, options: any): void {
    this.popover.visible = true;
  }
}

test.component.ts: (uses the service to show the popover)

import {Component} from "@angular/core";
import {PopoverService} from "../services/popover/popover.service";

@Component({
  selector: 'test',
  templateUrl: './test.component.html'
})
export class TestComponent {
  constructor(private popoverService: PopoverService) {}

  public onClick(event: any): void {
    this.popoverService.show(event.target, 'TestPopoverComponent', null, null);
  }
}

<div (click)="onClick($event)">show popover</div>

Answer 1

Services are meant to fetch data either from an external API or load local mock data. The visibility of a DOM element in a component can be better managed by using a boolean variable in the component itself. Here's the angular way to do it.

@Injectable()
export class PopoverService {

  private popUpVisibility:false; 
  constructor(
    private resolver: ComponentFactoryResolver
  ) {}

show()
{
   this.popUpVisibility=true;
}

}

test.component.ts: (uses the service to show the popover)

import {Component} from "@angular/core";
import {PopoverService} from "../services/popover/popover.service";

@Component({
  selector: 'test',
  templateUrl: './test.component.html'
})
export class TestComponent {

  popUpVisibility:false;
  constructor(private popoverService: PopoverService) {}

  onClick {
   this.popUpVisibility= this.popoverService.show();
  }
}

Now, in your HTML, just toggle the visibility based on popUpVisibility.

<div class="popover-container" *ngIf="popUpVisibility"> 
</div>