Indonesian (Bahasa Indonesia) translation by Febri Ardian Sanjoyo (you can also view the original English article)
Tutorial ini akan menunjukkan kepada Anda bagaimana membangun UI login dan pendaftaran yang cantik dengan Bahan Angular. Kita akan melihat berbagai komponen Material design dan bagaimana itu dapat digunakan untuk menghasilkan aplikasi yang terlihat profesional. Kode lengkap untuk tutorial ini dapat ditemukan di repo GitHub kita.
Persiapan
Kita akan mulai dengan membuat aplikasi Angular. Semoga Anda sudah memiliki Node.js dan CLI Angular yang terpasang di lingkungan kerja Anda.
Gunakan perintah berikut untuk membuat sebuah aplikasi Angular yang baru.
# create a new Angular project under the name responsive-angular-material ng new registration-login-angular-material
Perintah ini membuat semua file yang diperlukan untuk bootstrap aplikasi Angular. Langkah selanjutnya adalah menambahkan Angular Material di aplikasi Anda.
cd responsive-angular-material/ #install angular material ng add @angular/material
Membuat komponen menggunakan Angular CLI
Komponen dalam Angular adalah building block aplikasi. Meskipun Anda dapat secara manual membuat komponen, CLI Angular membuatnya sangat mudah untuk secara otomatis menghasilkan komponen yang berisi semua kode starter yang diperlukan. Untuk menghasilkan komponen dalam CLI Angular, Anda cukup menjalankan perintah berikut:
# MyComponent is the name of your component ng g component MyComponent
Aplikasi kita akan memiliki komponen-komponen berikut:
-
Registration
component -
Login
Component
Mari kita menghasilkan komponen-komponen itu sekarang.
#registration component ng g component RegistrationComponent #login component ng g component LoginComponent
Menambahkan tema
Keindahan Angular Material adalah bahwa ia dilengkapi dengan tema yang dibuat sebelumnya, sehingga Anda dapat dengan mudah mem-bootstrap tampilan dan nuansa aplikasi Anda hanya dengan memasukkan beberapa cuplikan kode sederhana ke aplikasi Anda. Untuk menambahkan tema, cukup impor ke style.css.
/*style.css*/ @import "~@angular/material/prebuilt-themes/indigo-pink.css";
UI Building
Kita ingin UI kita menampilkan bar navigasi dengan tautan untuk registration dan login. Jadi kita akan membuat bar navigasi dengan dua tombol yang tertaut ke komponen aplikasi.
Untuk membuat toolbar dan tombol, Anda menggunakan <mat-toolbar>
dan <mat-button>
komponen.
Lanjutkan dan tambahkan kode HTML untuk UI di src/app/app.component.html. Perhatikan bahwa kita juga menambahkan tautan ke rute.
<!--The content below is only a placeholder and can be replaced.--> <mat-toolbar color="primary"> <mat-toolbar-row> <!-- <span>HOME</span> --> <span><a href="/">HOME</a></span> <span class="spacer"></span> <a mat-button routerLink="/register">Register</a> <a mat-button routerLink="/login">Login</a> </mat-toolbar-row> </mat-toolbar>
Selanjutnya, kita akan menambahkan beberapa styling UI kita. Buka app.component.css dan menambahkan style CSS berikut.
.spacer { flex: 1 1 auto; }
Mengimpor Angular Material komponen
Anda juga perlu mengimpor modul dari @angular/material
. Anda dapat memilih untuk mengimpornya dari modul utama atau membuat modul terpisah yang akan berisi semua modul desain Material. Karena kita akan bekerja dengan banyak modul ini ketika membuat sisa UI, kita akan membuat modul terpisah untuk semua komponen. Lanjutkan dan buat file baru src/app/material.module.ts.
Tambahkan modul untuk <mat-toolbar>
, </mat-toolbar-row>
dan <mat-button>
component dalam file seperti dibawah.
import { NgModule } from '@angular/core'; import {MatButtonModule,MatToolbarModule} from '@angular/material'; @NgModule({ imports: [MatButtonModule,MatToolbarModule], exports: [MatButtonModule,MatToolbarModule], }) export class MyMaterialModule { }
Kemudian, dari komponen lain dalam kode kita, kita hanya perlu menyertakan modul yang baru saja kita buat — app/app.module.ts — seperti yang ditunjukkan di bawah ini.
// app/app.module.ts import { MyMaterialModule } from './material.module'; @NgModule({ imports: [ BrowserModule, BrowserAnimationsModule, MyMaterialModule, ], })
Berikan perintah ng serve
untuk menguji aplikasi Anda, dan Anda akan melihat area navigasi yang tampak bagus dengan tautan Register dan Login.

