Creating a clean, intuitive user interface is a key part of designing web applications. This has historically been challenging, however, because web apps don’t have a common design language like desktop apps do.
Enter Material Design. Google released Material Design in 2014 with the goal of creating a common user experience across Android devices and web apps. Material design has components that developers can use for both Android and JavaScript applications.
Material Design has become very popular. Developers have created libraries that incorporate Material Design components into existing frameworks. Within Angular applications, you can use the angular-material library, which makes all Material components available for your Angular templates. The catch is that you use Material Design in your application, you should be sure to use it across all parts of your app—it’s a common design language, after all.
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
Registrationcomponent - the
LoginComponent
Let’s generate those components now.
