Как добиться отзывчивого API в Angular?

Question

Мне нужно получить отзывчивую страницу, как показано ниже на картинке.

Я создал нечто подобное. Но моя мат-карта обрезается или прячется в плитке, когда я уменьшаю размер браузера. Мне удалось создать это:

Где я иду не так? Ниже приведен мой код.

header.component. html

<div fxLayout="column" fxLayout.xs="column">

<mat-toolbar color="primary" >
    <button mat-button (click)="side_nav.open()">

        <mat-icon>menu</mat-icon>
    </button>
    <img src="../assets/weather_images/logo.png" style="width: 35px;">&nbsp;&nbsp;&nbsp;&nbsp;
    <span> Minimus </span>
    <span class="header_text"></span>
    <span>TODAY</span>
    <span class="header_text"></span>
    <span>light</span>&nbsp;&nbsp;&nbsp;&nbsp;
    <mat-slide-toggle [checked]="isDarkTheme | async" (change)="toggleDarkTheme($event.checked)"></mat-slide-toggle>&nbsp;&nbsp;&nbsp;&nbsp;
    <span>dark</span>
</mat-toolbar>
<mat-sidenav-container [ngClass]="{'dark-theme': isDarkTheme | async}" > 
    <mat-sidenav #side_nav style="height: 100%;width: 200px;">
        <br><br><div class="m"><span routerLink='' (click)="side_nav.close();" > Home </span></div><br><br><br>
        <div class="m"><span routerLink='/search-cities' (click)="side_nav.close();">Add City</span></div>
    </mat-sidenav>

    <mat-sidenav-content><br>
         <div [@fade] = "prepareRoute(o)"  [@flyInOut] =  "prepareRoute(o)">
            <router-outlet #o="outlet"></router-outlet>
          </div>     

    </mat-sidenav-content>

</mat-sidenav-container>
</div>

addciyt .component. html

<div>
    <mat-grid-list [cols]="breakpoint" (window:resize)="onResize($event)" gutterSize="30px" [ngClass]="{'dark-theme': isDarkTheme | async}">   
        <mat-grid-tile>
          <mat-card class="card_style" [ngClass]="{'dark-theme': isDarkTheme | async}" routerLink="/search-cities" @slideInOut>
                <mat-card-title class="card_title" [ngClass]="{'dark-theme': isDarkTheme | async}">ADD CITY</mat-card-title><br>

                <img src="../assets/weather_images/plus.png" alt="Plus image" width="150px" class="image_style">
                <img mat-card-image src="../assets/weather_images/1.png" height="260px">

            </mat-card>
        </mat-grid-tile>
  <mat-grid-tile *ngFor = "let v of value">
    <mat-card class="card_style" [routerLink]="['/details',v.city_name]" @fade>
        <mat-card-title class="card_title">
         {{value ? (v.city_name).toUpperCase() : ''}}
        </mat-card-title><br>
        <div *ngIf = "v.des === 'Clouds'" style="text-align: center;">
            <img src= "../assets/weather_images/cloudy.png" alt="cloudy" class="image">
            </div>
        <div *ngIf = "v.des === 'Rain'" style="text-align: center;">
            <img src= "../assets/weather_images/raining.png" alt="raining" class="image">
        </div>
        <div *ngIf = "v.des === 'Clear'" style="text-align: center;">
            <img src= "../assets/weather_images/sunny.png" alt="clear" class="image">
        </div>
        <div *ngIf = "v.des === 'Strom'" style="text-align: center;">
            <img src= "../assets/weather_images/strom.png" alt="strom" class="image">
        </div>
        <div *ngIf = "v.des === 'Snow'" style="text-align: center;">
            <img src= "../assets/weather_images/snowing.png" alt="strom" class="image">
        </div>
        <mat-card-content>
           <div>
            <p class="temp">{{value ? (v.temp - 273.15).toFixed(2) : ''}}&#8451;</p>
            </div>
            <p class="main">{{value ? (v.des).toUpperCase() : ''}}</p>
            <p style="margin-left: 35px; font-size: 16px;">Temp_min &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Temp_max</p>
            <p class="temp_min">{{value ? (v.temp_min - 273.15).toFixed(2) : ''}}&#8451;<span class="temp_max">{{value ? (v.temp_max - 273.15).toFixed(2) : ''}}&#8451;</span></p>
    </mat-card-content>
    </mat-card>
  </mat-grid-tile> 
</mat-grid-list>    
</div>

addcity.component.ts

import { Component, OnInit } from "@angular/core";
import { Observable } from "rxjs";
import { ThemeService } from "../services/theme.service";
import { WeatherService } from "../services/weather.service";

import { AngularFireDatabase } from "angularfire2/database";
import { slideInOut, fade } from "../animation";
import { FormControl } from '@angular/forms';
import { map, startWith } from 'rxjs/operators';


@Component({
  selector: "app-addcity",
  templateUrl: "./addcity.component.html",
  styleUrls: ["./addcity.component.scss"],
  animations: [
    slideInOut,
    fade
  ]
})
export class AddcityComponent implements OnInit {

  value: Array<any> = [];
  cities: Array<any>;
  isDarkTheme: Observable<boolean>;

  myControl = new FormControl();
  options: string[] = ['One', 'Two', 'Three'];
  filteredOptions: Observable<string[]>;
  control = new FormControl();
  streets: string[] = ['Champs-Élysées', 'Lombard Street', 'Abbey Road', 'Fifth Avenue', 's','d','f','y','u','h','l'];
  filteredStreets: Observable<string[]>;
  name = '';
  breakpoint:number;

  constructor(
    private themeService: ThemeService,
    private db: AngularFireDatabase,
    private weatherService: WeatherService
  ) {
    db.list("/user/cities")
      .valueChanges()
      .subscribe((cities) => {
        this.cities = cities;
        for (let c of cities) {
          this.weatherService.getcities(c['name']).subscribe(value => {
            const temp = value["main"].temp;
            const temp_min = value["main"].temp_min;
            const temp_max = value["main"].temp_max;
            const des = value["weather"][0].main;
            const city_name = c['name'];
            const a = {
              temp,
              temp_min,
              temp_max,
              des,
              city_name
            };
            this.value.push(a); 
          });
        }
      });
      console.log(this.name);

  }

  ngOnInit() {
    this.isDarkTheme = this.themeService.isDarkTheme;
    this.breakpoint = (window.innerWidth <= 400) ? 1 : 2;

  }

  onResize(event) {
    this.breakpoint = (event.target.innerWidth <= 400) ? 1 : 2;
  }
}

Я много пробовал, но ничего не получается.

Answer 1

@ DHEERAJ, чтобы сделать вашу страницу отзывчивой, вы можете использовать различные CSS методы, вы также можете использовать @angular/flex-layout в сочетании с Angular Материал

Найти здесь Подробнее @ angular / flex-Layout и FlexLayout Примеры