Create a Note Taking App Using Angular

Bob at Genuitec
Virtual evangelist at large. The face of Genuitec often appearing in graphics. Pen-name for our more shy writers of content.

Posted on Dec 11th 2017 In this Angular tutorial, we are going to create a Note Taking App using Angular IDE.

Create New Angular Project

We’re going to be using Angular IDE in this tutorial, though you can use Webclipse or MyEclipse, following exactly the same steps. Before beginning, do ensure you are in the Angular Perspective (Window > Perspective > Open Perspective > Other > Angular) for an optimum workspace layout and development experience. In the new Angular project wizard (File > New > Angular Project), type `quicknotes` as the project name – you may change the Node.js, npm and Angular CLI versions if desired (Angular CLI version must be 1.5.0 or later).

Angular IDE will take a few minutes to set up the project, and you can see the activities output in Terminal+, as shown below:

Adding Angular Material

Once the project is created, we can now install additional node modules to our project. Angular IDE has a terminal view from which we can execute commands. To open the terminal, select Window > Show view > Terminal+. In the opened terminal, type the following commands to install HammerJS, Angular Material and Angular CDK.

npm install --save hammerjs @angular/material @angular/cdk

We installed HammerJS because some of the Angular Material components depend on HammerJS for gestures. Modern Angular projects already include the Angular animations module (`@angular/animations`), but if you happen to be following along with an older version of the CLI or Angular, please install that as well.

Are you ready to modernize your Eclipse experience? ‘Cause DevStyle is here! If you love the brawn of Eclipse, but are underwhelmed with its beauty and usability, then DevStyle is for you. Bringing “Developer Ergonomics” to Eclipse, with an enhanced startup experience, awesome themes, and enhanced functionality within the IDE.

Creating new components

Now, let’s create the components. In the file explorer view, right-click on App, select New and click Component.

In the New Angular CLI dialog, enter `quicknotes` as element name, and click Finish. See the image below for reference:

A new folder named `quicknotes` will be added to `src/app`. Now open `quicknotes.component.ts` and replace the default code snippet with the new snippet below:

import {Component, OnInit} from '@angular/core';

export class Quicknotes {
  title: String;
  content: String;
  todo: String;
}

@Component({
  selector: 'app-quicknotes',
  templateUrl: './quicknotes.component.html',
  styleUrls: ['./quicknotes.component.css']
})
export class QuicknotesComponent implements OnInit {

  titleModel: String;
  contentModel: String;
  todoModel: String;
  quicknotes: Quicknotes[];

  constructor() {
    this.titleModel = '';
    this.contentModel = '';
    this.todoModel = '';

    const defaultQuicknotes: Quicknotes = {
      title: 'my note',
      content: 'This is default note',
      todo: ' this is the default time you want to your task done'
    };

    this.quicknotes = [defaultQuicknotes];
  }
  ngOnInit() {
  }

  createQuicknotes() {

    const newQuicknotes: Quicknotes = {
      title: this.titleModel,
      content: this.contentModel,
      todo: this.todoModel
    };

    this.quicknotes.push(newQuicknotes);

    // set the model values to '' again
    this.titleModel = this.todoModel = this.contentModel = '';
  }

}

First, we created an array to store our `quicknotes`, then we added a default `quicknotes` to our array. We declared string type variables – `titleModel`, `contentModel`, `todoModel` – to help us add new `quicknotes` and, finally, we added a new method `createQuicknotes()`.

Importing Forms module

Open your `app.module.ts file` and add the import form module like the one below:

import {BrowserModule} from '@angular/platform-browser';
import {NgModule} from '@angular/core';
import {MatButtonModule, MatCheckboxModule, MatFormFieldModule, MatInputModule, MatCardModule} from '@angular/material';

import {FormsModule} from '@angular/forms';
import {AppComponent} from './app.component';
import {QuicknotesComponent} from './quicknotes/quicknotes.component';

@NgModule({
  declarations: [
    AppComponent,
    QuicknotesComponent

  ],
  imports: [
    BrowserModule,
    MatButtonModule,
    MatCheckboxModule,
    MatFormFieldModule,
    MatCardModule,
    MatInputModule,
    FormsModule

  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

Now open `quicknotes.component.html` file and replace the default code snippet with the new snippet below:

<div class="example-container">
  <mat-form-field> <input matInput
    [(ngModel)]="titleModel" placeholder="Title"> </mat-form-field>
  <br>

  <mat-form-field> <input matInput
    [(ngModel)]="contentModel" placeholder="Enter your content"> </mat-form-field>
  <br>

  <mat-form-field> <input matInput
    [(ngModel)]="todoModel" placeholder="What to do"> </mat-form-field>

</div>

<br>

<button mat-raised-button color="accent" (click)="createQuicknotes()">
  Add Note</button>

<hr>

<p *ngFor="let i of quicknotes">
  <mat-card-title> {{ i.title }} </mat-card-title>
  <mat-card> {{ i.content }} </mat-card>
  <mat-card> {{ i.todo }} </mat-card>

Styling

There are default themes used by Google on most of their services that we can use directly. To do so, add the following line to your `styles.css file`:

@import "~@angular/material/prebuilt-themes/indigo-pink.css";

Updating Default Component

Open `src/app/app.component.ts` file and replace the code snippet with the one below:

import { Component } from '@angular/core';

import { QuicknotesComponent } from './quicknotes/quicknotes.component';

@Component({
 selector: 'app-root',
 templateUrl: './app.component.html',
 styleUrls: ['./app.component.css']
})

export class AppComponent {
 title = 'A note taking app';
}

Here we have imported `quicknotes.component.ts` file to `app.component.ts` file. Now update `app.component.html` file with the code snippet below:

<div style="text-align: center">
  <h1>Welcome to {{title}}!!</h1>

</div>
<app-quicknotes> </app-quicknotes>

Important Notes

`MaterialModule` has been deprecated in favor of defining a project-specific custom material module where you import and export only the needed components. For this tutorial, we have used `MatButtonModule`, `MatCheckboxModule`, `MatFormFieldModule`, `MatInputModule`, and `MatCardModule`.
`*ngFor` is Angular syntax to iterate through the array, `ngModel` is directive for two-way data binding, `(click)` is used to add click handler, and two curly braces `{{ }}` are used to bind values to view or template.
Two-way Data Binding has to be one of the most important features in Angular. It is a mechanism to map the data directly from model to view and vice versa.

Running Our App

There is a server view in Angular IDE, as shown in the image below. To open this view, select Window > Show View > Server. Right-click on your project (here `quicknotes`) and select Start Server. Angular IDE serves the application on `localhost port 4200`, so open up http://localhost:4200 in your browser to see the running app.

Our app will look like this:

Connect Your Browser to Your Source Code with CodeLive

Angular IDE has a special feature known as CodeLive that provides a bridge between the IDE and the browser, which speeds up web development. CodeLive shows you the Angular components loaded on your web page. You can then easily jump to the corresponding TypeScript, HTML or CSS file.

App in Action

Conclusion

We hope this tutorial has given you some new insights into Angular app development. As you can see, the entire process is made much easier by using Angular IDE. Remember, these features are also available in our Webclipse plug-in, or our full-stack offering, MyEclipse IDE.