[W8D3] (ArndtED) Adds mat-button-toggle to header country navigation

myApp/angular.json

@@ -24,6 +24,7 @@
               "src/assets"
             ],
             "styles": [
+              "./node_modules/@angular/material/prebuilt-themes/pink-bluegrey.css",
               "src/styles.css"
             ],
             "scripts": []
@@ -87,6 +88,7 @@
               "src/assets"
             ],
             "styles": [
+              "./node_modules/@angular/material/prebuilt-themes/pink-bluegrey.css",
               "src/styles.css"
             ],
             "scripts": []

myApp/package-lock.json

@@ -9,10 +9,12 @@
       "version": "0.0.0",
       "dependencies": {
         "@angular/animations": "~11.2.6",
+        "@angular/cdk": "^11.2.10",
         "@angular/common": "~11.2.6",
         "@angular/compiler": "~11.2.6",
         "@angular/core": "~11.2.6",
         "@angular/forms": "~11.2.6",
+        "@angular/material": "^11.2.10",
         "@angular/platform-browser": "~11.2.6",
         "@angular/platform-browser-dynamic": "~11.2.6",
         "@angular/router": "~11.2.6",
@@ -360,6 +362,27 @@
         "@angular/core": "11.2.10"
       }
     },
+    "node_modules/@angular/cdk": {
+      "version": "11.2.10",
+      "resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-11.2.10.tgz",
+      "integrity": "sha512-Cq1dTQDGcqfB2ks8q3q4HPf7kEXU3FCB/OC5XYGMhs8tUyFTabhmXAcfkiBA4YO8YPWRc8FKrJsE1q4nV8vPKQ==",
+      "dependencies": {
+        "tslib": "^2.0.0"
+      },
+      "optionalDependencies": {
+        "parse5": "^5.0.0"
+      },
+      "peerDependencies": {
+        "@angular/common": "^11.0.0 || ^12.0.0-0",
+        "@angular/core": "^11.0.0 || ^12.0.0-0"
+      }
+    },
+    "node_modules/@angular/cdk/node_modules/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
+    },
     "node_modules/@angular/cli": {
       "version": "11.2.9",
       "resolved": "https://registry.npmjs.org/@angular/cli/-/cli-11.2.9.tgz",
@@ -583,6 +606,21 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/@angular/material": {
+      "version": "11.2.10",
+      "resolved": "https://registry.npmjs.org/@angular/material/-/material-11.2.10.tgz",
+      "integrity": "sha512-itylLtTloyCrmtotccVzplso7DGoiFdN91ud2sopGacTpfKVkw4tO5nIWRGWDmuu3dvHCqGo3h6EoZN0l9G+Wg==",
+      "dependencies": {
+        "tslib": "^2.0.0"
+      },
+      "peerDependencies": {
+        "@angular/animations": "^11.0.0 || ^12.0.0-0",
+        "@angular/cdk": "11.2.10",
+        "@angular/common": "^11.0.0 || ^12.0.0-0",
+        "@angular/core": "^11.0.0 || ^12.0.0-0",
+        "@angular/forms": "^11.0.0 || ^12.0.0-0"
+      }
+    },
     "node_modules/@angular/platform-browser": {
       "version": "11.2.10",
       "resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-11.2.10.tgz",
@@ -19210,6 +19248,23 @@
         "tslib": "^2.0.0"
       }
     },
+    "@angular/cdk": {
+      "version": "11.2.10",
+      "resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-11.2.10.tgz",
+      "integrity": "sha512-Cq1dTQDGcqfB2ks8q3q4HPf7kEXU3FCB/OC5XYGMhs8tUyFTabhmXAcfkiBA4YO8YPWRc8FKrJsE1q4nV8vPKQ==",
+      "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": "11.2.9",
       "resolved": "https://registry.npmjs.org/@angular/cli/-/cli-11.2.9.tgz",
@@ -19368,6 +19423,14 @@
         }
       }
     },
