diff --git a/angular.json b/angular.json
index 2e4d2e0..4ae2455 100644
--- a/angular.json
+++ b/angular.json
@@ -28,6 +28,7 @@
"src/assets"
],
"styles": [
+ "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
"src/styles.scss"
],
"scripts": []
@@ -92,6 +93,7 @@
"src/assets"
],
"styles": [
+ "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
"src/styles.scss"
],
"scripts": []
diff --git a/package-lock.json b/package-lock.json
index 00fd969..9cf2bbf 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -160,6 +160,23 @@
"tslib": "^2.0.0"
}
},
+ "@angular/cdk": {
+ "version": "10.2.2",
+ "resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-10.2.2.tgz",
+ "integrity": "sha512-DVMnj7QY1prZblRjYfDeyEH79p1TDI0JGgg2D2BAWwzMoPKCgVCqy1uRuvi+WNhYoDR3QJJJ8tXLKucUoShuIw==",
+ "requires": {
+ "parse5": "^5.0.0",
+ "tslib": "^2.0.0"
+ },
+ "dependencies": {
+ "parse5": {
+ "version": "5.1.1",
+ "resolved": "https://registry.npmjs.org/parse5/-/parse5-5.1.1.tgz",
+ "integrity": "sha512-ugq4DFI0Ptb+WWjAdOK16+u/nHfiIrcE+sh8kZMaM0WllQKLI9rOUq6c2b7cwPkXdzfQESqvoqK6ug7U/Yyzug==",
+ "optional": true
+ }
+ }
+ },
"@angular/cli": {
"version": "10.0.8",
"resolved": "https://registry.npmjs.org/@angular/cli/-/cli-10.0.8.tgz",
@@ -426,6 +443,14 @@
"tslib": "^2.0.0"
}
},
+ "@angular/material": {
+ "version": "10.2.2",
+ "resolved": "https://registry.npmjs.org/@angular/material/-/material-10.2.2.tgz",
+ "integrity": "sha512-xRt8FsjY/MdC/dMBhitCXmOfXo4uhzLZ+kBqkKwY8gBsJ7FjhJIPbe/kRPBuzvVkVphrEfi/pMeDOge8v5ETbA==",
+ "requires": {
+ "tslib": "^2.0.0"
+ }
+ },
"@angular/platform-browser": {
"version": "10.0.14",
"resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-10.0.14.tgz",
diff --git a/package.json b/package.json
index 3179ee1..fd12fa2 100644
--- a/package.json
+++ b/package.json
@@ -12,10 +12,12 @@
"private": true,
"dependencies": {
"@angular/animations": "~10.0.3",
+ "@angular/cdk": "^10.2.2",
"@angular/common": "~10.0.3",
"@angular/compiler": "~10.0.3",
"@angular/core": "~10.0.3",
"@angular/forms": "~10.0.3",
+ "@angular/material": "^10.2.2",
"@angular/platform-browser": "~10.0.3",
"@angular/platform-browser-dynamic": "~10.0.3",
"@angular/router": "~10.0.3",
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index f657163..de5e54d 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -2,13 +2,15 @@ import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
@NgModule({
declarations: [
AppComponent
],
imports: [
- BrowserModule
+ BrowserModule,
+ BrowserAnimationsModule
],
providers: [],
bootstrap: [AppComponent]
diff --git a/src/index.html b/src/index.html
index a441288..d7278b5 100644
--- a/src/index.html
+++ b/src/index.html
@@ -6,8 +6,10 @@
+
+
-
+
diff --git a/src/styles.scss b/src/styles.scss
index 90d4ee0..7e7239a 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -1 +1,4 @@
/* You can add global styles to this file, and also import other style files */
+
+html, body { height: 100%; }
+body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }