⚡ Ionic Angular Notepad

• Ionic 4 app to Create, Read, Update and Delete notes. Notes are stored and retrieved using the Ionic Storage component.
• Part 2: NgRX added for state management.
• Note: to open web links in a new window use: ctrl+click on link

📄 Table of contents

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

📚 General info

• This app only has 2 pages:

1. Home page with a list of note titles
2. Detail page with a text area so note details can be added and changed. The entire note can also be deleted from this page.

📷 Screenshots

📶 Technologies

• Ionic framework v4.
• Ionic CLI v7.
• Angular 7.
• Ionic Storage v2, a simple key-value module with SQLite.
• rxjs v6
• ngrx/effects v7 use streams to provide new sources of actions to reduce state based on external interactions such as network requests, web socket messages and time-based events.

💾 Setup

• Install dependencies with npm install.
• Run app using ionic serve then navigate to http://localhost:8100/.
• The colour scheme can be changed by updating the ./theme/variables.scss file. Use the Ionic Colour Generator.

💻 Dependency Issues

For dependency error: 'ERROR in The Angular Compiler requires TypeScript >=3.1.1 and <3.2.0 but 3.2.1 was found instead': Solution: npm i typescript@3.1.6 --save-dev --save-exact.

For dependency error: 'Module not found: Error: Can't resolve 'core-js/es7/reflect'': Solution: Add this to the tsconfig.json file:

"paths": {
  "core-js/es7/reflect": ["node_modules/core-js/proposals/reflect-metadata"],
  "core-js/es6/*": ["node_modules/core-js/es/*"]
}

💻 Code Examples

• Detail page showing the Ionic components

<ion-header>
  <ion-toolbar color="tertiary">
    <ion-buttons slot="start">
      <ion-back-button defaultHref="/notes"></ion-back-button>
    </ion-buttons>
    <ion-title>{{ note.title }}</ion-title>
    <ion-buttons slot="end">
      <ion-button (click)="deleteNote()">
        <ion-icon slot="icon-only" name="trash"></ion-icon>
      </ion-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

<!-- ngModel used for 2-way data-binding to update the content 
property of the note with any change in the <ion-textarea> value -->
<ion-content padding>
  <ion-textarea
    (input)="noteChanged()"
    [(ngModel)]="note.content"
    placeholder="...something noteworthy?">
  </ion-textarea>
</ion-content>

🆒 Features

• A simple notepad application that uses many Ionic/Angular/Typescript core concepts such as:

1. Navigation/Routing
2. Templates
3. Two-way data binding
4. Interpolations
5. Event binding
6. Types and Interfaces
7. Services
8. Data Input
9. Data Storage
10. Styling
11. NgRX observables

• This app allows the user to:

1. create, delete, and edit notes
2. Save and load those notes from storage
3. View a list of notes
4. View note details

• The ionic template default colors can be changed to:

1. primary
2. secondary
3. tertiary
4. light
5. danger
6. dark

📋 Status & To-Do List

• Status: Working
• To-Do: add delete function to Home page. Add a createdAt date. Consider a theme change button to change colors.

👏 Inspiration

• JOSH MORONY's Ionic Tutorial part 1: Building a Notepad Application from Scratch with Ionic.
• JOSH MORONY's Ionic Tutorial part 2: Using NgRx for State Management in an Ionic & Angular Application
• JOSH MORONY's Ionic Tutorial part 3: Using NgRx Effects for Data Loading in an Ionic & Angular Application

📁 License

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

✉️ Contact

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