I wanna know how to make default select the first item of mat-list in angular. I tried but not able to resolve it. My mat-list code is here
export class StationsListComponent implements OnInit {
@Input() stations: Stations[];
selectedStation: Stations;
constructor() { }
ngOnInit(): void {
this.selectedStation = this.stations[0];
}
}
<mat-list role="list">
<div *ngFor="let book of Books">
<mat-list-item id="{{book.bookId}}" role="listitem" class="list-item" routerLink="/home/{{book.bookId}}" [routerLinkActive]="['is-active']">
<div class="station-div">
<div class="station-name">{{book.bookName}}</div>
<div class="station-location">{{book.authorName}}</div>
</div>
</mat-list-item>
</div>
</mat-list>
According to the Angular Material Docs, mat-list-item
doesn't have a selected input property that you can apply to the element. however mat-list-option
does.
as such, if you switch to using mat-list-option you can leverages properties [selected]
and [value]