4elements, web design and consultancy

An Angular application is made up of components. In an Angular application, a component consists of an HTML template and a component class. From the official docs:

Components are the most basic building block of an UI in an Angular application. An Angular application is a tree of Angular components. Angular components are a subset of directives. Unlike directives, components always have a template and only one component can be instantiated per an element in a template.

In this tutorial, you'll learn how to get started with creating a grocery list manager using Angular.

Getting Started

You'll need Node version > 6.9.x and Node Package Manager (npm) > 3.x.x. Once you have both, try to install the Angular CLI using npm.

npm install -g @angular/cli

After installing the Angular CLI, try to create a project using the same.

ng new AngularGrocery --skip-npm

The above command will create the project structure. Navigate to the project directory and install the required dependencies.

cd AngularGrocery
npm install

To start the application web server, type the following command:

ng serve

Once the application server has started, point your browser to http://localhost:4200/ and you will be able to view the default application.

Application Structure

The above figure shows the application structure for our grocery list manager. The src folder contains the source code for the default application. The app folder inside the src folder contains the TypeScript code. index.html inside the src folder is the main HTML file where the created Angular components are rendered.

Creating the Add Items View

By default, the application has an app-root component. Let's create a new component called app-grocery for creating our grocery manager app. Inside the app folder, create a file called app.grocery.ts.

Import the Component module from the angular-core.

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

You'll be using Bootstrap to design the component. Download and include the Bootstrap package from the official site. Keep the files in the src/assets folder.

Let's define the component inside the app.grocery.ts file. The component will have three properties: selector, template, and styleUrls. selector indicates the way in which the component will be used. template defines the HTML which will be rendered when the particular selector is used. styleUrls defines the URL of the styles used in the component.

Inside app.grocery.ts, once the component module has been imported, define the app-grocery component as shown:

Now you are all set to use the Grocery component inside the index.html page. Remove the default component from the index.html page and add the following HTML code:

<app-grocery>Loading...</app-grocery>

Save the above changes and restart the server. Navigate the browser to http://localhost:4200/ and you will have the Grocery component displayed.

Adding the Items

Once an item is entered in the input text box, you need to read the item and save it in a list. To read the input, you'll make use of ngModel, which will bind it to a variable. Add ngModel to the input text box.

Each time some text is entered in the input text box, the task variable gets updated accordingly. Define the task variable inside the GroceryComponent in the app.grocery.ts file. Add a variable called tasks to keep a collection of tasks entered.

task: string;
tasks = [];

On clicking the OK button, the task will be added to the tasks collection list that you have defined inside the GroceryComponent. Define an onClick method inside the GroceryComponent to handle the OK button click. Here is how it looks:

Displaying the Added Items

Now, since you have the added items in the tasks variable, you can use it to display the tasks. You'll make use of the NgFor directive to iterate the tasks collection and dynamically create the HTML for displaying the tasks. You'll be displaying the task inside the UL element and repeating the LI using the NgFor directive. Here is how it looks:

Save the above changes and restart the server. Point your browser to http://localhost:4200/ and enter the task and press the OK button. Each added task will be displayed in the list below.

Wrapping It Up

In this Angular tutorial, you saw how to get started with creating a grocery list manager using Angular. You learnt how to create the view for the Grocery component, add items to the grocery list, and display the added items.

In the next part of this tutorial, you'll implement the features to mark the completed items, archive the completed items, and remove the added items.

Source code from this tutorial is available on GitHub. Do let us know your suggestions in the comments below.