title: How to achieve responsive api in Angular?
body: <p>I need to achieve the responsive page as shown below in the image.</p>
  
  <p><img src="https://i.stack.imgur.com/GwSad.png" alt="Image"></p>
  
  <p>I have created something like this. But my mat-card gets cut or hidden in the tile , when I reduce the browser size. I managed to create this:</p>
  
  <p><img src="https://i.stack.imgur.com/GcAaG.png" alt="I managed to create this"></p>
  
  <p>Where am I going wrong? Below is my code.</p>
  
  <p>header.component.html</p>
  
  <pre><code>&lt;div fxLayout="column" fxLayout.xs="column"&gt;
  
  &lt;mat-toolbar color="primary" &gt;
      &lt;button mat-button (click)="side_nav.open()"&gt;
  
          &lt;mat-icon&gt;menu&lt;/mat-icon&gt;
      &lt;/button&gt;
      &lt;img src="../assets/weather_images/logo.png" style="width: 35px;"&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;
      &lt;span&gt; Minimus &lt;/span&gt;
      &lt;span class="header_text"&gt;&lt;/span&gt;
      &lt;span&gt;TODAY&lt;/span&gt;
      &lt;span class="header_text"&gt;&lt;/span&gt;
      &lt;span&gt;light&lt;/span&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;
      &lt;mat-slide-toggle [checked]="isDarkTheme | async" (change)="toggleDarkTheme($event.checked)"&gt;&lt;/mat-slide-toggle&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;
      &lt;span&gt;dark&lt;/span&gt;
  &lt;/mat-toolbar&gt;
  &lt;mat-sidenav-container [ngClass]="{'dark-theme': isDarkTheme | async}" &gt; 
      &lt;mat-sidenav #side_nav style="height: 100%;width: 200px;"&gt;
          &lt;br&gt;&lt;br&gt;&lt;div class="m"&gt;&lt;span routerLink='' (click)="side_nav.close();" &gt; Home &lt;/span&gt;&lt;/div&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;
          &lt;div class="m"&gt;&lt;span routerLink='/search-cities' (click)="side_nav.close();"&gt;Add City&lt;/span&gt;&lt;/div&gt;
      &lt;/mat-sidenav&gt;
  
      &lt;mat-sidenav-content&gt;&lt;br&gt;
           &lt;div [@fade] = "prepareRoute(o)"  [@flyInOut] =  "prepareRoute(o)"&gt;
              &lt;router-outlet #o="outlet"&gt;&lt;/router-outlet&gt;
            &lt;/div&gt;     
  
      &lt;/mat-sidenav-content&gt;
  
  &lt;/mat-sidenav-container&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>addciyt .component .html</p>
  
  <pre><code>&lt;div&gt;
      &lt;mat-grid-list [cols]="breakpoint" (window:resize)="onResize($event)" gutterSize="30px" [ngClass]="{'dark-theme': isDarkTheme | async}"&gt;   
          &lt;mat-grid-tile&gt;
            &lt;mat-card class="card_style" [ngClass]="{'dark-theme': isDarkTheme | async}" routerLink="/search-cities" @slideInOut&gt;
                  &lt;mat-card-title class="card_title" [ngClass]="{'dark-theme': isDarkTheme | async}"&gt;ADD CITY&lt;/mat-card-title&gt;&lt;br&gt;
  
                  &lt;img src="../assets/weather_images/plus.png" alt="Plus image" width="150px" class="image_style"&gt;
                  &lt;img mat-card-image src="../assets/weather_images/1.png" height="260px"&gt;
  
              &lt;/mat-card&gt;
          &lt;/mat-grid-tile&gt;
    &lt;mat-grid-tile *ngFor = "let v of value"&gt;
      &lt;mat-card class="card_style" [routerLink]="['/details',v.city_name]" @fade&gt;
          &lt;mat-card-title class="card_title"&gt;
           {{value ? (v.city_name).toUpperCase() : ''}}
          &lt;/mat-card-title&gt;&lt;br&gt;
          &lt;div *ngIf = "v.des === 'Clouds'" style="text-align: center;"&gt;
              &lt;img src= "../assets/weather_images/cloudy.png" alt="cloudy" class="image"&gt;
              &lt;/div&gt;
          &lt;div *ngIf = "v.des === 'Rain'" style="text-align: center;"&gt;
              &lt;img src= "../assets/weather_images/raining.png" alt="raining" class="image"&gt;
          &lt;/div&gt;
          &lt;div *ngIf = "v.des === 'Clear'" style="text-align: center;"&gt;
              &lt;img src= "../assets/weather_images/sunny.png" alt="clear" class="image"&gt;
          &lt;/div&gt;
          &lt;div *ngIf = "v.des === 'Strom'" style="text-align: center;"&gt;
              &lt;img src= "../assets/weather_images/strom.png" alt="strom" class="image"&gt;
          &lt;/div&gt;
          &lt;div *ngIf = "v.des === 'Snow'" style="text-align: center;"&gt;
              &lt;img src= "../assets/weather_images/snowing.png" alt="strom" class="image"&gt;
          &lt;/div&gt;
          &lt;mat-card-content&gt;
             &lt;div&gt;
              &lt;p class="temp"&gt;{{value ? (v.temp - 273.15).toFixed(2) : ''}}&amp;#8451;&lt;/p&gt;
              &lt;/div&gt;
              &lt;p class="main"&gt;{{value ? (v.des).toUpperCase() : ''}}&lt;/p&gt;
              &lt;p style="margin-left: 35px; font-size: 16px;"&gt;Temp_min &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;Temp_max&lt;/p&gt;
              &lt;p class="temp_min"&gt;{{value ? (v.temp_min - 273.15).toFixed(2) : ''}}&amp;#8451;&lt;span class="temp_max"&gt;{{value ? (v.temp_max - 273.15).toFixed(2) : ''}}&amp;#8451;&lt;/span&gt;&lt;/p&gt;
      &lt;/mat-card-content&gt;
      &lt;/mat-card&gt;
    &lt;/mat-grid-tile&gt; 
  &lt;/mat-grid-list&gt;    
  &lt;/div&gt;
  </code></pre>
  
  <p>addcity.component.ts</p>
  
  <pre><code>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&lt;any&gt; = [];
    cities: Array&lt;any&gt;;
    isDarkTheme: Observable&lt;boolean&gt;;
  
    myControl = new FormControl();
    options: string[] = ['One', 'Two', 'Three'];
    filteredOptions: Observable&lt;string[]&gt;;
    control = new FormControl();
    streets: string[] = ['Champs-Élysées', 'Lombard Street', 'Abbey Road', 'Fifth Avenue', 's','d','f','y','u','h','l'];
    filteredStreets: Observable&lt;string[]&gt;;
    name = '';
    breakpoint:number;
  
    constructor(
      private themeService: ThemeService,
      private db: AngularFireDatabase,
      private weatherService: WeatherService
    ) {
      db.list("/user/cities")
        .valueChanges()
        .subscribe((cities) =&gt; {
          this.cities = cities;
          for (let c of cities) {
            this.weatherService.getcities(c['name']).subscribe(value =&gt; {
              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 &lt;= 400) ? 1 : 2;
  
    }
  
    onResize(event) {
      this.breakpoint = (event.target.innerWidth &lt;= 400) ? 1 : 2;
    }
  }
  </code></pre>
  
  <p>I tried a lot but nothing seems to work.</p>