Using Angular Material to Create a Beautiful UI

 Using Angular Material to Create a Beautiful UI

Angular Material is a UI component library for Angular that provides a set of reusable UI components based on Google's Material Design principles. With Angular Material, you can easily create a beautiful and responsive UI for your Angular application. In this blog post, we'll explore how to use Angular Material to create a UI for a sample application.

First, let's start by installing Angular Material and its dependencies. You can install them using the following command:

sql

ng add @angular/material

This command installs Angular Material and its dependencies, and updates the "angular.json" file to include the necessary styles and scripts.

Next, let's create a new Angular component for our UI. You can create it using the following command:

perl

ng generate component my-ui

This command creates a new component named "my-ui" in the "src/app" folder.

Now, let's add some UI components to our "my-ui" component. We'll use some Angular Material components such as "mat-toolbar", "mat-card", "mat-form-field", "mat-input", and "mat-button". Here's an example of how our "my-ui.component.html" file could look like:

php

<!-- my-ui.component.html -->

<mat-toolbar color="primary">My UI</mat-toolbar>

<mat-card>

  <mat-card-header>

    <mat-card-title>Create a new item</mat-card-title>

  </mat-card-header>

  <mat-card-content>

    <mat-form-field>

      <mat-label>Name</mat-label>

      <input matInput [(ngModel)]="newItemName">

    </mat-form-field>

    <button mat-raised-button color="primary" (click)="createItem()">Create</button>

  </mat-card-content>

</mat-card>

<mat-card *ngFor="let item of items">

  <mat-card-header>

    <mat-card-title>{{ item.name }}</mat-card-title>

  </mat-card-header>

  <mat-card-content>

    <button mat-icon-button color="primary" (click)="editItem(item)"><mat-icon>edit</mat-icon></button>

    <button mat-icon-button color="warn" (click)="deleteItem(item)"><mat-icon>delete</mat-icon></button>

  </mat-card-content>

</mat-card>

In this example, we've used the "mat-toolbar" component to create a top navigation bar with the title "My UI". We've also used the "mat-card" component to create a card for creating new items, and another card for displaying existing items. We've used the "mat-form-field" and "mat-input" components to create a form field for entering the name of a new item, and the "mat-button" component to create a button for creating the item. We've also used the "mat-icon-button" component to create buttons for editing and deleting existing items.

Next, let's update the "my-ui.component.ts" file to handle these actions. For example:

typescript

// my-ui.component.ts

import { Component } from '@angular/core';

import { AngularFireDatabase } from '@angular/fire/database';

@Component({

  selector: 'app-my-ui',

  templateUrl: './my-ui.component.html',

  styleUrls: ['./my-ui.component.css']

})

export class MyUiComponent {

  items: any[] = [];

  newItemName: string = '';

  constructor(private db: AngularFireDatabase) {

    db.list('/items').valueChanges().subscribe(items => {

      this.items = items;

    });

  }

  createItem() {

    this.db.list('/items').push({

      name: this.newItemName

    });

    this.newItemName = '';

  }

typescript

  editItem(item: any) {

    // TODO: Implement edit item functionality

  }

  deleteItem(item: any) {

    this.db.list('/items').remove(item.key);

  }

}

In this example, we've used the AngularFireDatabase module to interact with Firebase Realtime Database to retrieve and manipulate data. We've used the "valueChanges()" method to listen for changes in the "items" collection, and update the "items" array accordingly. We've also used the "push()" method to add a new item to the "items" collection, and the "remove()" method to delete an item from the "items" collection.

Finally, let's update the "app.module.ts" file to import the necessary modules and add them to the "imports" array:

typescript

// app.module.ts

import { NgModule } from '@angular/core';

import { BrowserModule } from '@angular/platform-browser';

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { AngularFireModule } from '@angular/fire';

import { AngularFireDatabaseModule } from '@angular/fire/database';

import { MatToolbarModule } from '@angular/material/toolbar';

import { MatCardModule } from '@angular/material/card';

import { MatFormFieldModule } from '@angular/material/form-field';

import { MatInputModule } from '@angular/material/input';

import { MatButtonModule } from '@angular/material/button';

import { MatIconModule } from '@angular/material/icon';

import { AppComponent } from './app.component';

import { MyUiComponent } from './my-ui/my-ui.component';

const firebaseConfig = {

  // TODO: Add Firebase config here

};

@NgModule({

  declarations: [

    AppComponent,

    MyUiComponent

  ],

  imports: [

    BrowserModule,

    BrowserAnimationsModule,

    AngularFireModule.initializeApp(firebaseConfig),

    AngularFireDatabaseModule,

    MatToolbarModule,

    MatCardModule,

    MatFormFieldModule,

    MatInputModule,

    MatButtonModule,

    MatIconModule

  ],

  providers: [],

  bootstrap: [AppComponent]

})

export class AppModule { }

In this example, we've imported and added the necessary modules to the "imports" array, including the AngularFireModule and AngularFireDatabaseModule for interacting with Firebase Realtime Database, and the Angular Material modules for using the UI components.

And that's it! With these changes, we've created a beautiful UI for our Angular application using Angular Material components. You can further customize the UI by changing the colors, styles, and layouts of the components, and adding more functionality to the application.