Setting Up Angular Material in User Search Angular 15 App – Part 1

In this tutorial, we will be building a User Search Angular 15 app using Angular Material. Angular Material is a UI component library that provides a set of reusable and accessible UI components for building modern web applications.

Part 1 of this tutorial will focus on setting up Angular Material in our Angular application.

Step 1: Create a new Angular 15 project

First, make sure you have Node.js and Angular CLI installed on your machine. If not, you can download and install them from their official websites.

To create a new Angular project, open your terminal and run the following command:

ng new user-search-app

This command will create a new Angular project named "user-search-app". Navigate to the project directory using the following command:

cd user-search-app

Step 2: Install Angular Material

To add Angular Material to our project, run the following command in the terminal:

ng add @angular/material

This command will install Angular Material and prompt you to choose a theme. You can choose between pre-built themes like Indigo/Pink, Deep Purple/Amber, or create a custom theme. For this tutorial, we will choose the Indigo/Pink theme.

Next, you will be prompted to set up global typography styles for Angular Material. Select "Yes" to enable typography styles.

Lastly, you will be asked if you want to use Angular Material animations. Select "Yes" to enable animations.

Step 3: Import Angular Material modules

After successfully installing Angular Material, we need to import the required Angular Material modules in our application module.

Open the src/app/app.module.ts file and import the following Angular Material modules:

import { MatIconModule } from '@angular/material/icon';
import { MatButtonModule } from '@angular/material/button';
import { MatInputModule } from '@angular/material/input';
import { MatCardModule } from '@angular/material/card';
import { MatListModule } from '@angular/material/list';
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
import { MatToolbarModule } from '@angular/material/toolbar';
import { MatIconModule } from '@angular/material/icon';
import { MatFormFieldModule } from '@angular/material/form-field';

@NgModule({
  imports: [
    MatIconModule,
    MatButtonModule,
    MatInputModule,
    MatCardModule,
    MatListModule,
    MatProgressSpinnerModule,
    MatToolbarModule,
    MatIconModule,
    MatFormFieldModule,
  ],
  // other module configurations
})

Step 4: Add Angular Material components to the application

Now that we have imported the required Angular Material modules, we can start using Angular Material components in our application.

Let’s update the src/app/app.component.html file to include a simple toolbar and a button using Angular Material components:

<mat-toolbar color="primary">
  <span>User Search App</span>
</mat-toolbar>

<mat-button>Click Me</mat-button>

Step 5: Run the application

To see the changes we made so far, run the following command in the terminal to start the Angular development server:

ng serve

Open your browser and navigate to http://localhost:4200/ to view your Angular application with Angular Material components.

Congratulations! You have successfully set up Angular Material in your Angular application. In the next part of this tutorial, we will create a user search feature using Angular Material components.