Angular material tutorials with examples

-

 

Angular Material Tutorial with Examples

Angular Material is a UI component library for Angular that provides a wide range of high-quality, reusable UI components based on Google’s Material Design guidelines. It helps you create beautiful, responsive, and consistent user interfaces with minimal effort. Angular Material provides UI components like buttons, forms, tables, dialogs, and more.

In this tutorial, we'll learn how to get started with Angular Material and create a simple Angular project with some Angular Material components.

1. Setting Up Angular Project with Angular Material

To begin using Angular Material, you need to have an Angular project. If you don’t have one yet, you can easily create a new Angular project using the Angular CLI (Command Line Interface).

Step 1: Install Angular CLI (if not already installed)

Open a terminal or command prompt and install Angular CLI globally:

bash
npm install -g @angular/cli

Step 2: Create a new Angular project

Run the following command to create a new Angular project:

bash
ng new angular-material-example

Navigate into the project folder:

bash
cd angular-material-example

Step 3: Install Angular Material

Once your Angular project is set up, you need to install Angular Material. You can do this by running the following command:

bash
ng add @angular/material

This command will prompt you to choose a theme for your app (you can select any, like "Indigo/Pink"). It will also automatically configure Angular Material in your project.

2. Import Angular Material Modules

After installing Angular Material, you need to import the modules of the components you want to use in your Angular app.

For example, to use the Button and Toolbar components, you need to import the following modules in your app.module.ts file:

typescript
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { MatButtonModule } from '@angular/material/button';
import { MatToolbarModule } from '@angular/material/toolbar';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    MatButtonModule, // Import MatButtonModule to use Material buttons
    MatToolbarModule // Import MatToolbarModule to use Material toolbar
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

3. Using Angular Material Components

Now that Angular Material is installed and modules are imported, let’s explore how to use some popular Angular Material components in the template.

Example 1: Button Component

To use a Material button, use the <button mat-button> element:

html
<!-- app.component.html -->
<div style="text-align:center">
  <mat-toolbar color="primary">
    <span>Angular Material Example</span>
  </mat-toolbar>

  <button mat-button (click)="onClick()">Click Me!</button>
</div>

In this example:

  • <mat-toolbar> is used to display a Material Design toolbar with a title.
  • <button mat-button> is the Material button.

Example 2: Dialog Component

The Angular Material Dialog component is used to display a popup dialog box.

  1. First, import the MatDialogModule in the app.module.ts:
typescript
import { MatDialogModule } from '@angular/material/dialog';

  1. Then, add the dialog module to your imports array.

  2. Create a dialog component, such as a simple DialogComponent:

bash
ng generate component dialog
  1. In the dialog.component.html:
html
<!-- dialog.component.html -->
<h1 mat-dialog-title>Confirmation</h1>
<div mat-dialog-content>
  <p>Are you sure you want to continue?</p>
</div>
<div mat-dialog-actions>
  <button mat-button (click)="onNoClick()">No</button>
  <button mat-button [mat-dialog-close]="true">Yes</button>
</div>
  1. In the app.component.ts, import and inject the MatDialog service to open the dialog.
typescript
import { Component } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';
import { DialogComponent } from './dialog/dialog.component';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  constructor(public dialog: MatDialog) {}

  openDialog(): void {
    const dialogRef = this.dialog.open(DialogComponent);

    dialogRef.afterClosed().subscribe(result => {
      console.log('Dialog closed: ', result);
    });
  }
}
  1. Update the app.component.html to include a button that opens the dialog:
html
<!-- app.component.html -->
<div style="text-align:center">
  <mat-toolbar color="primary">
    <span>Angular Material Example</span>
  </mat-toolbar>

  <button mat-button (click)="openDialog()">Open Dialog</button>
</div>

4. Adding Form Fields with Angular Material

Angular Material also provides many useful form components such as inputs, selects, checkboxes, and radio buttons. Let’s use a Material input field and a Material select dropdown in a form.

Example 3: Input and Select Components

  1. In app.module.ts, import the following Material modules:
typescript
import { MatInputModule } from '@angular/material/input';
import { MatSelectModule } from '@angular/material/select';

  1. Add these modules to the imports array in app.module.ts.

  2. In the app.component.html file, create an input field and select dropdown:

html
<!-- app.component.html -->
<div style="text-align:center; margin-top: 50px">
  <mat-toolbar color="primary">
    <span>Angular Material Form Example</span>
  </mat-toolbar>

  <form>
    <mat-form-field appearance="fill">
      <mat-label>Name</mat-label>
      <input matInput placeholder="Enter your name">
    </mat-form-field>

    <mat-form-field appearance="fill">
      <mat-label>Age</mat-label>
      <mat-select>
        <mat-option value="18">18</mat-option>
        <mat-option value="25">25</mat-option>
        <mat-option value="30">30</mat-option>
        <mat-option value="35">35</mat-option>
      </mat-select>
    </mat-form-field>

    <button mat-raised-button color="primary">Submit</button>
  </form>
</div>

5. Adding a Table with Angular Material

