Layouts using grid list

The Angular Flex Layout library is great for laying out content using CSS Flexbox. Angular Material provides another mechanism to lay out content by using CSS Grid with its Grid List functionality. A good way to demonstrate this functionality is by implementing a helpful list for fake login information in the LoginComponent, demonstrated here:

Figure 11.13: Login helper with the grid list

Implement your list as follows:

1. Start by defining a roles property that is an array of all the roles:

   src/app/login/login.component.ts 
   roles = Object.keys(Role)
   

2. Import MatExpansionModule and MatGridListModule into AppMaterialModule:
3. Implement a new mat-card-content below the existing one:

   src/app/login/login.component.html
   <div fxLayout="row" fxLayoutAlign="center">
     <mat-card fxFlex="400px">
       <mat-card-header>
         <mat-card-title>
           <div class...