Чтобы установить разную ширину для mat-grid-tile в компоненте mat-grid-list

Question

Я использую <mat-grid-list> в моем проекте, как показано ниже кода

HTML

<mat-grid-list cols="2" [cols]="breakpoint" rowHeight="240px"  (window:resize)="onResize($event)">
     <mat-grid-tile>
           1
     </mat-grid-tile>
     <mat-grid-tile>
           2
     </mat-grid-tile>
<mat-grid-list>

TS

 import {Component, OnInit, VERSION, ViewChild } from '@angular/core';

 export class CustomersComponent implements OnInit {
     public ngVersion: string = VERSION.full;
     public matVersion: string = '5.1.0'; 
     public breakpoint: number; 

     ngOnInit() {
       this.breakpoint = (window.innerWidth <= 600) ? 1 : 2;
     }

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

  }

Как я могу установить сначала <mat-grid-tile> width на 40% и второй <mat-grid-tile> width на 60% . Попробуйте answer тоже, пока нет результат. Вот ссылка stackblitz

Answer 1

Попробуй так:

DEMO

<mat-grid-list [cols]="breakpoint" (window:resize)="onResize($event)">


<mat-grid-tile [class.fullWidth]="breakpoint == 1" class="g1">
    Grid 1
</mat-grid-tile>

<mat-grid-tile [class.fullWidth]="breakpoint == 1" class="g2">
    Grid 2
</mat-grid-tile>

CSS:

.g1{
  width: 40% !important ;
  background-color: red;
}
.g2{
  width:60% !important;
  background-color: blue;

}

.fullWidth{
  width: 50% !important ;
}

TS:

breakpoint: number;
  constructor() { }

  ngOnInit() {
    this.breakpoint = (window.innerWidth <= 400) ? 1 : 3;
  }

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