Angular Material

src/app/app.module.ts

@@ -13,12 +13,8 @@ import { RouterModule, ExtraOptions } from '@angular/router';
 import { useHash } from '../flags';
 import { HeaderComponent } from './header/header.component';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { MatTableModule } from '@angular/material/table';
-import { MatPaginatorModule } from '@angular/material/paginator';
-import { MatSortModule } from '@angular/material/sort';
-import { MatInputModule } from '@angular/material/input';
-import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import { ListComponent } from './list/list.component';
+import { MaterialModule } from './material/material.module';
 
 const ROUTING_OPTIONS: ExtraOptions = {
   // preloadingStrategy: CustomPreloadingStrategy,
@@ -41,11 +37,7 @@ const ROUTING_OPTIONS: ExtraOptions = {
       },
     }),
     BrowserAnimationsModule,
-    MatInputModule,
-    MatTableModule,
-    MatPaginatorModule,
-    MatSortModule,
-    MatProgressSpinnerModule,
+    MaterialModule,
   ],
   declarations: [
     AppComponent,

src/app/header/header.component.html

@@ -1,13 +1,15 @@
-<div>
-  <img src="/assets/img/logo.png" />
-
-  <div *ngIf="name; then thenBlock; else elseBlock"></div>
-  <ng-template #thenBlock>
-    {{ name }}
-    <button class="btn btn-default" (click)="logout()">Logout</button>
-  </ng-template>
-  <ng-template #elseBlock>
-    <button class="btn btn-default" (click)="login()">Login</button>
-  </ng-template>
-
-</div>
+<mat-grid-list cols="4" rowHeight="4:1">
+  <mat-grid-tile colspan="3" rowspan="4">
+    <img width="100%" src="/assets/img/logo.png" />
+  </mat-grid-tile>
+  <mat-grid-tile colspan="1" rowspan="2">
+    <div *ngIf="name; then thenBlock; else elseBlock"></div>
+    <ng-template #thenBlock>
+      {{ name }}
+      <button mat-raised-button class="btn btn-default" (click)="logout()">Logout</button>
+    </ng-template>
+    <ng-template #elseBlock>
+      <button mat-raised-button class="btn btn-default" (click)="login()">Login</button>
+    </ng-template>
+  </mat-grid-tile>
+</mat-grid-list>

src/app/home/home.component.html

@@ -1,6 +1,14 @@
-<h3>Mis viajes</h3>
-<app-list *ngIf="logged" [displayedColumns]="displayedColumns" [url]="urlMyTravels"></app-list>
-<p *ngIf="!logged">Logueate para ver tus viajes</p>
+<mat-card>
+  <mat-card-title>Mis viajes</mat-card-title>
+  <app-list
+    *ngIf="logged"
+    [displayedColumns]="displayedColumns"
+    [url]="urlMyTravels"
+  ></app-list>
+  <mat-card-content *ngIf="!logged"
+    >Logueate para ver tus viajes</mat-card-content
+  >
+</mat-card>
 
 <h3>Viajes disponibles</h3>
 <app-list [displayedColumns]="displayedColumns" [url]="urlTravels"></app-list>

src/app/list/list.component.css

@@ -1,16 +1,9 @@
 
-.course {
+.list {
     text-align: center;
-    max-width: 390px;
     margin: 0 auto;
 }
 
-.course-thumbnail {
-    width: 150px;
-    margin: 20px auto 0 auto;
-    display: block;
-}
-
 .description-cell {
     text-align: left;
     margin: 10px auto;

src/app/list/list.component.html

@@ -1,4 +1,4 @@
-<div class="course">
+<div class="list">
   <mat-form-field>
     <input matInput placeholder="Search travel" #input />
   </mat-form-field>

src/app/material/material.module.ts

@@ -0,0 +1,39 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { MatGridListModule } from '@angular/material/grid-list';
+import { MatButtonModule } from '@angular/material/button';
+import { MatCardModule } from '@angular/material/card';
+import { MatTableModule } from '@angular/material/table';
+import { MatPaginatorModule } from '@angular/material/paginator';
+import { MatSortModule } from '@angular/material/sort';
+import { MatInputModule } from '@angular/material/input';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+
+
+@NgModule({
+  declarations: [],
+  imports: [
+    CommonModule,
+    MatGridListModule,
+    MatButtonModule,
+    MatCardModule,
+    MatInputModule,
+    MatTableModule,
+    MatPaginatorModule,
+    MatSortModule,
+    MatProgressSpinnerModule
+  ],
+  exports: [
+    CommonModule,
+    MatGridListModule,
+    MatButtonModule,
+    MatCardModule,
+    MatInputModule,
+    MatTableModule,
+    MatPaginatorModule,
+    MatSortModule,
+    MatProgressSpinnerModule
+  ]
+})
+export class MaterialModule { }