How to create store products management app using Angular & TypeScript?

In this post, you will learn how to create store products management app using  Angular & TypeScript. The name that I came up for this app is “Sweetos” – a sweets store products management app. Think about this app as a basic app that allows the store employees to view the products in stock with some other details like cost, expiry date, customer ratings, etc.

This is a good way to understand the basics of new version of Angular as this app has multiple views for user-interface, service to consume data, client-side routing, etc. By learning this, the concepts can be applied to other types of projects as well.

The source of this app can be found here. Before looking at the code, let us look at the finished user-interface of this app below.

Sweetos

Outline

This post will talk about following sub-topics:

Tools/Dependencies

By the time you read this post, there may be new versions available. I used Visual Code to work on this application. Feel free to use a code editor/IDE of your choice. Following are the main tools and dependencies that I’ve used to create this application:

There are other node modules as well, detail of which you can read in the packages.json file’s content below:

Products Data & Service

In a real world application, data will be stored in a database which will be served by a back-end server to a client such as browser to show it to the users. To mimic this backend, I’m using a products.json file which is used by an Angular service to give a collection of sweet products to the consumer. The content of this file is shown below:

To use Typescript’s strongly typed feature, I’ve created an interface named IProduct which mimics the structure of the data that we expect to get from our service. The definition is mentioned below:

Next step is to create a service that will be responsible to encapsulate service calls to backend-server or a JSON file in this app’s case. So, if any part of the application needs products data, a service named ProductService can be consumed. The definition of this service is below:

Let us now look at the index.html file which is the main layout of the app and responsible for loading all the resources like JavaScript and CSS files.

Components

This app consists of following component classes:

  • AppComponent
  • WelcomeComponent
  • ProductListComponent
  • ProductDetailComponent

Bootstrap Process

Note that index.html sets up SystemJS script which is responsible to load main.js file that takes care of bootstrapping our angular application. It also uses import syntax to load resources on demand like this:

To bootstrap, App component is used with a selector as app. This component is the main component that is responsible for routing definitions and a shell to display other components which is possible using <router-outlet></router-outlet>. The definition of this component is below:

This uses @Component() to register a component, @RouteConfig() to define 3 routes. It also registers some  directives and providers dependency that can be consumed by this component and other nested children components. This is also a good way to define the common dependencies at some level and nested components can consume those providers/services. Whenever a route is activated, a linked component is then rendered.

The default route is to render WelcomeComponent which has a very simple view that acts as a landing view for user. The definition of this component is below:

Let us look at the definition and template for ProductListComponent which is responsible to show the products. It also consumes the product service to get available products. Note that dependency of service is not required here as it is already specified in the parent component. It uses another directive named as StarComponent, details of which you can find below in the post.

The template that shows a table of products with images is mentioned below. It uses a custom filter for searching the products named ProductFilterPipe.

The ProductDetailComponent is responsible to show the detail of a selected product by getting the id of product from routeParams. Then this id is used to ask ProductService to get that product using ngOnInit() hook. This can be useful when only a subset of that data is shown in the list view and when detail is requested, client goes to the server to get all the detail of it.

The template of ProductDetailComponent is below which is responsible to show the detail page of a product.

Reusable Component

The components that I’ve mentioned above – ProductListComponent and ProductDetailComponent are not reusable components. To show how to create a reusable component, I’ve created a StartComponent with a selector as star so that any product in the store can just use it. Both ProductListComponent and ProductDetailComponent uses this reusable component. This component also has a class, template and style listed below:

Custom Filter / Pipes

Using Angular, filters can be created to transform data while the templates process the data. This app has a search input box, using which users can search for a product. Now, it is down to your app to whether search from a local available data or go to a remote look-up API to perform a search. I’ve created a filter named productFilter that perform search based on data available locally. The definition of this filter is listed below:

Conclusion

This sums up my post that tells you how to create store products management app using Angular & TypeScript. I hope by reading this you now know how to create components, services, routing, filter. I intend to update this app later to add other behaviours as well, in which case, I’ll write another post.

Let me know if you face any issues in the comments and I’ll try to help you. If you would like to learn more about how to integrate Angular and TypeScript, refer to my Angular and AngularJS posts. If you would like to learn something specific then get in touch and I’ll write a post about it.

Siddharth Pandey

Siddharth Pandey is a Software Engineer with thorough hands-on commercial experience & exposure to building enterprise applications using Agile methodologies. Siddharth specializes in building, managing on-premise, cloud based real-time standard, single page web applications (SPAs). He has successfully delivered applications in health-care, finance, insurance, e-commerce sectors for major brands in the UK. Other than programming, he also has experience of managing teams, trainer, actively contributing to the IT community by sharing his knowledge using Stack Overflow, personal website & video tutorials.

You may also like...

Advertisment ad adsense adlogger