Exploring Angular8 Material: Grid Layout with Headers and Tiles
Currently, I am delving into the workings of the grid system within Angular Material. I am dynamically fetching components and organizing them within a grid. While the grid list and tiles are functioning as expected, there seems to be an issue with the content within the tiles, particularly the mat-figure section. It appears as though they are not fully acknowledging their placement within the tiles.
For instance, when the page is resized, the grid tiles adapt responsively and resize accordingly, but the content inside the tiles seems to overflow their boundaries. Additionally, the font sizes do not adjust as expected. While I could potentially address this with CSS, I am keen on understanding why the grid-list functionality is not working as intended.
I have included some screenshots for reference. One depicts the grid with a smaller screen resolution, showcasing the font size issue, and the other illustrates the rendering in the console.
https://i.sstatic.net/KyLZj.png
import {Component, OnInit} from '@angular/core';
export interface ITile {
color: string;
cols: number;
headerText: string;
rows: number;
text: string;
componentName: string;
}
@Component({
selector: 'app-forms',
templateUrl: 'forms.component.html',
styleUrls: ['forms.component.scss']
})
export class FormsComponent implements OnInit {
tiles: Array<ITile>
setComponents() {
this.tiles = new Array<ITile>
let components = [];
components.push('autocomplete');
components.push('checkbox');
components.push('datepicker');
components.push('formfield');
components.push('input');
components.push('radiobutton');
components.push('select');
components.push('slider');
components.push('slidetoggle');
console.log(components);
components.forEach(component => {
if (component === 'autocomplete') {
const headerText = 'Auto Complete';
this.setTile('#ccc', 4, headerText, 'example', 1, component);
}
if (component === 'checkbox') {
const headerText = 'Checkbox';
this.setTile('#ccc', 4, headerText, 'example', 1, component);
}
// Add more conditions for other components
});
}
setTile(color: string, cols: number, headerText: string, text: string, rows: number, componentName: string) {
const tile = {
color,
cols,
headerText,
text,
rows,
componentName
};
this.tiles.push(tile);
console.log(JSON.stringify(this.tiles));
}
ngOnInit(): void {
this.setComponents();
}
}<mat-grid-list cols="4" rowHeight="1:1" gutterSize="55px">
<mat-grid-tile class="grid-tile"
[colspan]="2"
[rowspan]="1"
*ngFor="let tile of tiles"
[colspan]="tile.cols"
[rowspan]="tile.rows"
[style.background]="tile.color">
{{tile.text}}
<app-checkbox *ngIf="tile.componentName === 'checkbox'"></app-checkbox>
<app-autocomplete *ngIf="tile.componentName === 'autocomplete'"></app-autocomplete>
<app-checkbox *ngIf="tile.componentName === 'checkbox'"></app-checkbox>
<app-datepicker *ngIf="tile.componentName === 'datepicker'"></app-datepicker>
<app-formfield *ngIf="tile.componentName === 'formfield'"></app-formfield>
<app-input *ngIf="tile.componentName === 'input'"></app-input>
<app-radiobutton *ngIf="tile.componentName ==='radiobutton'"></app-radiobutton>
<app-select *ngIf="tile.componentName === 'select'"></app-select>
<app-slider *ngIf="tile.componentName ==='slider'"></app-slider>
<app-sidetoggle *ngIf="tile.componentName === 'slidetoggle'"></app-sidetoggle>
<div style="width: 230px;"></div>
<mat-grid-tile-header>
<h3> {{tile.headerText}} </h3>
</mat-grid-tile-header>
</mat-grid-tile>
</mat-grid-list>