thisiszoaib

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MatToolbarModule,
    FlexLayoutModule,
    MatMenuModule,

thisiszoaib

export interface MenuItem {
    label: string;
    icon: string;
}

thisiszoaib

@Component({
  selector: 'app-responsive-toolbar',
  templateUrl: './responsive-toolbar.component.html',
  styleUrls: ['./responsive-toolbar.component.scss']
})
export class ResponsiveToolbarComponent implements OnInit {
  
  menuItems: MenuItem[] = [
    {
      label: 'Sign Up',

thisiszoaib

<mat-toolbar fxLayout="row" color="primary">
    <span fxFlex>Responsive Toolbar Demo</span>
    <button mat-button *ngFor="let item of menuItems" fxHide.xs>
        <mat-icon class="mr">{{item.icon}}</mat-icon>
        {{item.label}}
    </button>
    <button mat-icon-button [matMenuTriggerFor]="dropMenu" fxHide fxShow.xs>
        <mat-icon>more_vert</mat-icon>
    </button>
    <mat-menu #dropMenu="matMenu">

thisiszoaib

export interface MenuItem {
    label: string;
    icon: string;
    showOnMobile: boolean;
    showOnTablet: boolean;
    showOnDesktop: boolean;
}

thisiszoaib

export interface MenuItem {
    label: string;
    icon: string;
    showOnMobile: boolean;
    showOnTablet: boolean;
    showOnDesktop: boolean;
}

thisiszoaib

menuItems: MenuItem[] = [
    {
      label: 'Sign Up',
      icon: 'login',
      showOnMobile: true,
      showOnTablet: true,
      showOnDesktop: true
    },
    {
      label: 'About',

thisiszoaib

<mat-toolbar fxLayout="row" color="primary">
    <span fxFlex>Responsive Toolbar Demo</span>
    <button mat-button *ngFor="let item of menuItems" 
        [fxShow]="item.showOnDesktop" 
        [fxShow.xs]="item.showOnMobile"
        [fxShow.sm]="item.showOnTablet">
        <mat-icon class="mr">{{item.icon}}</mat-icon>
        {{item.label}}
    </button>
    <ng-container>

thisiszoaib

<mat-toolbar color="primary">
  My Weather App
</mat-toolbar>
<div class="content">
  <mat-form-field>
    <mat-label>Select city</mat-label>
    <mat-select [formControl]="cityControl">
      <mat-option *ngFor="let city of cities" [value]="city">
        {{city}}
      </mat-option>

thisiszoaib

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.scss"]
})
export class AppComponent implements OnInit, OnDestroy {
  cities = ["London", "Paris", "Moscow", "New York", "Karachi", "Sydney"];
  cityControl: FormControl;
  constructor(private router: Router) {}
  ngOnInit() {