here is my code in home.component.html
<div class="scrollmenu" >
<mat-chip-list>
<mat-chip *ngFor="let category of categories" class="matchip">
{{ category.cat_name }}
</mat-chip>
</mat-chip-list>
</div>
below you can see home.component.css
.scrollmenu{
width:100%;
overflow: auto;
white-space: wrap;
}
.matchip {
display: inline-block;
}
but this is not working.I need to show my mat-chips list horizontally scrollable. Thank you.
I had to override the css of the internal wrapper class mat-chip-list-wrapper to get the horizontal scroll working:
::ng-deep .mat-chip-list-wrapper {
flex-wrap: unset !important;
width: 100px;
overflow-x: scroll;
}
You can checkout the working example at https://stackblitz.com/edit/angular-ivy-gxyvf9?file=src/app/app.component.css
Try like this in home.component.css
.matchip{
width:100%;
display: flex;
overflow-x: auto;
}
Can you try this? I hope this is what you are looking for
.scrollmenu{
width: 200px;
max-height: 40px;
overflow-y: hidden;
}
.scrollmenu ::ng-deep .mat-chip-list-wrapper{
flex-wrap: inherit !important;
}