Angular material responsive layout from columns into tabs - Stack Overflow

admin管理员组

文章数量:1316974

I would like to have a responsive design for my angular application using angular material.

My page should have 3 columns on desktop that should be grouped into 3 tabs when on mobile.

I was able to do this but had to duplicate the components and @if them out depending on the available width. This leads to extra maintenance and possible issues, like updating the desktop instance and fetting to do the same for the mobile.

Is there a way to achieve this without too much code duplication?

Here is a sketch if I wasn't clear on the layout

I would like to have a responsive design for my angular application using angular material.

My page should have 3 columns on desktop that should be grouped into 3 tabs when on mobile.

I was able to do this but had to duplicate the components and @if them out depending on the available width. This leads to extra maintenance and possible issues, like updating the desktop instance and fetting to do the same for the mobile.

Is there a way to achieve this without too much code duplication?

Here is a sketch if I wasn't clear on the layout

• angular
• angular-material

Share Improve this question Follow edited Jan 29 at 20:15 Ivo Udelsmann asked Jan 29 at 19:59 Ivo UdelsmannIvo Udelsmann 38622 silver badges1919 bronze badges 1

• Can you provide us with the source code in order to have a better understanding of your task? – Vasilis G. Commented Jan 29 at 20:06

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 1

Separate the layout concern into its own component:

import { Component, signal } from '@angular/core';
import { MatTabsModule } from '@angular/material/tabs';

@Component({
  selector: 'app-responsive-layout',
  imports: [MatTabsModule],
  template: `
    @if (isMobile()) {
      <mat-tab-group>
        <mat-tab label="Tab 1">
          <ng-container *ngTemplateOutlet="section1" />
        </mat-tab>
        <mat-tab label="Tab 2">
          <ng-container *ngTemplateOutlet="section2" />
        </mat-tab>
        <mat-tab label="Tab 3">
          <ng-container *ngTemplateOutlet="section3" />
        </mat-tab>
      </mat-tab-group>
    } @else {
      <div class="columns-collection">
        <div class="column">
          <ng-container *ngTemplateOutlet="section1" />
        </div>
        <div class="column">
          <ng-container *ngTemplateOutlet="section2" />
        </div>
        <div class="column">
          <ng-container *ngTemplateOutlet="section3" />
        </div>
      </div>
    }
    
    <ng-template #section1>
      <ng-content select="[data-section-1]" />
    </ng-template>
    <ng-template #section2>
      <ng-content select="[data-section-2]" />
    </ng-template>
    <ng-template #section3>
      <ng-content select="[data-section-3]" />
    </ng-template>
  `,
  styles: `
    .column-collection {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
    }
    .column {
      display: flex;
      flex-direction: column;
    }
  `,
})
export class ResponsiveLayoutComponent {

  // TODO: update when on a mobile device
  protected readonly isMobile = signal(false);
}

Then content project into the layout component:

<app-responsive-layout>
  <app-component-1 data-section-1=""></app-component-1>
  <app-component-2 data-section-2=""></app-component-2>
  <app-component-3 data-section-3=""></app-component-3>
</app-responsive-layout>

I'm using the data-* attribute for selecting which component goes into which column/tab, but you can use any valid CSS selector (including the selector of your component).

If you don't already have a way to determine if you're on a mobile device, you can use something like the Layout package from the Angular Material CDK.

本文标签： Angular material responsive layout from columns into tabsStack Overflow