Mengaktifkan Routing
Routing memungkinkan pengguna untuk bernavigasi di antara halaman yang berbeda. Untuk mengaktifkan routing di aplikasi kita, pertama-tama kita akan menentukan konfigurasi routing. Untuk melakukan itu, tambahkan kode berikut ke app.module.ts.
import { RouterModule, Routes } from '@angular/router'; imports: [ BrowserModule, BrowserAnimationsModule, MyMaterialModule, RouterModule.forRoot([ { path: '', redirectTo: '/', pathMatch: 'full' }, { path: 'register', component: RegistrationComponentComponent }, { path: 'login', component: LoginComponentComponent }, ]), ],
Langkah selanjutnya adalah menambahkan elemen <router-outlet></router-outlet>
yang memungkinkan Angular Router untuk mengetahui di mana menempatkan routed component. File app.component.html seharusnya sekarang terlihat seperti ini:
<!--The content below is only a placeholder and can be replaced.--> <mat-toolbar color="primary"> <mat-toolbar-row> <!-- <span>HOME</span> --> <span><a href="/">HOME</a></span> <span class="spacer"></span> <a mat-button routerLink="/register">Register</a> <a mat-button routerLink="/login">Login</a> </mat-toolbar-row> </mat-toolbar> <router-outlet></router-outlet>
Kita telah menempatkan router outlet sehingga komponen akan merender di bawah bar navigasi.
UI Registrasi
Di bagian ini, kita terutama akan menggunakan tata letak dan komponen form control. UI ini akan menampilkan komponen Material Design ini:
- card component (
<mat-card>
) — sebuah wadah konten untuk text, photo, dan action dalam konteks subyek - component label (
<mat-label>
)-digunakan untuk menetapkan label untuk form field - masukan komponen
(<input matInput>)
— menentukan dalam bidang input - komponen form field (
<mat-form-field>
) - membungkus beberapa komponen Angular untuk membuat form field - komponen checkbox (
<mat-checkbox>
) - checkbox asli dengan styling Material Design yang disempurnakan - komponen date picker (
<mat-datepicker>
)-enhanced date picker
Tapi pertama-tama, mari kita impor itu dalam src/app/material.ts.
import { NgModule } from '@angular/core'; import {MatNativeDateModule,MatDatepickerModule,MatIconModule,MatButtonModule,MatCheckboxModule, MatToolbarModule, MatCardModule,MatFormFieldModule,MatInputModule,MatRadioModule,MatListModule,} from '@angular/material'; import {MatDatepickerModule} from '@angular/material/datepicker'; import { FormsModule, ReactiveFormsModule } from '@angular/forms'; @NgModule({ imports: [MatNativeDateModule,MatDatepickerModule,MatIconModule,MatButtonModule,MatCheckboxModule, MatToolbarModule,FormsModule, MatCardModule,MatFormFieldModule,MatInputModule,MatListModule,MatRadioModule,], exports: [MatNativeDateModule,FormsModule, MatDatepickerModule,MatIconModule,MatButtonModule,MatCheckboxModule, MatToolbarModule, MatCardModule,MatFormFieldModule,MatInputModule,MatListModule,MatRadioModule,], }) export class MyMaterialModule { }
Kita akan mulai dengan <mat-card>
, yang akan berisi semua konten di registration UI. Buka registrasi-component.component.html dan tambahkan kode berikut.
<mat-toolbar> <span>Registration</span> </mat-toolbar> <mat-card class="my-card"> <mat-card-content> <!-- CONTENT HERE --> </mat-card-content> <mat-card-actions> <!-- REGISTER BUTTON --> </mat-card-actions> </mat-card>
Selanjutnya, kita akan menambahkan form HTML di dalam bagian konten yang akan berisi semua form field kita.
<mat-toolbar> <span>Registration</span> </mat-toolbar> <mat-card class="my-card"> <mat-card-content> <form class="my-form"> <!--FORM FIELDS HERE--> </form> </mat-card-content> <mat-card-actions> <!--REGISTER BUTTON HERE--> </mat-card-actions> </mat-card>
Selanjutnya, kita akan menambahkan form untuk nama depan, nama belakang, alamat, email, dan kata sandi. Kita akan menggunakan <mat-label>
untuk membuat label dan <input matInput />
untuk membuat kolom input.
<mat-card-content> <form class="my-form"> <mat-form-field class="full-width"> <mat-label>First Name</mat-label> <input matInput placeholder="First name" name="fname" required> </mat-form-field> <mat-form-field class="full-width"> <mat-label>Last Name</mat-label> <input matInput placeholder="Last Name" name="lname" required> </mat-form-field> <mat-form-field class="full-width"> <mat-label>Address</mat-label> <input matInput placeholder="Address" name="address" required> </mat-form-field> <mat-form-field class="full-width"> <mat-label>Email</mat-label> <input matInput placeholder="Email" name="email"> </mat-form-field> <mat-form-field class="full-width"> <mat-label>Password</mat-label> <input matInput placeholder="Password" name="password"> </mat-form-field> </form> </mat-card-content>
Selanjutnya, kita akan menambahkan checkbox untuk jenis kelamin dan pemilih tanggal untuk tanggal lahir. Kita akan menggunakan <mat-checkbox>
dan <mat-datepicker>
yang telah meningkatkan styling dan animasi Design Material.
<section class="example-section"> <label class="example-margin">Gender:</label> <mat-radio-group [(ngModel)]="gender"> <mat-radio-button class="example-margin" value="after">Male</mat-radio-button> <mat-radio-button class="example-margin" value="before">Female</mat-radio-button> <mat-radio-button class="example-margin" value="before">Other</mat-radio-button> </mat-radio-group> </section> <mat-form-field> <mat-label>Date of Birth</mat-label> <input matInput [matDatepicker]="picker" placeholder="Choose a date"> <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle> <mat-datepicker #picker></mat-datepicker> </mat-form-field>
Bit terakhir akan menjadi tombol setelah </mat-card-content>
untuk mengirimkan informasi pengguna.
<mat-card-content> <form class="my-form"> <!--FORM FIELDS--> </form> </mat-card-content> <mat-card-actions> <button mat-raised-button (click)="register()" color="primary">REGISTER</button> </mat-card-actions>
Styling Form
Mari letakkan beberapa styling pada form kita untuk membuatnya lebih rapi. Buka create-account.component.css dan tambahkan style CSS berikut.
.my-form{ min-width: 150px; max-width: 500px; width: 100%; } .full-width { width: 100%; }
Registration UI akan terlihat seperti ini:

