How to make mat-sidenav-container fullscreen on condition?

I want to make my mat-sidenav-container full screen when user is not logged in

Trying to do this :

<mat-sidenav-container class="sidenav-container" [fullscreen]="!loggedIn">
    <mat-sidenav #sidenav [class.mat-elevation-z4]="true" mode="side" class="sidenav" [fixedInViewport]="true"
      [fixedTopGap]="0" [fixedBottomGap]="0" opened>
      <app-side-menu></app-side-menu>
    </mat-sidenav>
    <mat-sidenav-content>
      <div class="content-container">
        <router-outlet></router-outlet>
      </div>
    </mat-sidenav-content>
  </mat-sidenav-container>

but got error on compilation :

Error: src/app/app.component.html:28:52 - error NG8002: Can't bind to 'fullscreen' since it isn't a known property of 'mat-sidenav-container'.

1. If 'mat-sidenav-container' is an Angular component and it has 'fullscreen' input, then verify that it is part of this module.
2. If 'mat-sidenav-container' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component.

28 <mat-sidenav-container class="sidenav-container" [fullscreen]="!loggedIn">
~~~~~~~~~~~~~~~~~~~~~~~~

src/app/app.component.ts:11:16
11 templateUrl: './app.component.html',
~~~~~~~~~~~~~~~~~~~~~~
Error occurs in the template of component AppComponent.

✖ Failed to compile.

The error message is expected as there is no fullscreen property on the component - see api documentation: mat-sidenav component.

You can, however, achieve this by conditionally adding a class using ngClass.

Ex.

// component.html

<mat-sidenav-container class="sidenav-container">
    <mat-sidenav #sidenav [class.mat-elevation-z4]="true" mode="side" [ngClass]="{'fullscreen-nav': loggedIn === true}" [fixedInViewport]="true"
      [fixedTopGap]="0" [fixedBottomGap]="0" opened>
      <app-side-menu></app-side-menu>
    </mat-sidenav>
    <mat-sidenav-content>
      <div class="content-container">
        <router-outlet></router-outlet>
      </div>
    </mat-sidenav-content>
  </mat-sidenav-container>


// component.scss

    .fullscreen-nav{
    	width: 100vw !important;
    	height: 100vh !important;
    }

See also ngClass documentation.