CODEWITHSUNDEEP
javascripthtmlangularangular-material
Scott
Scott

Reputation: 63

Angular Material Sidenav will only show first item in a nav list

I have an angular material sidenav component with a mat-nav-list in it, but it will only show the first item in the mat-nav-list. I've also tested the mat-nav-list in another context and it works as expected. Am I doing something wrong here or this some bug in angular material.

enter image description here

navbar.ts

import { Component, OnInit, Input } from '@angular/core';

@Component({
  selector: 'app-navbar',
  templateUrl: './navbar.component.html',
  styleUrls: ['./navbar.component.scss']
})
export class NavbarComponent implements OnInit {

  @Input() name:string;

  constructor() { }

  ngOnInit(): void {
  }

}
navbar.html

<mat-sidenav-container>
  <mat-sidenav #sidenav>
    <mat-nav-list>
      <mat-list-item [routerLink]="'/'"> App </mat-list-item>
      <mat-list-item><button mat-button (click)="sidenav.toggle()">Toggle</button></mat-list-item>
    </mat-nav-list>
  </mat-sidenav>
  <mat-sidenav-content>
    <mat-toolbar color="primary">
      <button mat-button aria-label="Example icon-button with menu icon"
        (click)="sidenav.toggle()">
        <mat-icon>menu</mat-icon>
      </button>
      <span>{{ name }}</span>
    </mat-toolbar>
  </mat-sidenav-content>
</mat-sidenav-container>

home.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: [
    './app.component.scss'
  ]
})
export class AppComponent {
  title = 'HealthyLivingClient';
}
home.html

<app-navbar [name] = "name"></app-navbar>

If I switch the position of the mat-list-items in the mat-nav-list then I still only get the first item in the list, this time the toggle button instead.

enter image description here

Upvotes: 1

Views: 1246

Answers (1)

Edric
Edric

Reputation: 26740

This is because the sidenav container doesn't actually fill your browser's window by default. To do that, you have to use the fullscreen attribute which provides CSS styles to fit the width and height of the window:

<mat-sidenav-container fullscreen>
  <!-- Contents of sidenav container go here -->
</mat-sidenav-container>

However, it seems that the fullscreen CSS-only attribute is still not documented.

Upvotes: 2

Related Questions