⚡ Angular Material Notepad

• Angular used with Material & Tailwind components to display and add notes in a table
• Note: to open web links in a new window use: ctrl+click on link

📄 Table of contents

• ⚡ Angular Material Notepad
  • 📄 Table of contents
  • 📚 General info
  • 📶 Technologies
  • 📷 Screenshots
  • 💾 Setup
  • 💻 Code Examples
  • 🆒 Features
  • 📋 Status & To-Do List
  • 👏 Inspiration
  • 📁 License
  • ✉️ Contact

📚 General info

• Simple Angular Material form with error-checking.
• Created notes are added to a Mat-Expansion Panel.
• Refreshing display loses added data
• Notes can be deleted (the edit button has no function linked to it so it does nothing)

📶 Technologies

• Angular framework v16
• Angular Material v16
• Angular Material Icons

📷 Screenshots

💾 Setup

• npm i to install dependencies
• ng serve for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files

💻 Code Examples

• notes-service.ts function to add note to existing notes array. Uses ?? nullish coalescing operator to create an id basd on the array length or use a fallback id of 1 (array empty)

  addNote(title: string, description: string, body: string) {
    const lastId: number = this.notes[this.notes.length - 1]?.id ?? 1;
    const note: Note = {
      id: lastId,
      title: title,
      description: description,
      body: body,
    };
    this.notes.push(note);
    this.notesUpdated.next([...this.notes]);
  }

🆒 Features

• Material components, use of nullish coalescing operator

📋 Status & To-Do List

• Status: Working
• To-Do: Add data store - database? navbar links. Replace deprecated flex-layout

👏 Inspiration

• Angular Wiki: Double Question Marks(??) or Nullish coalescing Operator in Angular/Typescript

📁 License

• This project is licensed under the terms of the MIT license.

✉️ Contact

• Repo created by ABateman, email: gomezbateman@yahoo.com