Access elements in Angular Dart


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


where <x-alert-dialog> contains

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

Generated HTML contains <x-app> and overlay container div which contains modals as on the image enter image description here
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 {

  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?


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)

Leave a Reply

Your email address will not be published. Required fields are marked *