How to design totally different templates for different devices, like mobile and desktop, but also tablet in Angular?

Question

So I have a angular 9 application.

And I have some mockups. But the template on mobile looks totally different then on dekstop.

But the data(API calls) are almost identical on both(desktop, mobile). Almost. So it even can differ for mobile and for desktop.

But so my question. Is this the best 'approach'? Or is it better to work with media queries?

So this is for desktop:

<!-- <app-bar-chart></app-bar-chart> -->

<div>
  <router-outlet></router-outlet>
</div>
  <div class="w-100 d-lg-block d-md-block">
    <div class="d-none d-lg-block d-md-block">
      <mat-grid-list cols="4" rowHeight="1:2">
        <mat-grid-tile colspan="1">
          <div class="nested-grid-list">
            <mat-grid-list cols="1" rowHeight="3:2">
              <mat-grid-tile *ngFor="let card of cards; let i = index;" [colspan]="card.cols" [rowspan]="card.rows">
                <cdk-drop-list [cdkDropListConnectedTo]="drops" [cdkDropListData]="i">
                  <mat-card cdkDrag (cdkDragEntered)="entered($event)" [cdkDragData]="i" class="dashboard-card"
                    [style.backgroundColor]="card.color">
                    <mat-card-content class="dashboard-card-content">
                      <div class="example-handle" cdkDragHandle>
                        <svg width="24px" fill="currentColor" viewBox="0 0 24 24">
                          <path
                            d="M10 9h4V6h3l-5-5-5 5h3v3zm-1 1H6V7l-5 5 5 5v-3h3v-4zm14 2l-5-5v3h-3v4h3v3l5-5zm-9 3h-4v3H7l5 5 5-5h-3v-3z">
                          </path>
                          <path d="M0 0h24v24H0z" fill="none"></path>
                        </svg>
                      </div>
                    </mat-card-content>jhjhjhj
                  </mat-card>
                </cdk-drop-list>
              </mat-grid-tile>
            </mat-grid-list>
          </div>
        </mat-grid-tile>
        <mat-grid-tile colspan="2">
          <div class="nested-grid-list">
            <mat-grid-list cols="1" rowHeight="3:1">
              <mat-grid-tile *ngFor="let card of cards2; let i = index;" [colspan]="card.cols" [rowspan]="card.rows">
                <cdk-drop-list [cdkDropListConnectedTo]="drops" [cdkDropListData]="i">
                  <mat-card cdkDrag (cdkDragEntered)="entered2($event)" [cdkDragData]="i" class="dashboard-card"
                    [style.backgroundColor]="card.color">
                    <mat-card-content class="dashboard-card-content">
                      <div class="example-handle" cdkDragHandle>
                        <svg width="24px" fill="currentColor" viewBox="0 0 24 24">
                          <path
                            d="M10 9h4V6h3l-5-5-5 5h3v3zm-1 1H6V7l-5 5 5 5v-3h3v-4zm14 2l-5-5v3h-3v4h3v3l5-5zm-9 3h-4v3H7l5 5 5-5h-3v-3z">
                          </path>
                          <path d="M0 0h24v24H0z" fill="none"></path>
                        </svg>
                      </div>
                    </mat-card-content>
                  </mat-card>
                </cdk-drop-list>
              </mat-grid-tile>
            </mat-grid-list>
          </div>
        </mat-grid-tile>
        <mat-grid-tile colspan="1">
          <div class="nested-grid-list">
            <mat-grid-list cols="1" rowHeight="3:2">
              <mat-grid-tile *ngFor="let card of cards3; let i = index;" [colspan]="card.cols" [rowspan]="card.rows">
                <cdk-drop-list [cdkDropListConnectedTo]="drops" [cdkDropListData]="i">
                  <mat-card cdkDrag (cdkDragEntered)="entered3($event)" [cdkDragData]="i" class="dashboard-card"
                    [style.backgroundColor]="card.color">
                    <mat-card-content class="dashboard-card-content">
                      <div class="example-handle" cdkDragHandle>
                        <svg width="24px" fill="currentColor" viewBox="0 0 24 24">
                          <path
                            d="M10 9h4V6h3l-5-5-5 5h3v3zm-1 1H6V7l-5 5 5 5v-3h3v-4zm14 2l-5-5v3h-3v4h3v3l5-5zm-9 3h-4v3H7l5 5 5-5h-3v-3z">
                          </path>
                          <path d="M0 0h24v24H0z" fill="none"></path>
                        </svg>
                      </div>
                    </mat-card-content>
                  </mat-card>
                </cdk-drop-list>
              </mat-grid-tile>
            </mat-grid-list>
          </div>
        </mat-grid-tile>
      </mat-grid-list>
    </div>
  </div>

And this is for mobile:

<div class="d-flex flex-column d-block d-sm-none">
  <div style="height: 50vh">
      <app-map-element></app-map-element>
  </div>
  <div style="height: 50vh">
    <app-list></app-list>
  </div>
</div>

and map component looks like this:

<div id="map" class="map"></div>
<form class="form-inline">
    <label>Measurement type &nbsp;</label>
    <select id="type">
      <option value="length">Length (LineString)</option>
      <option value="area">Area (Polygon)</option>
    </select>
  </form>

So any suggestions, would be nice.

Thank you

Or maybe two different applications with sharing API calls?

Answer 1

Just giving you simple adhoc ways is three different blocks of code for different devices and you can initiate them in different ways,

1. Easiest way is using a plugin ngx-device-detector. Use the variable in *ngIf cases and load the block only when the device is true. This actually doesn't load the unnecessary data.

2. Use media queries (this just hides data) CSS change.

Answer 2

Bootstrap is the way to go. You should check it out