I'm learning the use of angular material for a real life application and right now I'm stuck.
So... I have a route localhost:4200/admin/home which obviously call the associated component, in this case AdminHomeComponent
AdminHomeComponent is a dashboard. To be clear, I'm not asking how to build a dashboard. I am looking for a specific aspect of the <mat-grid-list></mat-grid-list>. My idea of component is: every item of the dashboard is a component. So... todo, tasks, ecc.
I tryed to make something like that:
<mat-grid-list> <app-todo></app-todo> <app-tasks></app-tasks>
</mat-grid-list>In my conception has absolutely sense the component self-define his columns and rows.
But that doesn't works!
Otherwise, this, instead, works (but a bit non-sense to me):
<mat-grid-list ...> <mat-grid-tile> <mat-card> <mat-card-content> <app-todo></app-todo> </mat-card-content> </mat-card> </mat-grid-tile> (... another tiles)
</mat-grid-list>There's some way to use <mat-grid-list> where every <mat-grid-tile> be a specific component (as my first attempt)?
The component is rendered rightly, but with a <div> and <app-todo> childs between <mat-grid-list> and <mat-grid-tile>, what does it invisible, so I am pretty sure the problem is the strict css rule.
1 Answer
Juninho, The mat-grid-list need mat-grid-tile, but you can use as content of mat-grid-tile any thing
<mat-grid-list> <mat-grid-tile> <app-todo></app-todo> </mat-grid-tile> <mat-grid-tile> <app-tasks></app-tasks> </mat-grid-tile>
</mat-grid-list>
