https://github.com/andrewjbateman/angular-material-notepad
:clipboard: Angular used with Material & Tailwind components to display and add notes in a table
https://github.com/andrewjbateman/angular-material-notepad
angular angular-material16 angular16 css3 html5
Last synced: 18 days ago
JSON representation
:clipboard: Angular used with Material & Tailwind components to display and add notes in a table
- Host: GitHub
- URL: https://github.com/andrewjbateman/angular-material-notepad
- Owner: AndrewJBateman
- License: mit
- Created: 2021-04-19T14:35:13.000Z (about 4 years ago)
- Default Branch: main
- Last Pushed: 2023-05-25T08:33:56.000Z (about 2 years ago)
- Last Synced: 2025-05-07T03:44:12.373Z (18 days ago)
- Topics: angular, angular-material16, angular16, css3, html5
- Language: TypeScript
- Homepage:
- Size: 1.8 MB
- Stars: 4
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# :zap: 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_
## :page_facing_up: Table of contents
* [:zap: Angular Material Notepad](#zap-angular-material-notepad)
* [:page\_facing\_up: Table of contents](#page_facing_up-table-of-contents)
* [:books: General info](#books-general-info)
* [:signal\_strength: Technologies](#signal_strength-technologies)
* [:camera: Screenshots](#camera-screenshots)
* [:floppy\_disk: Setup](#floppy_disk-setup)
* [:computer: Code Examples](#computer-code-examples)
* [:cool: Features](#cool-features)
* [:clipboard: Status \& To-Do List](#clipboard-status--to-do-list)
* [:clap: Inspiration](#clap-inspiration)
* [:file\_folder: License](#file_folder-license)
* [:envelope: Contact](#envelope-contact)
## :books: 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)
## :signal_strength: Technologies
* [Angular framework v16](https://angular.io/)
* [Angular Material v16](https://material.angular.io/)
* [Angular Material Icons](https://material.io/resources/icons/?style=baseline)
## :camera: Screenshots
## :floppy_disk: 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
## :computer: 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)
```typescript
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]);
}
```
## :cool: Features
* Material components, use of nullish coalescing operator
## :clipboard: Status & To-Do List
* Status: Working
* To-Do: Add data store - database? navbar links. Replace deprecated flex-layout
## :clap: Inspiration
* [Angular Wiki: Double Question Marks(??) or Nullish coalescing Operator in Angular/Typescript](https://www.angularjswiki.com/angular/double-question-marks-or-nullish-coalescing-operator-in-angular-typescript/)
## :file_folder: License
* This project is licensed under the terms of the MIT license.
## :envelope: Contact
* Repo created by [ABateman](https://github.com/AndrewJBateman), email: `[email protected]`