HTML 中的条件访问（使用 ngIf）DOM 元素 Angular 中的模板

Question

I'm trying to access a DOM element within my HTML template, but I got a problem: this element is conditioned with ngIf, and so I have the following error "Property 'drawer' does not exist on type 'Component'".

Here is an extract from my HTML code:

<mat-sidenav-container>
    <mat-sidenav #drawer *ngIf="condition">
        ...
    </mat-sidenav>
    <mat-sidenav-content>
        <some-component (someEventEmitter)="drawer.open()"></some-component>
    </mat-sidenav-content>
</mat-sidenav-container>

Is there a solution to call #drawer even if it is conditioned?

I tried conditioning with "drawer? drawer.open(): null" but I got the same error.

Thanks

Answer 1

The better way would be to hide it than using ngIf.

<mat-sidenav-container>
    <mat-sidenav #drawer [hidden]="!condition">
        ...
    </mat-sidenav>
    <mat-sidenav-content>
        <some-component (someEventEmitter)="drawer.open()">
    </mat-sidenav-content>
</mat-sidenav-container>

This should work

Also you can always not do things with drawer while it's not there

<mat-sidenav #drawer id="drawer" *ngIf="condition">
  ...
</mat-sidenav>

ts

const element: HTMLElement = document.getElementById('drawer') as HTMLElement;

if (element) {
  // do things with drawer
}