Adding Styling

Author: richwolf817

angular.json

@@ -27,6 +27,7 @@
               }
             ],
             "styles": [
+              "@angular/material/prebuilt-themes/azure-blue.css",
               "src/styles.css"
             ],
             "scripts": []
@@ -85,6 +86,7 @@
               }
             ],
             "styles": [
+              "@angular/material/prebuilt-themes/azure-blue.css",
               "src/styles.css"
             ],
             "scripts": []

package-lock.json

@@ -11,10 +11,12 @@
   "private": true,
   "dependencies": {
     "@angular/animations": "^18.0.0",
+    "@angular/cdk": "^18.0.5",
     "@angular/common": "^18.0.0",
     "@angular/compiler": "^18.0.0",
     "@angular/core": "^18.0.0",
     "@angular/forms": "^18.0.0",
+    "@angular/material": "^18.0.5",
     "@angular/platform-browser": "^18.0.0",
     "@angular/platform-browser-dynamic": "^18.0.0",
     "@angular/router": "^18.0.0",
@@ -35,4 +37,4 @@
     "karma-jasmine-html-reporter": "~2.1.0",
     "typescript": "~5.4.2"
   }
-}
+}

package.json

@@ -0,0 +1,29 @@
+.mat-toolbar {
+  background-color: #007fff; /* Replace with your desired color */
+}
+
+.mat-toolbar a {
+  color: #ffffff; /* Ensures the text color is white or another light color for contrast */
+  margin-right: 20px; /* Adds space between the links */
+  text-transform: uppercase; /* Optional: transforms text to uppercase */
+  font-size: 16px; /* Adjust font size as needed */
+  text-decoration: none; /* Removes underline from the links */
+}
+
+.mat-toolbar a:hover {
+  color: black; /* Adds a hover effect with a different color */
+}
+
+.mat-toolbar {
+  padding: 10px 20px; /* Adds 10px padding vertically and 20px horizontally */
+}
+
+/* styles.css or your component's css file */
+.active {
+  font-weight: bold;
+  color: #ffffff; /* Adjust the color based on your theme */
+}
+
+.content-wrapper {
+  padding: 20px; /* Adjust the padding as needed */
+}

src/app/app.component.css

@@ -1,23 +1,25 @@
-<h1>Angular Router Sample</h1>
+<!-- app.component.html or your component's template -->
 
-<nav>
+<mat-toolbar color="primary">
   <a
-    class="button"
+    mat-button
     routerLink="/notes"
-    routerLinkActive="activebutton"
-    ariaCurrentWhenActive="page"
+    routerLinkActive="active"
+    [routerLinkActiveOptions]="{ exact: true }"
   >
     Notes
   </a>
-  |
   <a
-    class="button"
+    mat-button
     routerLink="/test"
-    routerLinkActive="activebutton"
-    ariaCurrentWhenActive="page"
+    routerLinkActive="active"
+    [routerLinkActiveOptions]="{ exact: true }"
   >
     Test
   </a>
-</nav>
+</mat-toolbar>
 
-<router-outlet />
+<!-- Wrapper div for styling purposes -->
+<div class="content-wrapper">
+  <router-outlet></router-outlet>
+</div>

src/app/app.component.html

@@ -6,11 +6,18 @@ import {
   RouterLink,
   RouterLinkActive,
 } from '@angular/router';
+import { MatToolbarModule } from '@angular/material/toolbar';
 
 @Component({
   selector: 'app-root',
   standalone: true,
-  imports: [CommonModule, RouterOutlet, RouterLink, RouterLinkActive],
+  imports: [
+    CommonModule,
+    RouterOutlet,
+    RouterLink,
+    RouterLinkActive,
+    MatToolbarModule,
+  ],
   templateUrl: './app.component.html',
   styleUrl: './app.component.css',
 })

src/app/app.component.ts

@@ -2,11 +2,12 @@ import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
 import { provideRouter } from '@angular/router';
 import { provideHttpClient } from '@angular/common/http';
 import { routes } from './app.routes';
+import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
 
 export const appConfig: ApplicationConfig = {
   providers: [
     provideZoneChangeDetection({ eventCoalescing: true }),
     provideRouter(routes),
-    provideHttpClient(),
+    provideHttpClient(), provideAnimationsAsync(),
   ],
 };

src/app/app.config.ts

@@ -0,0 +1,18 @@
+.mat-card {
+  margin: 20px;
+}
+
+.mat-form-field {
+  width: 100%; /* Full width for the input field */
+}
+
+/* Additional styles for layout */
+button {
+  margin-left: 10px; /* Ensures spacing between buttons */
+}
+
+.mat-card-actions {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}

src/app/notes/notes.component.css

@@ -1,11 +1,33 @@
-<h3>Notes</h3>
-<ul>
-  <li *ngFor="let note of notes">
-    {{ note.content }}
-    <button (click)="deleteNote(note.id)">Delete</button>
-    <button (click)="prepareUpdate(note)">Update to 'Updated Note'</button>
-  </li>
-</ul>
+<!-- Main Application Title -->
+<h1>Notes Application</h1>
 
-<input type="text" [(ngModel)]="newNoteContent" />
-<button (click)="addNote()">Add Note</button>
+<!-- Add Notes Section -->
+
+<div style="display: flex; align-items: center">
+  <mat-form-field appearance="fill" style="flex: 1">
+    <mat-label>Add new note</mat-label>
+    <input matInput [(ngModel)]="newNoteContent" />
+  </mat-form-field>
+  <button mat-flat-button (click)="addNote()" style="margin: 8px">
+    Add Note
+  </button>
+</div>
+
+<!-- Notes List -->
+<div *ngFor="let note of notes" style="margin-bottom: 20px">
+  <mat-card>
+    <mat-card-content
+      style="display: flex; justify-content: space-between; align-items: center"
+    >
+      <span>{{ note.content }}</span>
+      <div>
+        <button mat-button color="warn" (click)="deleteNote(note.id)">
+          Delete
+        </button>
+        <button mat-button color="primary" (click)="prepareUpdate(note)">
+          Update
+        </button>
+      </div>
+    </mat-card-content>
+  </mat-card>
+</div>

src/app/notes/notes.component.html

@@ -3,6 +3,12 @@ import { FormsModule } from '@angular/forms';
 import { NgFor } from '@angular/common';
 import { ApiService } from '../api.service';
 
+import { MatListModule } from '@angular/material/list';
+import { MatButtonModule } from '@angular/material/button';
+import { MatInputModule } from '@angular/material/input';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatCardModule } from '@angular/material/card';
+
 export interface Note {
   id: number;
   content: string;
@@ -13,7 +19,15 @@ export interface Note {
   templateUrl: './notes.component.html',
   styleUrls: ['./notes.component.css'],
   standalone: true,
-  imports: [NgFor, FormsModule], // Include FormsModule here
+  imports: [
+    NgFor,
+    FormsModule,
+    MatListModule,
+    MatButtonModule,
+    MatInputModule,
+    MatFormFieldModule,
+    MatCardModule,
+  ],
 })
 export class NotesComponent implements OnInit {
   notes: Note[] = [];