• Angular tutorial app to allow user to add notes to a notes list. Notes can be viewed and deleted from this list. Includes a filter so user can search for key words and filtered results will order themselves in terms of relevancy.

• Clicking on a note navigates to that note where the note can be edited.

• All code by Devstackr from Youtube [tutorial series](Project Demo & Introduction - [1] Build a Notes App w/ Angular).

• General info
• Screenshots
• Technologies
• Setup
• Features
• Status
• Inspiration
• Contact

• 5 part Youtube tutorial series in Angular 8. Upgraded to Angular 9.

• Angular v9.1.0
• Bulma v0.8.0 CSS framework
• Font Awesome v5.12.0 icons
• rxjs v6.5.4 reactive programming library

• To start the server on localhost://4200 type: 'ng serve'

• on initialisation of note-details.component.ts check if note is new

ngOnInit() { // new note or editing existing one? this.route.params.subscribe((params: Params) => { this.note = new Note(); if (params.id) { this.note = this.notesService.get(params.id); this.noteId = params.id; this.new = false; } else { this.new = true; } }) }

• Bulma CSS styles used for the first time.

• Status: Video 5 of 5 completed.

• To-do: Nothing. Could add local storage or a backend (e.g. google Firebase).

• Project Demo & Introduction - [1] Build a Notes App w/ Angular

• Creating the UI (Angular) - [2] Build a Notes App w/ Angular

• Creating the Note Details Page - [3] Build a Notes App w/ Angular

• Adding Animations to Note Cards | Angular Animations - [4] Build a Notes App w/ Angular

• Searching Notes - [5] Build a Notes App w/ Angular

• Devstackr: Github repo

• Maya Shavin: Medium article: ES6 — Set vs Array — What and when?

Repo created by ABateman - feel free to contact me!