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

• 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

1 Answer 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.