Generating a grid of maps dynamically using Angular Material 2
Hi I'm new to Angular stuff and I want to dynamically create a grid from maps r
of c
column rows (r X c)
. for example if i have 5 users then it should create r=3
and c=2
as follows.
user1 user2
user3 user4
user5
I achieved this in the following way:
<md-grid-list cols="2" rowHeight="200px" gutterSize="10px">
<md-grid-tile class="divcls" *ngFor="let user1 of users">
<md-card fxLayoutWrap="wrap" fxLayout="column" fxFlex="90%" fxLayoutGap="16px">
<md-card-title>User : {{user1.name}}</md-card-title>
<md-card-content>{{user1.details}}</md-card-content>
<md-card-actions>
<button md-button>LIKE</button>
<button md-button>SHARE</button>
</md-card-actions>
</md-card>
</md-grid-tile>
</md-grid-list>
Is this the correct approach? Because when I try to resize the windows it will overlap with the map and grid cell. I checked on the internet but didn't find any clean approach with pure angular stuff. Please help me achieve this with a better approach than the one above.
source to share
Well, I had a similar task with generating a list of products for dynamic display / filtering.
First, I would suggest creating a new component that is responsible for displaying the map.
/* Card component */
<md-card>
<md-card-header>
<md-card-title class="md-card-title">{{cardTitle}}</md-card-title>
</md-card-header>
<img md-card-image [src]="cardImagePath">
<md-card-content>
<div class="card-text-content">
{{cardShortDescription}}
</div>
</md-card-content>
<md-card-actions fxLayout="row" fxLayoutAlign="end center">
<button md-button (click)="addProductToCart()">ADAUGA IN COS</button>
<button md-button (click)="openDialog()">DETALII</button>
</md-card-actions>
</md-card>
Next, create a card deck that contains the deck you want to display.
Now, to be in line with the number of products you want to display, and also to keep in mind that you might want some pages and maps to be responsive, you need to display multiple maps that are divided by 2, 3, 4, 6 (12 or 24) - Used for cases where the deck of cards is responsive and you still want all rows to be displayed with cards.
/*Card deck component */
<div fxLayout="row" fxFlex.md="70" fxLayoutWrap class="card-deck-container mat-elevation-z4">
<div fxFlex *ngFor="let product of productsDisplayed" class="card-item">
<app-card [ngStyle]="{'width':'300' + 'px'}" [product]="product"></app-card>
</div>
<div class="paginator mat-elevation-z4" *ngIf="productsDisplayed.length !== 0">
<md-paginator
[length]="paginatorSize"
[pageSize]="numberOfProductsDisplayedInPage"
[pageSizeOptions]="[12, 24]"
(page)="updateProductsDisplayedInPage($event)">
</md-paginator>
</div>
</div>
Cards deck component CSS
.card-deck-container {
width: 100%;
max-width: 1200px;
position: relative;
border-radius: 2px;
padding: 10px 10px 30px;
margin: 10px 10px 10px 10px;
background-color: #f5f5f5;
}
.card-item {
padding: 3px 3px 3px 3px;
}
The main thing is CSS. The card deck container has a maximum width of 1200 pixels and depending on the width of each card it fills the container with a maximum of four cards (4 cards * 300 pixels = 1200 pixels: one line). If the container shrinks, the map element will jump to the next line (from the fxLayoutWrap property).
I will post an example of a plunker shortly. Hope this helps before then. postscript Don't try to understand what these product posts say.
Example https://plnkr.co/edit/egsNB7TLOI1HHzBgbTbP?p=preview (use Google Chrome)The displayed items can be changed based on interaction with a possible pagination component. But then you have to store all the products / items in an array and you will have another array with the products / items displayed.
Hope this helps :).
Also don't forget about the Angular Flex project:
source to share