Building UI untuk komponen Login
Login UI akan memiliki komponen-komponen berikut:
- komponen card (
<mat-card>
) - wadah konten untuk text, photo, dan action dalam konteks single subject - masukan komponen (
<input matInput>
) — menetapkan sebuah field input
Sama seperti yang kita lakukan untuk registration UI, kita akan memiliki komponen card Material untuk menyimpan form login.
Kode HTML untuk halaman Login ditampilkan, yang berisi dua input untuk kredensial email dan password.
<mat-toolbar> <span>LOGIN</span> </mat-toolbar> <mat-card class="my-card"> <mat-card-content> <form class="my-form"> <mat-form-field class="full-width"> <mat-label>Email</mat-label> <input matInput placeholder="Email" name="email"> </mat-form-field> <mat-form-field class="full-width"> <mat-label>Password</mat-label> <input matInput placeholder="Password" name="password"> </mat-form-field> </form> </mat-card-content> <mat-card-actions> <button mat-raised-button (click)="login()" color="primary">LOGIN</button> </mat-card-actions> </mat-card>
UI yang selesai akan terlihat seperti ini:

Kesimpulan
Tutorial ini telah mencakup sebagian besar komponen Angular Material yang diperlukan untuk membuat UI berfungsi penuh. Seperti yang Anda lihat, Angular Material sangat mudah digunakan karena semua komponen memiliki style yang telah ditentukan. Ini berarti Anda dapat dengan cepat membuat UI yang indah. Selain itu, dokumentasi Angular Material menyediakan banyak contoh dan mudah diikuti.
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Update me weeklyEnvato Tuts+ tutorials are translated into other languages by our community members—you can be involved too!
Translate this post