Q: In Angular Material, how do you make items on a toolbar go to the second line on a mobile screen only? On the Angular Material website (https://material.angular.io/) , this is what the toolbar looks like when displayed on a desktop

When it's on mobile, the menu items Components, CDK, Guides links are on the second line like this but github, theme icon and the version number dropdown is still on the first row.

How is this done? None of the documentation nor the examples illustrate how to do this.

A: Actually, the website has 2 navbars. And the Components button on desktop design is a different one from mobile design. They show full navbar in desktop mode while hide some components and show mobile secondary navbar in mobile mode.
So, you can

*

*create 2 navbars - desktop and mobile

*show desktop navbar with all nav-items in desktop design

*show mobile navbar and hide some nav-items from desktop navbar in mobile design


A: You can create a function which checks if the device is a mobile or not like this
isMobileDisplay() {
  return (window.screen.width <= 576)
}

and in html you can use *ngIf to render templates based on screen size like this
<div *ngIf="!isMobileDisplay(); else smallDisplay">
</div>


<ng-template #smallDisplay>
</ng-template>

You can write 2 templates for both type of screen sizes
