Access elements in Angular Dart

Issue

I have a top level element <x-app> with nested modal dialogs

<x-app>
  <material-content>
  ...
  </material-content>
  <x-alert-dialog></x-alert-dialog>
</x-app>

where <x-alert-dialog> contains

<modal [visible]="dlgVisible" dialog-id="alert-dialog-modal">
  <material-dialog class="alert-dialog">
  ....
  </material-dialog>
</modal>

Generated HTML contains <x-app> and overlay container div which contains modals as on the image
What I need is to access <div pane-id="default-1"...> to change z-index. and I don’t know how. I cannot access it in CSS as any reference via :host is not possible.
I tried to access it programatically in x-app component. I have

class AppComponent implements AfterViewInit {

  @override
  void ngAfterViewInit() {
    var doc = getDocument();
    var alertDlg = doc.querySelector(".alert-dialog");
    var alertPane = alertDlg.parent;
  }
}

But alertDlg is always null. I also tried var alertDlg = querySelector(".alert-dialog");
Is there any way to access the element?

Solution

I solved it by adding *ngIf="dlgVisible" to <modal> tag, so it’s now

<modal *ngIf="dlgVisible" [visible]="dlgVisible" dialog-id="alert-dialog-modal">

This way the dialog is injected to/removed from DOM by the visibility flag. The reason why I wanted to change z-index was to get the alert and other app wide dialogs above other dialogs created later in other components.
Altering DOM solves this as the dialogs are inserted after (and thus displayed above) other dialogs. Hope this will help someone.

Answered By – Martin Edlman

Answer Checked By – Senaida (FlutterFixes Volunteer)