Angular – Working with Data

Introduction

In previous posts, we’ve started with angular basics and created an angular application.

We learned that an Angular application is an interaction of the following Angular artifacts

Components
Services
Directives
Pipes
Modules

We’ll continue our learning and today we’ll see few more examples.

We’ll learn about angular services and then use the service in component to work with data. We’ll also learn how two-way binding works in Angular.

If you are new to these topics, I’ll suggest to check the earlier posts.

But first, lets install the angular essential extensions package for visual studio code.

Angular Extensions

Angular essentials extensions can be very useful for angular development. It is a wrapper extension, which points to other extensions. This will help with code formatting and other useful things.

You can install it from VS Code extension tab as shown below:

Creating a Service

Components shouldn’t fetch or save data directly. They should focus on presenting data and delegate data access to a service.

Services are also a great way to share information among components that don’t know each other. 

We can create an angular service using following command

ng g s ./quotes/services/quotes

This will create a service file and we can now edit it as follows:

Just like components, angular service is a typescript file. Inside, we’ve created a quotes array which holds the data and couple of methods which allow for data retrieval and adding a new object to quotes array. Its all in-memory, but that’s ok for this demo.

Now, we have a service, its injectable and we can use it in our components. Lets do this next.

Quotes-List Component

Lets create a component in quotes module to display quotes data in a table.

ng g c ./quotes/components/quotes-list  --module quotes.module

and we can now use this component as a directive inside the container (quotes) component:

and following is the quotes-list.component code and markup

You can check the source-code from git repository.

and here is the output:

The code and markup is self explanatory, let me know if you have some questions.

Quote-Create Component (ngModel)

Lets create another component, which will allow us very simple data-entry. This example will also help us to understand how two-way binding (ngModel) works in angular:

ng g c ./quotes/components/quotes-create  --module quotes.module

and following is the component’s typescript file

and the HTML markup as follows

ngModel Allows us to have one command to express two-way data binding. We use ngModel mostly with Forms fields. we can only set it equal to a data bound properties:

ngModel in component requires import of the FormsModule as shown below

What we learn

• The ngModel syntax allows us to specify a component property that will use two-way binding.
• Two-way binding means that if the component property is modified inside the component or inside our web page. It will stay in sync.

and for routing, I set it up inside corresponding module (quotes-routing.module)

the HTML link is added for routing

and here is the output:

clicking the Create button will route to quote-create component as shown below, where we can enter new data and click Create Quote button to add the data:

The quotes.service is currently persisting data in-memory and new data will be lost after reloading. In later posts, we will replace it with a database storage.

Summary

In this post, we learned how services are useful when working and sharing data from components. we created few components and use them for data display and update purposes. Simple examples though but we will later extend in upcoming posts.

The source code is available on this git repository.

You can check the deployed application on this URL.

Let me know if you have some comments and/or questions. Till next time, Happy coding.