Advertisement
  1. Code
  2. Angular 2+
Code

How to Build a Login UI With Angular and Material Design

by
Difficulty:BeginnerLength:ShortLanguages:

This tutorial will show you how to build a beautiful login and registration UI with Angular Material. We'll look at the various Material design components and how they can be used to bring about professional-looking applications. The complete code for this tutorial can be found in our GitHub repo.

Getting Started

We will start by creating an Angular application. Hopefully, you already have Node.js and Angular CLI installed in your working environment.

Use the following command to create a new Angular app.

This command creates all the files needed to bootstrap an Angular application. The next step will be to add Angular Material in your application. 

Creating Components Using Angular CLI

Components in Angular are the building blocks of the application. Although you can manually create components, Angular CLI makes it very easy to automatically generate components that contain all the necessary starter code. To generate a component in Angular CLI, you simply run the following command:

Our app will have the following components:

  • the Registration component
  • the Login Component

Let's generate those components now.

Adding a Theme

The beauty of Angular Material is that it comes with pre-built themes, so you can easily bootstrap the look and feel of your application by simply plugging in some simple snippets of code to your app. To add a theme, simply import it to style.css.

Building the UI

We want our UI to feature a navigation bar with links for registration and login. So we'll create a navigation bar with two buttons that link to the app components.

To create a toolbar and buttons, you use the <mat-toolbar> and <mat-button> components respectively.

Go ahead and add the HTML code for the UI in src/app/app.component.html. Notice that we have also added links to the routes.

Next, we will add some styling to our UI. Open app.component.css and add the following CSS styles.

Importing Angular Material Components

You also need to import the modules from @angular/material. You can choose to import them from the main module or create a separate module that will contain all the Material design modules. Since we will be working with many of these modules when creating the rest of the UI, we will create a separate module for all the components. Go ahead and create a new file src/app/material.module.ts.

Add the modules for the <mat-toolbar> , </mat-toolbar-row>, and <mat-button> components in the file as shown below.

Then, from other components in our code, we only need to include the module we just created—app/app.module.ts—as shown below.

Issue the ng serve command to test your application, and you should see a nice-looking navigation area with Register and Login links.

navigation area with Register and Login links

Enable Routing

Routing enables users to navigate between different pages. To enable routing in our application, we will first define the routing configuration. To do that, add the following code to app.module.ts.

The next step will be to add a <router-outlet></router-outlet> element which enables the Angular Router to know where to place the routed components. The app.component.html file should now look like this:

We've placed the router outlet so the components will render below the navigation bar.

Registration UI

In this section, we will mainly make use of the layout and form control components. This UI will showcase these Material Design components:

  • card component (<mat-card>)—a content container for text, photos, and actions in the context of a single subject
  • label component (<mat-label>)—used to specify a label for the form field
  • input component (<input matInput>)—specifies an input field
  • form field component (<mat-form-field>)—wraps several Angular components to make a form field
  • checkbox component (<mat-checkbox>)—a native checkbox with enhanced Material Design styling
  • date picker component (<mat-datepicker>)—an enhanced date picker

But first, let's import them in src/app/material.ts.

We will start with the <mat-card>, which will contain all the content in the registration UI. Open registration-component.component.html and add the following code.

Next, we will add an HTML form inside the content section that will contain all our form fields.

Next, we will add form fields for the first name, last name, address, email, and password. We will be using <mat-label> to create labels and <input matInput /> to create the input fields.

Next, we will add a checkbox for gender and a date picker for date of birth. We will use <mat-checkbox> and <mat-datepicker> which have enhanced Material Design styling and animations.

The last bit will be a button after the </mat-card-content> for submitting the user information.

Form Styling

Let's put some styling on our forms to make them more presentable. Open create-account.component.css and add the following CSS styles.

The Registration UI will look like this:

Registration UI layout

Building the UI for the Login Component

The login UI will have the following components:

  • card component (<mat-card>)—a content container for text, photos, and actions in the context of a single subject
  • input component (<input matInput>)—specifies an input field

Just like we did for the registration UI, we will have a Material card component to house the login form.

The HTML code for the Login page is shown, which contains two inputs for email and password credentials.

The finished UI will look like this:

Finished login UI

Conclusion

This tutorial has covered most of the Angular Material components needed to make a fully functioning UI. As you have seen, Angular Material is very easy to use since all the components have predefined styles. This means you can quickly build beautiful UIs. Additionally, the Angular Material documentation provides a lot of examples and is easy to follow.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.