/angular-frontend-notes

:clipboard: Angular tutorial app to allow user to enter notes and to list these notes in cards.

Primary LanguageTypeScript

⚡ Angular Frontend Notes

  • Angular app to allow a user to Create, Read, Update & Delete (CRUD) simple notes comprising a title and description.
  • Clicking on a note navigates to that note where it can be edited.
  • Tutorial code by Devstackr * see 👏 Inspiration below. Note some changes were required to pass tslint tests
  • Note: to open web links in a new window use: ctrl+click on link

GitHub repo size GitHub pull requests GitHub Repo stars GitHub last commit

📄 Table of contents

📚 General info

  • Notes can be viewed and deleted from the notes list.
  • Clicking on a note lets user edit it.
  • Fade-out gradient used with text to keep note cards all the same size.
  • List includes a filter so user can search for key words and filtered results will order themselves in terms of relevancy.
  • There is no backend for this app. A refresh loses all notes from the notes array.
  • Bulma CSS framework used to style components etc.
  • 5 part Youtube tutorial series in Angular 8. Upgraded to Angular 12.

📷 Screenshots

Angular page

📶 Technologies

💾 Setup

  • Run npm i to install dependencies
  • To start the server on localhost://4200 type: 'ng serve'
  • To create a build file in a docs folder type ng build --prod. This will deployed in github-pages when code is commited and pushed to Github

💻 Code Examples

  • on initialisation of note-details.component.ts check if note is new using the note id.
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;
    }
  })
}

🆒 Features

  • Bulma CSS styles used for the first time.

📋 Status & To-do list

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

👏 Inspiration

📁 License

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

✉️ Contact