Membuat elemen penggeser gambar menggunakan Angular

Membuat elemen penggeser gambar menggunakan Angular

Tentang codelab ini

subjectTerakhir diperbarui Apr 29, 2021
account_circleDitulis oleh aayush

1. Pengantar

Oleh penulis tamu Aayush Arora

Elemen Angular adalah Komponen Angular yang dipaketkan sebagai elemen kustom. Elemen tersebut saat ini didukung oleh Chrome, Opera, dan Safari serta tersedia di browser lain melalui polyfill. Elemen ini dapat memanfaatkan seluruh Infrastruktur Angular dengan Antarmuka Angular umum dan Strategi Deteksi Perubahan. Setelah terdaftar, elemen ini dapat digunakan di dalam browser.

Codelab ini akan memandu Anda membuat komponen Angular penggeser gambar Anda sendiri, lalu akan membantu Anda mengubahnya menjadi elemen Angular agar bisa berfungsi di luar Framework Angular.

Yang akan Anda buat

Di codelab ini, Anda akan membuat elemen penggeser gambar menggunakan Angular. Elemen Anda akan:

  • Berfungsi seperti elemen HTML di browser
  • Dapat dipasang di framework apa pun yang berbicara dengan DOM.

Yang akan Anda pelajari

  • Cara membuat komponen kustom penggeser gambar
  • Cara mengubah komponen kustom penggeser gambar ke elemen kustom
  • Cara memaketkan komponen agar berfungsi di dalam browser

Yang akan Anda perlukan

Codelab ini berfokus pada Elemen Angular. Konsep dan blok kode yang tidak-relevan akan dibahas sekilas dan disediakan sehingga Anda cukup menyalin dan menempelkan.

2. Mempersiapkan

Mendownload Kode

Klik link berikut guna mendownload semua kode untuk codelab ini:

Download kode sumber

Ekstrak file zip yang didownload. Tindakan ini akan mengekstrak folder root (angular-element-codelab-master), yang berisi

dua folder, (image-slider) dan (image-slider-finished). Kita akan melakukan semua pekerjaan coding dalam direktori yang disebut image-slider.

Menjalankan project

Untuk menjalankan project, Anda harus menjalankan perintah (ng-serve) dari direktori utama (image-slider).

Setelah aplikasi di-bootstrap (diproses tanpa input eksternal), Anda akan dapat melihat ini:

19ffd082e2f024a5.png

3. Membuat komponen kustom Penggeser Gambar?

Bagaimana cara membuat penggeser gambar?

Untuk penggeser gambar ini, ikat tombol menggunakan click binding Angular. Kita akan membuat array objek yang berisi gambar, tag alternatif, link, dll. Kita akan menempatkan gambar-gambar ini di bawah satu sama lain di penampung dan menerjemahkan penampung saat diklik.

Kita akan membuat komponen penggeser gambar lalu mengubahnya menjadi elemen Angular.

  • Penampung untuk gambar dan judul.
  • Array yang berisi data
  • Template untuk mengikat data

4. Mengimplementasikan komponen penggeser gambar

Ada beberapa cara untuk memulai project. Dalam hal ini, untuk membuat project kita sesederhana mungkin dan berfokus pada Elemen Angular, kami telah memberikan kode dasar kepada Anda beserta CSS-nya.

Membuat array dan layanan data

Ingat, sliderArray akan berisi:

  • Kunci img untuk URL gambar di penggeser
  • Tag alternatif guna memberikan alternatif untuk gambar
  • Teks untuk memberikan deskripsi tentang gambar

File data.json yang sudah ada dalam direktori src/assets Anda akan terlihat seperti ini.

sliderArray = [
 {img: 'http://bloquo.cc/img/works/1.jpg', alt: '', text: '365 Days Of weddings a year'},
 {img: 'http://bloquo.cc/img/works/2.jpg', alt: '',  text: '365 Days Of weddings a year'},
 {img: 'http://bloquo.cc/img/works/3.jpg', alt: '', text: '365 Days Of weddings a year'},
 {img: 'http://bloquo.cc/img/works/4.jpg', alt: '',  text: '365 Days Of weddings a year'},
 {img: 'http://bloquo.cc/img/works/5.jpg', alt: '', text: '365 Days Of weddings a year'}
];

Kita perlu mengambil data ini dalam komponen menggunakan layanan. Dalam file data.service.ts, kita akan menulis metode getData() menggunakan modul httpClient dari @angular/common/http yang akan mengambil data dari array yang telah kita buat di atas.


import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http'

const URL = '../assets/data.json';

@Injectable({
 providedIn: 'root'
})
export class DataService {

 constructor(private http: HttpClient) {}

 getData() {
   return this.http.get(URL)
 }
}

Mengambil data dari layanan data

