[Help List]selecting a list-item in mat-nav-list?

[diuming]

Feature Description

Hi,

I exercise mat-nav-list in sidenav.
How do I draw background when I selected a mat-list-item? (Do you provide a good way to do this?)
Can I set a default mat-list-item be selected?
How do I place a prefix Icon <mat-icon matListIcon>folder</mat-icon> in mat-list-item?
thanks.

<mat-sidenav-container>
    <mat-sidenav mode="side" opened="true">
        <mat-nav-list>
            <a mat-list-item href="..." *ngFor="let link of links"> {{ link }} </a>
         </mat-nav-list>
    </mat-sidenav>
</mat-sidenav-container>

Better

[zarend]

The MDC-based navigation list has an @Input activated, which I believe is what you're looking for.

[diuming]

@zarend thanks for helping me.
I cannot see anything about activated description in document.
Could you give me some example.
thanks

Where can I insert activated in following template?

<mat-sidenav-container>
    <mat-sidenav mode="side" opened="true">
        <mat-nav-list>
            <a mat-list-item href="..." *ngFor="let link of links"> {{ link }} </a>
         </mat-nav-list>
    </mat-sidenav>
</mat-sidenav-container>

[amysorto]

As @zarend mentioned, the new MDC based navigation list has better support for this and will be available soon in v15. Here is an explaination on how to use activated input.

For the non MDC components (v14 and below), our docs site has an example of a side nav-list that highlights the text based on what page you are on. It uses the router to apply a special class when active, and defines the colors in the CSS.

In terms of adding an icon to a list item, there is an example on the docs site that does that for a list component https://material.angular.io/components/list/examples#list-sections.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}