Angular2 how to display modal window?

Question

Angular

Hello.
New to Angular and JS in general.
So. there is Clarity UI.
The button on the supporter by which the method is called in the component of this page:

changeQty(restQty: number, uidItem: string)
  {    
    this.itemQtyUpdateService.updateItemQty(uidItem, restQty)
      .subscribe(
      (item: Item[]) => {
      this.item = item;
     //  тут  вызываем модальное окно

When this service is finished, you need to open a module window with the data from the "item" object of this method.
In vain attempts, the directive was created:

import { Directive } from '@angular/core';
import { ElementRef } from '@angular/core/';
import { OnInit } from '@angular/core/';

@Directive({
  selector: '[appModal]'
})
export class ModalDirective implements OnInit { 

  constructor(private element: ElementRef) { }

  ngOnInit(): void {
    console.log(this.element);
    this.element.nativeElement.clrModalOpen = 'opened';
  }

  showModal() {
    this.element.nativeElement.clrModalOpen = 'true';
    console.log(this.element);
  }
}

In which the showModal () method is created, which changes the value of the "clrModalOpen" element attribute to, it seems to me, activating the window.
Here is the modal window code from the Clarity ui package:

<clr-modal appModal  [(clrModalOpen)]="opend" [clrModalClosable]="false">
  <h3 class="modal-title">No "x" in the top-right corner</h3>
  <div class="modal-body">
    <p> Для </p>
    <p> По заказу </p>
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-primary" (click)="opened = false">
      Я все правильно положил!
    </button>
  </div>
</clr-modal>

This code lies at the end of the HTML page where it should be called.
-------
I proceeded from the following logic:
I create an element in the html code -> I bind
a directive to it ->
In the directive I create methods that change its state->
I call the methods of the directive as necessary from the main component.
WHAT?

Answer 1

no need to suffer, make dialogs separate components and call them through the service in the code https://valor-software.com/ngx-bootstrap/#/modals. And your dialogues will be available anytime and anywhere. Not where it says at the bottom of the page.