The Angular Masterclass/

...

/

Adding Angular Material Modules to Application

Adding Angular Material Modules to Application

Let's use Angular Material UI components to make the application look far more polished and presentable.

We'll cover the following...

Amending the layout

In the previous lessons, we have seen that our application looks like this:

First, let’s tackle the layout of our application. We’re going to:

  • Add a toolbar across the top of the app.
  • Put the Client form and Search forms in Card components to give them a container to sit-in.
  • Update all the form controls to use Angular Material forms, giving them a cleaner look.
  • Add one of the predefined themes of Angular Material, making the app look fresher.

Application with Material UI in action

This is how our application will look like after adding Material UI components.

📝 Note: Press the RUN button to compile and serve the application. Once the app compiles, you can 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));
  });
});
Client Contacts Manager application with Material UI

You will see the following in the output:

This looks far cleaner than the previous version. Let’s go through the code changes we’ve made in order to achieve this look.

Step 1: Update CustomMaterialModule

In the custom-material.module.ts, we have added all the modules from Angular Material we needed to achieve this look. Now our CustomMaterialModule looks like this:

import { NgModule } from "@angular/core";
import { MatToolbarModule } from
...