Kita perlu mengimpor layanan di dalam komponen, lalu kita dapat berlangganan ke observable untuk mendapatkan objek dari data.json.

Kita perlu melakukan tiga langkah untuk ini:

  • Menginisialisasi array komponen
  • Berlangganan ke Observable yang ditampilkan oleh fungsi getData()
  • Membuat Result antarmuka untuk memeriksa jenis data setelah berlangganan ke observable.
  • Menetapkan data ke array komponen.

Menginisialisasi Array Komponen

Kita akan mendeklarasikan dan menginisialisasi array komponen di dalam slider.component.ts yang merupakan array objek:

Untuk mendeklarasikan:

sliderArray: object[];

Untuk menginisialisasi:

constructor(private data: DataService) {
 this.sliderArray = [];
}

Selanjutnya, kita perlu mengimpor dan menginisialisasi layanan di dalam konstruktor.

constructor(private data: DataService) {}

Sekarang, kita siap menggunakan layanan dan memanggil metode layanan.

Mendapatkan data dari Layanan Data

Untuk mengeluarkan data dari layanan, kita akan memanggil metode getData() dan berlangganan ke observable yang akan ditampilkan. Kita juga akan membuat antarmuka Result, agar dapat melakukan pemeriksaan jenis dan memastikan bahwa kita mendapatkan data yang benar.

Kita akan melakukannya dalam metode ngOnInit:

this.data.getData().subscribe((result: Result)=>{
})

Menetapkan data ke Array Komponen

Di akhir, kita akan menetapkan data ke array komponen:

this.data.getData().subscribe((result: Result)=>{
  this.sliderArray = result.sliderArray;
})

Setelah mendapatkan data di dalam array komponen, kita kemudian dapat mengikat template dengan data ini.

Di slider.component.html,, kita telah memiliki template HTML. Langkah berikutnya adalah mengikat template ini dengan sliderArray.

5. Mengikat data dengan template

Kita akan mengikat data dengan template menggunakan Perintah *ngFor. Terakhir, kita akan menambahkan transformasi di template agar penggeser berfungsi.

Tahap ini berisi tiga langkah:

  • Mengikat sliderArray ke template
  • Menambahkan Binding Peristiwa untuk tombol penggeser
  • Menambahkan transformasi CSS menggunakan ngStyle dan ngClass

Mengikat slideArray ke komponen

Kita memiliki penampung yang berisi img-container, a text-container, dan a slider.

Kita akan mengikat data di ketiga penampung menggunakan perintah *ngFor.

<div class="container">
 <div class="img-container" *ngFor="let i of sliderArray; let select = index;">
   <img src="{{i.img}}" alt="{{i.alt}}" >
 </div>

 <div>
   <div class="text-container">
     <div class="page-text" *ngFor="let i of sliderArray;let select = index;">
       <h3>{{i.text}}</h3>
     </div>
   </div>
 </div>

</div>

<div class="slider">
 <div class="slide-button-parent-container" *ngFor="let i of sliderArray; let x =index">
    <div class="select-box">
     <div class="slide-button">
     </div>
    </div>
 </div>
</div>

Mengikat Peristiwa ke slideArray

Setelah data diikat, kita akan mengikat peristiwa klik ke setiap tombol geser menggunakan click binding Angular. Kita akan membuat fungsi bernama selected(x), dengan x adalah indeks array.

selected(x) {
 this.downSelected(x);
 this.selectedIndex = x;
}

downSelected(i) {
  this.transform =  100 - (i) * 50;
  this.selectedIndex = this.selectedIndex + 1;
  if(this.selectedIndex > 4) {
    this.selectedIndex = 0;
  }
}

Poin yang perlu diingat di sini:

  • Fungsi yang tidak dipilih akan menurunkan nilai properti transformasi sebanyak lima puluh kali saat indeks diteruskan pada klik fungsi selected.
  • Logika ini menerjemahkan penampung teks menjadi 100%, 50%, -50%, -100% yang menghasilkan empat status yang berbeda.

Menambahkan transformasi CSS menggunakan ngStyle & ngClass

Awalnya kami menetapkan semua gambar pada opasitas nol. Kami menambahkan class selected menggunakan ngClass directive ketika indeks yang dipilih menjadi sama dengan indeks gambar. Class selected ini menambahkan opasitas senilai satu ke gambar, yang membuat gambar dapat dilihat oleh pengguna.

<div class="img-container"  *ngFor="let i of sliderArray; let select = index;"
      [ngClass]="{'selected': select == selectedIndex}">
</div>

Setelah itu, kita akan menerjemahkan penampung teks sesuai dengan nilai transform yang dihitung menggunakan fungsi select().

<div [ngStyle]="{'transform': 'translateY('+ transform + '%' +')', 'transition': '.8s'}">
</div>

Setelah melakukan semua langkah ini, Anda dapat mengetahui kode akhir seperti yang disediakan di bawah ini:

