Tạo một trang Login với Angular Material - Information Technology Seeker

Trong bài tutorial này, chúng ta sẽ sử dụng Visual Studio để thực hành viết một trang Login sử dụng Angular Material và làm quen với 4 thành phần của Angular là Module, Component, Template và Data binding (chi tiết tại bài Tổng quan về Angular)

Trước hết, chúng ta mở chương trình Visual Studio, vào phần Terminal chọn new Terminal để mở CLI và tạo một Angualar project và cài đặt Angular material với dòng lệnh sau:

ng new Login
ng add @angular/material

1 2	ng new Login ng add @angular/material

Lưu ý: Nếu các bạn gặp lỗi “ng.ps1 cannot be loaded because running scripts is disabled on this system”, các bạn có thể tham khảo hướng dẫn cách khắc phục tại đây.

Sau khi Angular hoàn tất việc tạo mới project, ta vào FirstApp/src/app để tiết hành viết chương trình ứng dụng. Tại đây, Angular đã tạo sẵn root component là AppComponent bao gồm 5 files sau:

– app.module.ts: module của AppComponent (root component)

– app.component.ts: component của ứng dụng

– app.component.html: template của AppComponent

– app.component.css: cấu hình CSS stylesheet cho AppComponent

– app.component.spec.ts: unit test cho AppComponent

Ngoài ra, khi tạo mới project nếu chúng ta chọn sử dụng routing thì sẽ có thêm file app-routing.module.ts để cấu hình routing cho ứng dụng Angular.

Trong bài này, chúng ta sẽ viết một ứng dụng login với giao diện như sau:

4 thành phần được sử dụng trong bài này là:

1. Template (app.component.html)

Chúng ta viết template của ứng dụng như sau:

<div class="center_component">
  <mat-card class="example-card">
    <!-- Card header -->
    <mat-card-header class="align-center">
      <mat-card-title>ITech Seeker</mat-card-title>
      <mat-card-subtitle>Login example</mat-card-subtitle>
    </mat-card-header>
    
    <!-- Card content -->
    <mat-card-content>
      <!-- Enter username -->
      <mat-form-field class="example-form-field" >
        <label>Username:</label>
        <input class='example-input' type="email" placeholder="Email" value=" " [(ngModel)]="log_email">              
      </mat-form-field>
    
      <!-- Enter password -->
      <mat-form-field class="example-form-field" >
        <label>Password:</label>
        <input class='example-input' type="password" placeholder="Password" [(ngModel)]="log_pw">
      </mat-form-field>

      <!-- Login button -->
      <button mat-button class="example-btn" (click)="login()">Login</button>
    </mat-card-content>  
  </mat-card>
  <!-- Show login authentication result -->
  <div style="margin-top: 30px;"> {{login_result}} </div>
</div>

<mat-card class="example-card">

<mat-card-header class="align-center">

<mat-card-title>ITech Seeker</mat-card-title>

<mat-card-subtitle>Login example</mat-card-subtitle>

</mat-card-header>

<mat-card-content>

<mat-form-field class="example-form-field" >

<label>Username:</label>

</mat-form-field>

<mat-form-field class="example-form-field" >

<label>Password:</label>

</mat-form-field>

<button mat-button class="example-btn" (click)="login()">Login</button>

</mat-card-content>

</mat-card>

<div style="margin-top: 30px;"> {{login_result}} </div>

</div>

Ta sử dụng class để cấu hình stylesheet cho ứng dụng trong file app.component.css như sau:

.center_component{
  margin-top: 20px;
  text-align: -webkit-center;
}

.example-card {
    max-width: 400px;
  }

  .align-center{
    margin: auto;
    display: block;
  }
  
  .example-input{
    margin-left: 10px;
  }

  .example-form-field {      
    width: 100%;
    height: 40px;
    text-align: center;
  }

.example-btn{
    background: #673ab7;
    color: white;
    margin-top: 20px;
}

.center_component{

margin-top: 20px;

text-align: -webkit-center;

}

.example-card {

max-width: 400px;

}

.align-center{

margin: auto;

display: block;

}

.example-input{

margin-left: 10px;

}

.example-form-field {

width: 100%;

height: 40px;

text-align: center;

}

.example-btn{

background: #673ab7;

color: white;

margin-top: 20px;

}

2. Module (app.module.ts)

Trong template trên chúng ta sử dụng 3 modules của Angular Material là mat-card, mat-form-field và mat-button. Do đó trong file app.module.ts chúng ta phải thực hiện import các modules này (các bạn truy cập vào https://material.angular.io/components, chọn component tương ứng và tiến hành copy API của component đó).

Ngoài ra, trong ví dụ này chúng ta cũng sử dụng ngModel, do đó ta cần thực hiện import FormsModule trong file app.module.ts

Như vậy Module của ứng dụng như sau:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import {MatCardModule} from '@angular/material/card';
import {MatFormFieldModule} from '@angular/material/form-field';
import {MatButtonModule} from '@angular/material/button';
import { FormsModule } from '@angular/forms';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    MatCardModule,
    MatFormFieldModule,
    MatButtonModule,
    FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

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

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

import { AppRoutingModule } from './app-routing.module';

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

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

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

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

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

import { FormsModule } from '@angular/forms';

@NgModule({

declarations: [

AppComponent

imports: [

BrowserModule,

AppRoutingModule,

BrowserAnimationsModule,

MatCardModule,

MatFormFieldModule,

MatButtonModule,

FormsModule

providers: [],

bootstrap: [AppComponent]

})

export class AppModule { }

3. Data binding

Trong ví dụ này chúng ta sử dụng 3 loại data binding:

– Two-way data binding: ta sử dụng ngModel để truyền nhận giá trị username và password mà người dùng nhập vào.

– Event binding(): gọi hàm login() để xử lý thông tin đăng nhập khi người dùng thực hiện click vào login button

– Interpolation: hiển thị kết quả đăng nhập thông quá giá trị của login_result

4. Component (app.component.ts)

Trong template trên, ta sử dụng 3 biến (log_email, log_pw, login_result) và một hàm là login(). Do đó, component của ứng dụng sẽ được viết như sau:

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


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent{
  log_email:string;
  log_pw:string;
  login_result="";

  constructor() {}
  // Process login information 
  login(){
    // when the user enter correct user name and password
    if(this.log_email=="admin" && this.log_pw =="123")
    {
      this.login_result="Login Successfully"
    }
    else{
      this.login_result="Wrong Username or Password"
    }
  }
}

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

@Component({

selector: 'app-root',

templateUrl: './app.component.html',

styleUrls: ['./app.component.css']

})

export class AppComponent{

log_email:string;

log_pw:string;

login_result="";

constructor() {}

// Process login information

// when the user enter correct user name and password

if(this.log_email=="admin" && this.log_pw =="123")

{

this.login_result="Login Successfully"

}

else{

this.login_result="Wrong Username or Password"

}

Lưu ý:

– Khi Studio báo lỗi “Property ‘log_email’ has no initializer and is not definitely assigned in the constructor”: vào file tsconfig.json và chỉnh giá trị “strict” thành false

– Khi Studio báo lỗi Can’t bind to ‘ngModel’ since it isn’t a known property of ‘input’: thực hiện import FormsModule vào file app.module.ts

Cuối cùng, ta khởi chạy ứng dụng Login với lệnh ng serve, ta được kết quả như sau:

Như vậy chúng ta đã hoàn thành việc viết một trang login trong Angular và làm quen với 4 thành phần của Angular là Module, Component, Template và Data binding. Các bạn có thể tham khảo toàn bộ code trong bài hướng dẫn này trong trang Github của Itech Seeker tại đây.