working

jeanbza · Feb 18, 2020 · c38e326 · c38e326
1 parent e3cb4b0
commit c38e326
Show file tree

Hide file tree

Showing 8 changed files with 44 additions and 7 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -12,6 +12,7 @@
   "private": true,
   "dependencies": {
     "@angular/animations": "~9.0.1",
+    "@angular/cdk": "^9.0.0",
     "@angular/common": "~9.0.1",
     "@angular/compiler": "~9.0.1",
     "@angular/core": "~9.0.1",

diff --git a/src/app/app.component.css b/src/app/app.component.css
@@ -1,3 +1,4 @@
-.yellow-thing {
-    background-color: yellow;
-}
+mat-spinner {
+    display: inline;
+    padding-right: 24px;
+}
diff --git a/src/app/app.component.html b/src/app/app.component.html
@@ -1,2 +1,11 @@
-<div class="yellow-thing">Hello world</div>
-<mat-icon aria-hidden="false" aria-label="Example home icon">home</mat-icon>
+<button mat-button (click)="onClickMe()">Change state</button>
+
+<button mat-button>
+    <ng-container *ngIf="loading">
+        <mat-icon>home</mat-icon>
+    </ng-container>
+    <ng-container *ngIf="!loading">
+        <mat-spinner [diameter]="15"></mat-spinner>
+    </ng-container>
+    <span class="space-left">Click me!</span>
+</button>
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
@@ -6,5 +6,9 @@ import { Component } from '@angular/core';
   styleUrls: ['./app.component.css']
 })
 export class AppComponent {
-  title = 'spinner';
+  loading = false;
+
+  onClickMe() {
+    this.loading = !this.loading;
+  }
 }
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
@@ -1,5 +1,7 @@
 import { BrowserModule } from '@angular/platform-browser';
-import {MatIconModule} from '@angular/material/icon';
+import { MatIconModule } from '@angular/material/icon';
+import { MatButtonModule } from '@angular/material/button';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import { NgModule } from '@angular/core';
 
 import { AppComponent } from './app.component';
@@ -11,6 +13,8 @@ import { AppComponent } from './app.component';
   imports: [
     BrowserModule,
     MatIconModule,
+    MatButtonModule,
+    MatProgressSpinnerModule,
   ],
   providers: [],
   bootstrap: [AppComponent]

diff --git a/src/index.html b/src/index.html
@@ -6,6 +6,7 @@
   <base href="/">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
+  <link href="https://fonts.googleapis.com/icon?family=Material+Icons&display=block" rel="stylesheet">
 </head>
 <body>
   <app-root></app-root>

diff --git a/src/styles.css b/src/styles.css
@@ -1 +1,2 @@
 /* You can add global styles to this file, and also import other style files */
+@import '~@angular/material/prebuilt-themes/deeppurple-amber.css';