CODEWITHSUNDEEP
angular-materialangular-material2
userx
userx

Reputation: 515

mat-list does not appear inside mat-sidenav

I'm trying to make a side navigation bar with a menu consists of sections and sub suctions. the problem is that the mat-list looks like big transparent rectangle, and inspect telling that list is rendered correctly. any help is appreciated.

<div fxLayout="column" >
        <div fxLayout="row" fxFlex="100%" >
              <app-header fxFlex="100%"> </app-header>
        </div>
        <mat-sidenav-container >
            <mat-sidenav #sidenav mode="side" opened="true" 
                         [fixedInViewport]="false" [fixedTopGap]="0"
                         [fixedBottomGap]="0">
                                <mat-list >
                                    <div *ngFor = "let section of defaultSections">
                                        <mat-list-item>{{section.name}}</mat-list-item>
                                            <mat-list>
                                                <div *ngFor="let subSection of section?.subSections">
                                                    <mat-list-item>
                                                        <!-- <mat-icon>{{subSection.icon}}</mat-icon> -->
                                                        <h4 mat-line>{{subSection.name}}</h4> 
                                                    </mat-list-item> 
                                                </div>
                                            </mat-list> 
                                    </div>
                                 </mat-list>
            </mat-sidenav>

            <mat-sidenav-content >

            </mat-sidenav-content>
        </mat-sidenav-container>
    </div>



<router-outlet></router-outlet>

enter image description here

Update app.cpmponenet.ts

import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent {
  title = 'app';

  defaultSections = [
        {id:1, name: 'Entries and Accounts', subSections: [
            {id:1, name: 'Journal Entries' , icon: 'book'},
            {id:2, name: 'charts of Accounts', icon: 'account_balance'},
        ]},
        {id:2, name: 'Financial Reports', subSections: [
            {id:1, name: 'General Ledure', icon: 'library_books'},
            {id:2, name: 'Income Statement', icon: 'event_notes'},
            {id:3, name: 'Balance Sheet', icon: 'event_notes'},
            {id:4, name: 'Cash Flow', icon: 'attach_money'}
        ]},
        {id:3, name: 'Bulletins and Currencies', subSections: [
            {id:1, name: 'Exchange Rate Bulletins', icon: 'format_list_bulleted'},
            {id:2, name: 'Currencies', icon: 'monetization_on'},
        ]}

        ];

}

Upvotes: 1

Views: 3783

Answers (3)

Venkey
Venkey

Reputation: 371

Noticed, the Angular Material theme Purple-Green (among others) sets mat-list-item color go white. When used on a page with white background, the text is hidden. Notice, page has the content

@angular/material/prebuilt-themes/purple-green.css

enter image description here

Upvotes: 1

Atinator98
Atinator98

Reputation: 51

I had a similar issue. The code generated the list expectedly, but the text color was white (same as the background). Try setting a background, or changing the font color.

Upvotes: 1

bugs
bugs

Reputation: 15313

Your code seems to be working ok for me, I've quickly reproduced a similar example here and I can see the list in my sidenav. Is there anything you are doing different that I have not taken into account in my example?

Upvotes: 1

Related Questions