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.

2

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>

A simple stackblitz

1

Your Answer

Sign up or log in

Sign up using Google Sign up using Facebook Sign up using Email and Password Submit

Post as a guest

Post Your Answer Discard

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.