Здравствуйте.
В Angular и JS в целом новичок.
Итак. есть Clarity UI.
Кнопка на стороннице по которой вызывается метод в компоненте этой страницы :
changeQty(restQty: number, uidItem: string)
{
this.itemQtyUpdateService.updateItemQty(uidItem, restQty)
.subscribe(
(item: Item[]) => {
this.item = item;
// тут вызываем модальное окно
По завершении работы этого сервиса нужно открыть модульное окно с данными из объекта "item" этого метода.
В тщетных попытках была создана директива :
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);
}
}
В которой создан метод showModal() меняющий значения атрибута элемента "clrModalOpen" на как мне кажется активирующий окно.
Вот код модального окна из пакета Clarity ui:
<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>
Код этот лежит в конце ХТМЛ страницы где его и надо вызвать.
-------
Я исходил из следующей логики:
Создаю элемент в хтмл коде ->
Привязываю к нему директиву ->
В директиве создаю методы меняющие его состояние->
вызываю методы директивы по необходимости из основного компонента.
ЧТЯДНТ ?
Средний