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.


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:


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:

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


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:

 Updating Default Component

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

Here we have imported quicknotes.component.ts file to app.component.ts file.

Now update app.component.html file with the code snippet below:

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


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.