To display tabular data, Angular Material provides the MatTableModule. This is useful for displaying large datasets in a structured way with features like pagination, sorting, and filtering.

Example 4: Material Table

  1. Import MatTableModule and MatPaginatorModule in app.module.ts:
typescript
import { MatTableModule } from '@angular/material/table';
import { MatPaginatorModule } from '@angular/material/paginator';

  1. Add the modules to your imports array.

  2. Create a simple table to display data:

typescript
// app.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  displayedColumns: string[] = ['name', 'age', 'email'];
  dataSource = [
    {name: 'John', age: 25, email: 'john@example.com'},
    {name: 'Jane', age: 30, email: 'jane@example.com'},
    {name: 'Sam', age: 22, email: 'sam@example.com'},
    {name: 'Paul', age: 28, email: 'paul@example.com'}
  ];
}
  1. Add the table HTML structure in app.component.html:
html
<!-- app.component.html -->
<div style="text-align:center; margin-top: 50px">
  <mat-toolbar color="primary">
    <span>Angular Material Table Example</span>
  </mat-toolbar>

  <mat-table [dataSource]="dataSource">
    <!-- Name Column -->
    <ng-container matColumnDef="name">
      <mat-header-cell *matHeaderCellDef> Name </mat-header-cell>
      <mat-cell *matCellDef="let element"> {{element.name}} </mat-cell>
    </ng-container>

    <!-- Age Column -->
    <ng-container matColumnDef="age">
      <mat-header-cell *matHeaderCellDef> Age </mat-header-cell>
      <mat-cell *matCellDef="let element"> {{element.age}} </mat-cell>
    </ng-container>

    <!-- Email Column -->
    <ng-container matColumnDef="email">
      <mat-header-cell *matHeaderCellDef> Email </mat-header-cell>
      <mat-cell *matCellDef="let element"> {{element.email}} </mat-cell>
    </ng-container>

    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
    <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
  </mat-table>
</div>

6. Conclusion

In this tutorial, we have learned how to set up Angular Material in an Angular project and explored a few important components such as buttons, dialogs, form fields, and tables. Angular Material provides a rich set of UI components that follow Google's Material Design guidelines, helping developers create elegant and responsive applications with ease.

You can refer to the Angular Material documentation for more components, themes, and advanced configuration options.

Comments

Post a Comment

Popular posts from this blog

PrimeNG tutorial with examples using frequently used classes

-
  PrimeNG Tutorial: Frequently Used Classes and Components PrimeNG is a comprehensive and flexible UI component library for Angular applications. It provides a wide range of ready-to-use components like forms, data tables, dialogs, buttons, and many others, all styled using Material Design principles. In this tutorial, we will explore some of the frequently used components and classes in PrimeNG , along with examples for creating interactive, modern, and responsive UIs. 1. Setting Up PrimeNG Before using PrimeNG components, you need to install PrimeNG in your Angular project. If you haven’t done so, follow these steps: Step 1: Install PrimeNG and PrimeIcons Run the following commands to install PrimeNG and PrimeIcons: bash Copy code npm install primeng npm install primeicons Step 2: Import Required Modules After installation, you need to import the relevant PrimeNG modules in your app.module.ts . Example of importing commonly used modules: typescript Copy code import { NgModule ...
Read more

Docker and Kubernetes Tutorials and QnA

-
 Docker and Kubernetes Tutorials: Detailed Guide Let's dive into detailed tutorials for Docker and Kubernetes, starting with their core concepts and progressing to hands-on examples. These tutorials are designed for both beginners and intermediate learners. Part 1: Docker Tutorial 1. Introduction to Docker Docker is a platform used to develop, ship, and run applications inside containers. Containers are lightweight, portable, and ensure consistent environments across different stages of the application lifecycle. They help solve the "works on my machine" problem. Key Concepts of Docker: Images : A blueprint for containers, containing everything needed to run an application (code, runtime, libraries, etc.). Containers : A runtime instance of an image, running isolated from the host system. Dockerfile : A script with a set of instructions to build Docker images. Docker Hub : A public repository of Docker images. Docker Compose : A tool to define and manage multi-container a...
Read more

Building strong foundational knowledge in frontend development topics

-
 These topics are essential for building strong foundational knowledge, and each comes with a simple solution or code snippet to illustrate the concept. 1. What is the difference between HTML, CSS, and JavaScript? Answer : HTML (Hypertext Markup Language) is used for structuring web content (headings, paragraphs, images, links, etc.). CSS (Cascading Style Sheets) is used for styling the layout, design, and appearance of the web content. JavaScript is used for adding interactivity and dynamic behavior to the website (e.g., form validation, animations, events). html <!-- HTML --> < div class = "box" > </ div > css /* CSS */ .box { width : 100px ; height : 100px ; background-color : blue; } javascript // JavaScript document . querySelector ( '.box' ). addEventListener ( 'click' , function ( ) { alert ( 'Box clicked!' ); }); 2. What are semantic HTML elements and why are they important? Answer : Semantic HTML elements cl...
Read more