Creating Grid of Cards Dynamically using Angular Material 2

Question

Hi I am new to Angular Material and I want to create grid of cards of the form r rows c columns (r X c) dynamically. e.g If I have 5 u

Answer 1

Well I had a similar task with creating a list of products to be displayed / filtered dynamically.

First I would suggest to create a new component which is being responsible with displaying the card.

/* Card component */


  
    {{cardTitle}}
  

  

  
    

      {{cardShortDescription}}
    
  

  
    ADAUGA IN COS
    DETALII
  

Then create a card-deck which holds the deck you want to display.

Now in order to be consistent with the number of products you want to show, and also to keep in mind that you might want to have some pagination and also cards to be responsive, you have to display a number of cards which are divided by 2, 3, 4, 6 (12 or 24) - used for cases when the card deck is responsive and you still want to have all rows displayed with cards.

/*Card deck component */ 
    

       

         
       

      

        
        
      
  
 

Card 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 here is in CSS. The card deck container has a max-width of 1200px and depending on the width of each card, it will fill up the container with a maximum of 4 cards (4 cards * 300px = 1200px : one row). If the container goes smaller, the card item will go on next row (from the property of fxLayoutWrap).

I am going to post a plunker example soon. Hope this helps till then. p.s. Don't try to understand what those messages from products are saying :)

Plunker example https://plnkr.co/edit/egsNB7TLOI1HHzBgbTbP?p=preview (Use Google Chrome)

The items being displayed can be changed based on the interaction with a possible pagination component. But then you would have to keep all products/items in an array, and you would have another array with the products/items being displayed.

Hope this helps :).

Also don't forget about Angular Flex project:

• https://github.com/angular/flex-layout/wiki/Responsive-API
• https://github.com/angular/flex-layout/wiki/Declarative-API-Overview
• https://tburleson-layouts-demos.firebaseapp.com/#/responsive