Add date to clock module

angular.json

@@ -24,7 +24,6 @@
               "src/assets"
             ],
             "styles": [
-              "./node_modules/@angular/material/prebuilt-themes/purple-green.css",
               "src/styles.css"
             ],
             "scripts": []
@@ -124,4 +123,4 @@
     }
   },
   "defaultProject": "angular-dashboard"
-}
+}

src/app/app.component.css

@@ -1,3 +1,13 @@
+@import "~@angular/material/prebuilt-themes/purple-green.css";
+
 mat-sidenav-container {
   height: 100%;
 }
+
+mat-card-content {
+  text-align: center;
+}
+
+.mat-card {
+  background-color: pink;
+}

src/app/app.module.ts

@@ -1,5 +1,5 @@
 import {BrowserModule} from '@angular/platform-browser';
-import {NgModule} from '@angular/core';
+import {LOCALE_ID, NgModule} from '@angular/core';
 import {AppComponent} from './app.component';
 import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
 import {ClockComponent} from './clock/clock.component';
@@ -7,11 +7,11 @@ import {LayoutModule} from '@angular/cdk/layout';
 import {MatToolbarModule} from '@angular/material/toolbar';
 import {MatSidenavModule} from '@angular/material/sidenav';
 import {MatCardModule} from '@angular/material/card';
-import { DashboardComponent } from './dashboard/dashboard.component';
-import { MatGridListModule } from '@angular/material/grid-list';
-import { MatMenuModule } from '@angular/material/menu';
-import { MatIconModule } from '@angular/material/icon';
-import { MatButtonModule } from '@angular/material/button';
+import {DashboardComponent} from './dashboard/dashboard.component';
+import {MatGridListModule} from '@angular/material/grid-list';
+import {MatMenuModule} from '@angular/material/menu';
+import {MatIconModule} from '@angular/material/icon';
+import {MatButtonModule} from '@angular/material/button';
 
 @NgModule({
   declarations: [

src/app/clock/clock.component.css

@@ -1,15 +1,9 @@
-.dashboard-card {
-  position: absolute;
-  top: 15px;
-  left: 15px;
-  right: 15px;
-  bottom: 15px;
-}
-
-.dashboard-card-content {
-  text-align: center;
-}
+@import "../dashboard/card.css";
 
 .clock {
   font-size: 10rem;
 }
+
+.date {
+  font-size: 3rem;
+}

src/app/clock/clock.component.html

@@ -1,7 +1,10 @@
 <mat-card class="dashboard-card">
   <mat-card-content class="dashboard-card-content">
     <div class="clock">
-      {{hour}}:{{minute | number: '2.0-0'}}
+      {{time}}
+    </div>
+    <div class="date">
+      {{date}}
     </div>
   </mat-card-content>
 </mat-card>

src/app/clock/clock.component.ts

@@ -1,4 +1,5 @@
 import {Component, OnInit} from '@angular/core';
+import {formatDate} from '@angular/common';
 
 @Component({
   selector: 'app-clock',
@@ -6,8 +7,8 @@ import {Component, OnInit} from '@angular/core';
   styleUrls: ['./clock.component.css']
 })
 export class ClockComponent implements OnInit {
-  hour: number;
-  minute: number;
+  date: string;
+  time: string;
 
   constructor() {
   }
@@ -19,8 +20,8 @@ export class ClockComponent implements OnInit {
 
   private updateTime() {
     const date = new Date(Date.now());
-    this.hour = date.getHours();
-    this.minute = date.getMinutes();
+    this.date = formatDate(date, 'EEEE, d LLLL yyyy', 'en');
+    this.time = formatDate(date, 'H:mm', 'en');
   }
 
   private interval() {

src/app/dashboard/card.css

@@ -0,0 +1,11 @@
+.dashboard-card {
+  position: absolute;
+  top: 15px;
+  left: 15px;
+  right: 15px;
+  bottom: 15px;
+}
+
+.dashboard-card-content {
+  text-align: center;
+}

src/app/dashboard/dashboard.component.css

@@ -1,21 +1,3 @@
 .grid-container {
   margin: 20px;
 }
-
-.dashboard-card {
-  position: absolute;
-  top: 15px;
-  left: 15px;
-  right: 15px;
-  bottom: 15px;
-}
-
-.more-button {
-  position: absolute;
-  top: 5px;
-  right: 10px;
-}
-
-.dashboard-card-content {
-  text-align: center;
-}