Layouts using a grid list

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

Figure 8.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 in login.component.ts.
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="mat-headline...