+    "@angular/material": {
+      "version": "11.2.10",
+      "resolved": "https://registry.npmjs.org/@angular/material/-/material-11.2.10.tgz",
+      "integrity": "sha512-itylLtTloyCrmtotccVzplso7DGoiFdN91ud2sopGacTpfKVkw4tO5nIWRGWDmuu3dvHCqGo3h6EoZN0l9G+Wg==",
+      "requires": {
+        "tslib": "^2.0.0"
+      }
+    },
     "@angular/platform-browser": {
       "version": "11.2.10",
       "resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-11.2.10.tgz",

myApp/package.json

@@ -12,10 +12,12 @@
   "private": true,
   "dependencies": {
     "@angular/animations": "~11.2.6",
+    "@angular/cdk": "^11.2.10",
     "@angular/common": "~11.2.6",
     "@angular/compiler": "~11.2.6",
     "@angular/core": "~11.2.6",
     "@angular/forms": "~11.2.6",
+    "@angular/material": "^11.2.10",
     "@angular/platform-browser": "~11.2.6",
     "@angular/platform-browser-dynamic": "~11.2.6",
     "@angular/router": "~11.2.6",

myApp/src/app/app.module.ts

@@ -13,6 +13,8 @@ import { SpainComponent } from './spain/spain.component';
 import { GreeceComponent } from './greece/greece.component';
 import { AccountComponent } from './account/account.component';
 import { ContactUsComponent } from './contact-us/contact-us.component';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { MatButtonToggleModule } from '@angular/material/button-toggle';
 
 @NgModule({
   declarations: [
@@ -27,11 +29,13 @@ import { ContactUsComponent } from './contact-us/contact-us.component';
     ContactUsComponent
   ],
   imports: [
-    BrowserModule,
     AppRoutingModule,
+    BrowserAnimationsModule,
+    BrowserModule,
     FormsModule,
-    ReactiveFormsModule,
+    MatButtonToggleModule,
     NgbModule,
+    ReactiveFormsModule,
   ],
   providers: [],
   bootstrap: [AppComponent]

myApp/src/app/header/header.component.css

@@ -20,4 +20,10 @@
     position:absolute;
     right:10px;
     margin-top: 30px;
-}
\ No newline at end of file
+}
+mat-button-toggle-group {
+    margin-left: 20px;
+}
+mat-button-toggle {
+    width: 24.9%;
+}

myApp/src/app/header/header.component.html

 <div class='header'>
-    <div class='btnMenu'>
-        <button [routerLink]="['/england']">England</button>
-        <button [routerLink]="['/france']">France</button>
-        <button [routerLink]="['/greece']">Greece</button>
-        <button [routerLink]="['/spain']">Spain</button>
-    </div>
+    <mat-button-toggle-group class="row">
+        <mat-button-toggle value="England" class="col-sm" [routerLink]="['/england']">England</mat-button-toggle>
+        <mat-button-toggle value="France" class="col-sm" [routerLink]="['/france']">France</mat-button-toggle>
+        <mat-button-toggle value="Greece" class="col-sm" [routerLink]="['/greece']">Greece</mat-button-toggle>
+        <mat-button-toggle value="Spain" class="col-sm" [routerLink]="['/spain']">Spain</mat-button-toggle>
+    </mat-button-toggle-group>
     <span class='account'>
         <i class="fa fa-user" [routerLink]="['/account']"></i>
     </span>    

myApp/src/app/header/header.component.ts

 import { Component, OnInit } from '@angular/core';
+import {MatButtonToggleModule} from '@angular/material/button-toggle';
 
 @Component({
   selector: 'header',

myApp/src/index.html

@@ -8,8 +8,11 @@
   <link rel="icon" type="image/x-icon" href="favicon.ico">
   <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.12.1/css/all.css" crossorigin="anonymous">
   <link  rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css"  crossorigin="anonymous">
+  <link rel="preconnect" href="https://fonts.gstatic.com">
+  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
 </head>
-<body>
+<body class="mat-typography">
   <app-root></app-root>
 </body>
 </html>

myApp/src/styles.css

@@ -3,4 +3,6 @@
     height: 350px;
     width: 350px;
     padding-left: 5px;
-}
\ No newline at end of file
+}
+html, body { height: 100%; }
+body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }