Modal Dialog Bahan Angular 13: Panduan Lengkap – Codewithaden

Modal mudah diimplementasikan bahkan di aplikasi Vanilla JS/HTML. Dengan kemunculan kerangka kerja JS, kerangka kerja telah memberikan cara mudah bagi kami untuk menggunakan modal dalam kerangka kerja mereka karena kami tidak dapat menghilangkannya. Kerangka kerja CSS paling populer.

Kami akan menggunakan Bahan sudut untuk demo ini. Ada banyak plugin dan perpustakaan yang menyertakan windows modal; Di masa lalu, saya menggunakannya sendiri ketika saya perlu menambahkan modal ke proyek baru. Salah satunya adalah perpustakaan material sudut.

Bahan sudut Komponen akan membantu kita membangun UI dan UX yang menarik, halaman web yang konsisten dan fungsional, dan aplikasi web sambil menjaga prinsip -prinsip desain web modern seperti portabilitas dan kompatibilitas browser.

Modal Modal Bahan Angular

Bahan sudut Modal adalah modul bawaan yang diisi dengan komponen UI modern yang signifikan yang bekerja di seluruh aplikasi web, seluler, dan desktop. Itu Layanan Matdialog Dapat digunakan untuk membuka dialog modal dengan gaya dan animasi desain material.

Untuk contoh pop-up sudut ini, saya telah menggunakan contoh dialog material yang sama, tetapi saya telah menunjukkannya langkah demi langkah dari awal. Langkah pertama adalah menginstal proyek sudut.

Membuat modal sudut

  1. Langkah 1: Gambaran Umum Perpustakaan Bahan Angular
  2. Langkah 2: Instal Proyek Angular dan instal dan konfigurasikan pustaka material sudut.
  3. Langkah 3: Buat kustom Modul sudut mengajukan.
  4. Langkah 4: Impor tema material pra-built dan ikon materi
  5. Langkah 5: Menerapkan Modal Bahan Angular.

Langkah 1: Buat proyek sudut

Ketik perintah berikut.

ng new angularmodal 

Angular

Langkah 2: Pasang pustaka material sudut.

Masuk ke dalam folder proyek dan instal Hammerjs menggunakan perintah berikut.

npm install --save hammerjs 

Hammer.js adalah ketergantungan opsional dan membantu dengan dukungan sentuh untuk beberapa komponen.

Sekarang, instal Bahan sudut dan Animasi sudut menggunakan perintah berikut.

npm install --save @angular/material @angular/animations @angular/cdk 

Sekarang, termasuk Hammerjs di dalam an Angular.json mengajukan. Anda dapat menemukan file ini pada akar proyek sudut.

Langkah 3: Buat file modul materi kustom.

Oke, sekarang, di dalam SRC >> Aplikasi folder, buat satu file modul dipanggil material.module.ts. Kami telah membuat ini material.module.ts file secara terpisah karena, di masa depan, kita dapat mengimpor komponen material yang berbeda dalam file ini, dan file ini akan kami impor di dalam app.module.ts mengajukan.

Tulis kode berikut di dalam material.module.ts mengajukan.

// material.module.ts

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

import { MatDialogModule, MatFormFieldModule, MatButtonModule, MatInputModule } from '@angular/material';
import { FormsModule } from '@angular/forms';

@NgModule({
  exports: [FormsModule, MatDialogModule, MatFormFieldModule, MatButtonModule, MatInputModule]
})
export class MaterialModule {}
 

Di sini, kami telah mengimpor satu -satunya Formsmodule dari Bentuk sudut , Matdialogmodule, MatformfieldModule, MatinputModule, dan MatbuttonModule komponen dari Perpustakaan Bahan Angular.

Langkah 4: Impor tema dan ikon materi yang sudah dibangun

Bahan sudut Dilengkapi dengan beberapa tema yang sudah dibangun. Tema -tema ini memberi kita pengaturan warna dan gaya dasar.

Tema utama yang tersedia adalah Indigo-Pink , DEeppurple-Amber , ungu-hijau, dan Pink-Bluegrey . Untuk mengimpor tema dalam proyek kami, kami dapat menambahkan kode berikut ke global Anda styles.css mengajukan. File di dalam SRC map.

@import '~@angular/material/prebuilt-themes/indigo-pink.css'; 

Anda juga dapat memiliki akses ke Ikon Desain Bahan dan menggunakan ikon bernama ini dengan komponen.

Untuk mengimpornya ke proyek Anda, Anda dapat menambahkan ini ke bagian kepala root proyek Anda index.html mengajukan.

 

Sekarang langkah terakhir adalah mengimpor material.module.ts dan lainnya Modul Bahan Angular dan BrowseranimationSmodule file di dalam app.module.ts mengajukan.

// app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MaterialModule } from './material.module';

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

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, BrowserAnimationsModule, MaterialModule],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}
 

Langkah 5: Implementasi Modal Bahan Angular.

Itu Matdialog Layanan dapat digunakan untuk membuka dialog modal dengan gaya dan animasi desain material.

Sekarang, buat di dalam app.component.ts file, tulis kode berikut.

// app.component.ts

import { Component, Inject } from '@angular/core';
import {MatDialog, MatDialogRef, MAT_DIALOG_DATA} from '@angular/material';
import { DialogData } from './DialogData';

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

}
 

Juga, buat antarmuka yang dipanggil Dialogdata.ts file di dalam SRC >> Folder Aplikasi. Lalu menulis kode berikut di dalam file itu.

// DialogData.ts

export interface DialogData {
  animal: string;
  name: string;
}
 

Tidak, buat komponen sudut dengan mengetikkan perintah berikut.

ng g c modal --module app --spec=false 

Itu akan membuat file Komponen modal folder di dalam aplikasi map.

Tulis kode berikut di dalam modal.component.ts mengajukan.

// modal.component.ts

import { Component, OnInit, Inject } from '@angular/core';
import { MatDialogRef, MAT_DIALOG_DATA} from '@angular/material';
import { DialogData } from '../DialogData';

@Component({
  selector: 'app-modal',
  templateUrl: './modal.component.html',
  styleUrls: ['./modal.component.css']
})
export class ModalComponent implements OnInit {

  constructor(
    public dialogRef: MatDialogRef,
    @Inject(MAT_DIALOG_DATA) public data: DialogData) {}

  onNoClick(): void {
    this.dialogRef.close();
  }

  ngOnInit() {
  }

}
 

ModalComponent ts Kelas adalah kelas aktual yang mengimplementasikan modal material sudut.

ModalComponent Kelas menerima dialogData dan menampilkannya di dalam dialog. Kami telah menggunakan injeksi ketergantungan untuk menyuntikkan data di dalam dialog sudut.

Tulis file html modalcomponent di dalam modal.component.html mengajukan.

Hi {{data.name}}

What's your favorite animal?

Dalam file html ini, kami telah menggunakan modul material dan Bentuk sudut modul, yang telah kami impor sebelumnya di dalam material.module.ts mengajukan.

Di atas HTML akan ditampilkan ketika pengguna mengklik tombol yang muncul modal.

Sekarang, tulis kode berikut di dalam app.component.ts mengajukan.

// app.component.ts

import { Component, Inject } from '@angular/core';
import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';
import { ModalComponent } from './modal/modal.component';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  animal: string;
  name: string;

  constructor(public dialog: MatDialog) {}

  openDialog(): void {
    const dialogRef = this.dialog.open(ModalComponent, {
      width: '250px',
      data: {name: this.name, animal: this.animal}
    });

    dialogRef.afterClosed().subscribe(result => {
      this.animal = result;
    });
  }
}
 

Pertama, kami telah mengimpor ModalComponent di dalam app.component.ts mengajukan.

Kemudian kami telah membuat satu fungsi yang disebut OpenDialog (), yang akan membuka ModalComponent.

Kami telah melewati data seperti nama dan satwa untuk itu ModalComponent.

Saat pengguna menutup Modalcomponent, AppComponent mendapatkan nilai hewan, yang telah kami ketik di dalam ModalComponent dan tampilan di dalam AppComponent mengajukan.

Tulis kode berikut di dalam app.component.html mengajukan.


  1. You chose:

    {{animal}}

Di sini, Anda dapat melihat bahwa kami telah melewati data antara AppComponent dan ModalComponent. Datanya nama dan satwa.

Jika pengguna telah mengetik nama hewan di dalam Modalcomponent, Kemudian setelah penutupan modal, kita dapat melihat nama hewan di dalam AppComponent.

Namun, ada satu hal yang hilang yang merupakan Komponen masuk dari aplikasi sudut, yang perlu kita tentukan di dalam app.module.ts mengajukan. Jadi, final kami app.component.ts File terlihat seperti di bawah ini.

// app.component.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MaterialModule } from './material.module';

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

@NgModule({
  declarations: [AppComponent, ModalComponent],
  imports: [BrowserModule, BrowserAnimationsModule, MaterialModule],
  providers: [],
  bootstrap: [AppComponent],
  entryComponents: [ModalComponent]
})
export class AppModule {}
 

Akhirnya, simpan file dan mulai server dev angular dengan perintah berikut.

ng serve --open 

Ini akan membuka browser, dan Anda dapat melihat sesuatu seperti di bawah ini.

Angular

Pertama, ketik nama Anda dan klik tombol; memilih satu, Dan Anda akan melihat dialog material sudut.

Angular

Sekarang, jika Anda menekan OK dan jika Anda telah mengetik nama hewan, maka Anda akan melihat sesuatu seperti di bawah ini.

Angular

Jadi, kami telah berhasil menerapkan popup modal material sudut atau modal sudut, atau dialog material sudut. Anda dapat menemukan detail lebih lanjut tentang dialog material sudut di sini

Itu untuk tutorial ini.

Kode GitHub

Posting yang disarankan

Angular ngclass

Unggah file sudut

Crud sudut

HTTPClient Angular

Bentuk sudut

Tabel Bahan Angular

Meja Cerdas Angular

Artikel ini berasal dari website Winpoin, dan kemudian diterjemahkan ke bahasa indonesia, baca artikel asli disini

Leave a Reply

Your email address will not be published. Required fields are marked *