Search⌘ K
AI Features
Home
Courses
The Angular Masterclass

Course Project: The Client Contacts Manager Application

Explore how to develop a Client Contacts Manager app using Angular components and TypeScript. This lesson guides you through building UI elements, data modeling, and managing data locally with the In-Memory Web API, providing practical experience in creating mobile and desktop versions of a mini-CRM app.

We'll cover the following...

Project features

Throughout this course, we are going to be building a sales team contacts app for a fictional company. The idea behind this app is to have a system that allows the fictional sales team of our fictional company to manage and access the contact details of their clients and the companies they work with.

This mini-CRM (Customer Relationship Manager) allows us to create an app that provides a number of functions so we can really explore the features of Angular.

The idea is to create two versions of the mini-CRM that the salesperson will use:

  • The mobile version will be used when they are out and about talking to their customers

  • The desktop app will be used when back in the office to search for all the new customers they have.

Project learning outcomes

While building the project, you will learn how to:

  • Create UI using Angular components and Angular Material

  • Build up the model of the application

  • Pass data throughout our app as we build up the functionality to add new customers, save their details, and see a list of all of our saved customer contacts

We will see how Angular uses TypeScript, which gives us excellent tooling and insight into our code, making the development process even easier than when we were using JavaScript.

As part of this application, we are going to use a fantastic third-party library called the In-Memory Web API.

The In-Memory Web API library allows us to create local, in-memory storage similar to a database that we can save data to, access data from, and remove data from, all via API calls.

Using this library means we have a source of storage for our Client Contacts Manager Application, and we can make API calls to this storage system without having to set up a local database of external API.

📝 Note: For now, we can just focus on learning how to write Angular. Once you’ve finished reading this course and you want to create your own application to practice what you’ve learned, we highly recommend looking at the In-Memory Web API as a temporary data source for your practice applications. It’s not a replacement for a real database but is easy to use for small demo applications.

Project preview

Below is a preview of what the final project will look like after adding Angular functionality.

📝 Note: Press the RUN button to compile and serve the application. Once the app compiles, you can either see its output in the Output tab or by clicking on the URL given after Your app can be found at.

import { AppPage } from './app.po';
import { browser, logging } from 'protractor';

describe('workspace-project App', () => {
  let page: AppPage;

  beforeEach(() => {
    page = new AppPage();
  });

  it('should display welcome message', () => {
    page.navigateTo();
    expect(page.getTitleText()).toEqual('Client-Contacts-Manager-Angular app is running!');
  });

  afterEach(async () => {
    // Assert that there are no errors emitted from the browser
    const logs = await browser.manage().logs().get(logging.Type.BROWSER);
    expect(logs).not.toContain(jasmine.objectContaining({
      level: logging.Level.SEVERE,
    } as logging.Entry));
  });
});
Course project: Client Contacts Manager application

You can play around with the project by searching, viewing, adding, deleting, or updating contacts and companies while focusing on its interactivity and functionality.