<div class="container">
 <div class="img-container"  *ngFor="let i of sliderArray; let select = index;"
      [ngClass]="{'selected': select == selectedIndex}">
   <img src="{{i.img}}" alt="{{i.alt}}" >
 </div>

 <!--</div>-->
 <div [ngStyle]="{'transform': 'translateY('+ transform + '%' +')', 'transition': '.8s'}">
   <div class="text-container">
     <div class="page-text" *ngFor="let i of sliderArray;let select = index;" [ngClass]="{'selected': select == selectedIndex}">
       <h3>{{i.text}}</h3>
     </div>
   </div>
 </div>

</div>

<div class="slider">
 <div class="slide-button-parent-container"  *ngFor="let i of sliderArray; let x =index" (click)="selected(x)" >
    <div class="select-box">
     <div   class="slide-button" [ngClass]="{'slide-button-select': x == selectedIndex}" >
     </div>
    </div>
 </div>
</div>

6. Mengubah komponen menjadi elemen Angular

Prosedur ini terdiri dari lima langkah:

  • Menggunakan Shadow DOM untuk Elemen Angular
  • Memanfaatkan entryComponents
  • Mengimpor dan menggunakan modul CreateCustomElement dari @angular/elements
  • Menentukan custom-element
  • Menjalankan Metode ngDoBootstrap

Menggunakan DOM Bayangan untuk Elemen Angular

Sekarang kita sudah menjalankan penggeser gambar. Kita hanya perlu membuatnya menjadi Angular Element.

Bagian yang menyenangkan adalah hanya perlu perubahan kecil untuk membuat komponen DOM menjadi DOM bayangan.

Kita perlu mengimpor modul ViewEncapsulation dan menggunakan metode ShadowDom dari modul tersebut.

@Component({
 selector: 'app-slider',
 templateUrl: './slider.component.html',
 styleUrls: ['./slider.component.css'],
 encapsulation: ViewEncapsulation.ShadowDom
})

Memanfaatkan entryComponents

entryComponents adalah komponen yang akan dimuat Angular secara paksa. Anda menentukan entryComponents dengan melakukan bootstrap dalam NgModule.

Di sini, kita akan menentukan SliderComponent dalam array entryComponents di dalam @NgModule.

@NgModule({
 declarations: [
   SliderComponent
 ],
 imports: [
   BrowserModule,
   HttpClientModule
 ],
 entryComponents: [SliderComponent],
})

Mengimpor dan menggunakan Modul createCustomElement

Di sini, kita perlu menggunakan Modul createCustomElement dari @angular/elements.. Anda perlu menggunakan SliderComponent, sebagai parameter untuk fungsi createCustomElement. Setelah itu, kita harus mendaftarkan slider di DOM.

import { createCustomElement } from '@angular/elements';

export class AppModule {
 constructor(private injector: Injector) {
   const slider = createCustomElement(SliderComponent, { injector });
    }
}

Untuk mendaftarkan penggeser sebagai elemen DOM, kita akan menentukannya menggunakan metode customElements.define.

customElements.define('motley-slider', slider);

Terakhir, kita harus mem-bootstrap elemen kustom ini menggunakan metode ngDoBootstrap(). Kode lengkapnya akan terlihat seperti ini:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule, Injector } from '@angular/core';
import { createCustomElement } from '@angular/elements';
import { SliderComponent } from './slider/slider.component';
import { HttpClientModule} from "@angular/common/http";

@NgModule({
 declarations: [
   SliderComponent
 ],
 imports: [
   BrowserModule,
   HttpClientModule
 ]
})
export class AppModule {
 constructor(private injector: Injector) {
   const slider = createCustomElement(SliderComponent, { injector });
   customElements.define('motley-slider', slider);
 }

 ngDoBootstrap() {}

}

Memaketkan Elemen Angular

Kita perlu mengubah package.json dengan perintah baru. Kita akan mengubah objek skrip di dalam file package.json.

Mari periksa objek skrip yang telah diubah:

"scripts": {
 "ng": "ng",
 "start": "ng serve",
 "build": "ng build --prod --output-hashing=none",
 "package": "cat dist/my-app/{runtime,polyfills,scripts,main}.js | gzip > elements.js.gz",
 "serve": "http-server",
 "test": "ng test",
 "lint": "ng lint",
 "e2e": "ng e2e"
}

Sekarang, kita dapat menjalankan perintah ng build & ng package dan menjalankan ng serve untuk menyalurkan folder dist/ yang dihasilkan dengan menggunakan perintah build. Selain itu, kita dapat menggunakan gzip yang diperoleh dari perintah ng package. Ekstrak file tersebut dan selanjutnya file dapat dipublikasikan sebagai npm module.

bug_report Laporkan kesalahan