Pengantar Angular

1. Pengantar

Yang akan Anda build

Dalam codelab ini, Anda akan membuat aplikasi perumahan dengan Angular. Aplikasi yang sudah selesai akan menampilkan kemampuan untuk melihat listingan rumah berdasarkan penelusuran pengguna, dan melihat detail lokasi perumahan.

Anda akan membuat semuanya dengan Angular menggunakan alat canggih Angular dan integrasi browser yang hebat.

Ini adalah aplikasi yang akan Anda buat hari ini

Yang akan Anda pelajari

• Cara menggunakan Angular CLI untuk scaffold project baru.
• Cara menggunakan komponen Angular untuk membuat antarmuka pengguna.
• Cara berbagi data di komponen dan bagian lain aplikasi.
• Cara menggunakan pengendali peristiwa di Angular.
• Cara men-deploy aplikasi ke Firebase Hosting menggunakan CLI Angular.

Yang Anda butuhkan

• Pengetahuan dasar tentang HTML, CSS, TypeScript (atau JavaScript), Git, dan command line.

2. Penyiapan lingkungan

Menyiapkan lingkungan lokal Anda

Untuk menyelesaikan codelab ini, Anda perlu menginstal software berikut di mesin lokal Anda:

• Node versi ^12.20.2, ^14.15.5 , atau ^16.10.0.
• Editor Kode - VS Code atau editor kode lain pilihan Anda.
• Plugin Layanan Bahasa Angular untuk Kode VS.

Menginstal CLI Angular

Setelah semua dependensi dikonfigurasi, Anda dapat menginstal CLI CLI dari jendela command line di komputer:

npm install -g @angular/cli

Untuk mengonfirmasi bahwa konfigurasinya sudah benar, jalankan perintah ini dari command line komputer Anda:

ng –version

Jika perintah berhasil, Anda akan menemukan pesan yang mirip dengan screenshot di bawah.

Mendapatkan kode

Kode untuk codelab ini berisi langkah-langkah menengah dan solusi akhir di berbagai cabang. Untuk memulai, download kode dari GitHub

1. Buka tab browser baru, lalu buka https://github.com/angular/introduction-to-angular.
2. Dari fork jendela command line dan clone repositori dan cd introduction-to-angular/ ke repositori.
3. Dari cabang kode awal, masukkan git checkout get-started.
4. Buka kode di editor kode pilihan Anda, lalu buka folder project introduction-to-angular.
5. Dari jendela command line, jalankan npm install untuk menginstal dependensi yang diperlukan untuk menjalankan server.
6. Untuk menjalankan server web Angular di latar belakang, buka jendela command line terpisah dan jalankan ng serve untuk memulai server.
7. Buka tab browser di http://localhost:4200.

Setelah aplikasi aktif dan berjalan, Anda dapat mulai membuat aplikasi Fairhouse.

3. Membuat komponen pertama

Komponen adalah elemen penyusun utama untuk aplikasi Angular. Anggap komponen sebagai batu bata yang digunakan untuk konstruksi. Saat memulai, batu bata tidak memiliki banyak daya, tetapi jika digabungkan dengan batu bata lain, Anda dapat membangun bangunan yang luar biasa.

Hal yang sama berlaku untuk aplikasi yang dibuat dengan Angular.

Komponen memiliki 3 aspek utama:

• File HTML untuk template.
• File CSS untuk gaya.
• File TypeScript untuk perilaku aplikasi.

Komponen pertama yang akan Anda perbarui adalah AppComponent.

1. Buka app.component.html di editor kode Anda; ini adalah file template untuk AppComponent.
2. Hapus semua kode dalam file ini dan ganti dengan ini:

<main>
  <header><img src="../assets/logo.svg" alt="fairhouse">Fairhouse</header>
  <section>
  </section>
</main>

3. Simpan kode dan periksa browser. Dengan server pengembangan yang berjalan, perubahan tercermin dalam browser saat kita menyimpan.

Selamat, Anda berhasil mengupdate aplikasi Angular pertama Anda. Temukan berbagai hal hebat lainnya di depan. Mari kita lanjutkan.

Selanjutnya, Anda akan menambahkan kolom teks untuk penelusuran, dan tombol ke UI.

Komponen memiliki banyak manfaat, salah satunya adalah kemampuan untuk mengatur UI. Anda akan membuat komponen yang berisi kolom teks, tombol untuk penelusuran, dan pada akhirnya daftar lokasi.

Untuk membuat komponen baru ini, Anda akan menggunakan CLI CLI. CLI Angular adalah kumpulan alat command line yang membantu perancah, deployment, dan lainnya.

1. Dari command line, masukkan:

ng generate component housing-list

Berikut adalah bagian dari perintah ini:

• ng adalah CLI Angular.
• Perintah ini menghasilkan jenis tindakan yang akan dilakukan. Dalam hal ini, buat scaffolding untuk sesuatu.
• Komponen ini mewakili "apa" yang ingin kita buat.
• daftar perumahan adalah nama komponen.

2. Selanjutnya, tambahkan komponen baru ke template AppComponent. Di app.component.html, perbarui kode template:

<main>
  <header><img src="../assets/logo.svg" alt="fairhouse">Fairhouse</header>
 <section>
   <app-housing-list></app-housing-list>
 </section>
</main>

3. Simpan semua file dan kembali ke browser untuk mengonfirmasi bahwa pesan housing-list works ditampilkan.
4. Di editor kode, buka housing-list.component.html, hapus kode yang ada, lalu ganti dengan:

<label for="location-search">Search for a new place</label>
<input id="location-search" placeholder="Ex: Chicago"><button>Search</button>

5. Di housing-list.component.css, tambahkan gaya berikut:

input, button {
    border: solid 1px #555B6E;
    border-radius: 2px;
    display: inline-block;
    padding: 0;
}
input {
    width: 400px;
    height: 40px;
    border-radius: 2px 0 0 2px;
    color: #888c9c;
    border: solid 1px #888c9c;
    padding: 0 5px 0 10px;
}

button {
    width: 70px;
    height: 42px;
    background-color: #4468e8;
    color: white;
    border: solid 1px #4468e8;
    border-radius: 0 2px 2px 0;
}

article {
    margin: 40px 0 10px 0;
    color: #202845;
}
article, article > p {
    color: #202845;
}

article> p:first-of-type {
    font-weight: bold;
    font-size: 22pt;
}

img {
    width: 490px;
    border-radius: 5pt;
}

label {
    display: block;
    color: #888c9c;
}

6. Simpan file, lalu kembali ke browser.

Aplikasi Angular kita mulai terbentuk.

4. Penanganan Peristiwa

Aplikasi memiliki kolom input dan tombol, tetapi interaksi tidak ada. Di web, Anda biasanya berinteraksi dengan kontrol dan memanggil penggunaan peristiwa dan pengendali peristiwa. Anda akan menggunakan strategi ini untuk membuat aplikasi.

Anda akan melakukan perubahan ini di housing-list.component.html.

Untuk menambahkan pengendali klik, Anda perlu menambahkan pemroses peristiwa ke tombol. Di Angular, sintaksisnya adalah untuk mengapit nama peristiwa dalam tanda kurung dan memberinya nilai. Di sini, beri nama metode yang dipanggil saat tombol diklik. Sebut saja searchHousingLocations. Jangan lupa untuk menambahkan tanda kurung di akhir nama fungsi ini untuk memanggilnya.

1. Perbarui kode tombol agar cocok dengan kode ini:

<button (click)="searchHousingLocations()">Search</button>

2. Simpan kode ini dan periksa browser. Sekarang terjadi error kompilasi:

Aplikasi melempar error ini karena metode searchHousingLocations tidak ada, jadi Anda harus mengubahnya.

3. Di housing-list.component.ts, tambahkan metode baru di akhir isi class HousingListComponent:

 searchHousingLocations() {}

Anda akan segera mengisi detail untuk metode ini.

4. Simpan kode ini untuk mengupdate browser dan mengatasi error.

Langkah berikutnya adalah mendapatkan nilai kolom input dan meneruskannya sebagai argumen ke metode searchHousingLocations. Anda akan menggunakan fitur Angular yang disebut variabel template, yang menyediakan cara untuk mendapatkan referensi ke elemen dalam template dan berinteraksi dengannya.

1. Di housing-list.component.html, tambahkan atribut bernama search, dengan hashtag sebagai awalan pada input.

<label for="location-search">Search for a new place</label>
<input id="location-search" #search><button (click)="searchHousingLocations()">Search</button>

Sekarang, kita memiliki referensi ke input. Kita juga memiliki akses ke properti .value input tersebut.

2. Teruskan nilai input ke metode searchHousingLocations.

<input id="location-search" #search><button (click)="searchHousingLocations(search.value)">Search</button>

Hingga saat ini, Anda telah meneruskan nilai sebagai parameter, tetapi mari kita perbarui metode untuk menggunakan parameter. Saat ini, parameter digunakan dalam perintah console.log; kemudian digunakan sebagai parameter penelusuran.

3. Di housing-list.component.ts, tambahkan kode ini:

 searchHousingLocations(searchText: string) {
   console.log(searchText);
 }

4. Simpan kode, lalu buka Chrome DevTools di browser dan buka tab Console. Masukkan nilai apa pun ke dalam input. Pilih Telusuri dan verifikasi bahwa nilai ditampilkan di tab Konsol pada Chrome DevTools.

Anda telah berhasil menambahkan pengendali peristiwa dan aplikasi dapat mengambil input dari pengguna.

5. Hasil penelusuran

Langkah berikutnya adalah menampilkan hasil berdasarkan input pengguna. Setiap lokasi memiliki properti string untuk nama, kota, negara bagian, foto, properti angka untuk availableUnits, dan dua properti boolean untuk laundry dan wifi:

name: "Location One",
city: "Chicago",
state: "IL",
photo: "/path/to/photo.jpg",
availableUnits: 4,
wifi: true,
laundry: true

Anda dapat mewakili data ini sebagai objek JavaScript biasa, tetapi lebih baik menggunakan dukungan TypeScript di Angular. Menggunakan tipe untuk membantu menghindari error selama waktu build.

Kita dapat menggunakan jenis untuk menentukan karakteristik data, yang juga dikenal sebagai "membentuk data." Di TypeScript, antarmuka biasanya digunakan untuk tujuan ini. Mari kita buat antarmuka yang mewakili data lokasi perumahan kita. Di terminal editor, gunakan Angular CLI untuk membuat jenis HousingLocation.

1. Untuk melakukannya, masukkan:

ng generate interface housing-location

2. Di housing-location.ts, tambahkan detail jenis untuk antarmuka. Berikan setiap jenis properti yang sesuai berdasarkan desain kami:

export interface HousingLocation {
  name: string,
  city: string,
  state: string,
  photo: string,
  availableUnits: number,
  wifi: boolean,
  laundry: boolean,
}

3. Simpan file dan buka app.component.ts.
4. Untuk membuat array yang berisi data yang merepresentasikan lokasi perumahan dengan mengimpor antarmuka lokasi perumahan dari ./housing-location.

import { HousingLocation } from './housing-location';

5. Perbarui class AppComponent untuk menyertakan properti yang disebut housingLocationList dari jenis HousingLocation[]. Isi array dengan nilai berikut:

housingLocationList: HousingLocation[] = [
  {
    name: "Acme Fresh Start Housing",
    city: "Chicago",
    state: "IL",
    photo: "../assets/housing-1.jpg",
    availableUnits: 4,
    wifi: true,
    laundry: true,
  },
  {
    name: "A113 Transitional Housing",
    city: "Santa Monica",
    state: "CA",
    photo: "../assets/housing-2.jpg",
    availableUnits: 0,
    wifi: false,
    laundry: true,
  },
  {
    name: "Warm Beds Housing Support",
    city: "Juneau",
    state: "AK",
    photo: "../assets/housing-3.jpg",
    availableUnits: 1,
    wifi: false,
    laundry: false,
  }
];

Anda tidak perlu membuat instance instance baru dari class untuk mendapatkan objek; kita dapat memanfaatkan informasi jenis yang disediakan oleh antarmuka. Data dalam objek harus sama "bentuk"; itu harus sama dengan properti yang ditentukan pada antarmuka.

Data disimpan di app.component.ts, tetapi kita harus membagikannya dengan komponen lain. Salah satu solusinya adalah menggunakan layanan di Angular tetapi untuk mengurangi kompleksitas aplikasi, kita akan menggunakan Dekorator input yang disediakan oleh Angular. Dekorator masukan memungkinkan komponen menerima nilai dari template. Anda akan menggunakannya untuk berbagi array housingLocationList dengan HousingListComponent.

6. Di housing-list.component.ts, impor input dari @angular/core serta HousingLocation dari ./housingLocation.

import { Component, OnInit, Input } from '@angular/core';
import {HousingLocation } from '../housing-location';

7. Buat properti yang disebut locationList dalam isi class komponen. Anda akan menggunakan Input sebagai dekorator untuk locationList.

export class HousingListComponent implements OnInit {

  @Input() locationList: HousingLocation[] = [];
  ...
}

Jenis properti ini ditetapkan ke HousingLocation[].

8. Di app.component.html, perbarui elemen app-housing-list untuk menyertakan atribut yang disebut locationList dan tetapkan nilainya ke housingLocationList.

<main>
 ...
 <app-housing-list [locationList]="housingLocationList"></app-housing-list>
</main>

Atribut locationList harus diapit dalam tanda kurung siku ( [ ] ) sehingga Angular dapat secara dinamis mengikat nilai properti locationList ke variabel atau ekspresi. Jika tidak, Angular akan menampilkan nilai di sisi kanan tanda sama dengan sebagai string.

Jika Anda mendapatkan error pada tahap ini, periksa apakah:

• Ejaan nama atribut input sesuai dengan ejaan dalam properti di class TypeScript. Kasus juga penting di sini.
• Nama properti di sisi kanan tanda sama dengan dieja dengan benar.
• Properti input diapit oleh tanda kurung siku.

Konfigurasi berbagi data selesai. Langkah berikutnya adalah menampilkan hasil di browser. Karena data dalam format array, kita harus menggunakan fitur Angular yang memungkinkan Anda melakukan loop pada data dan pengulangan elemen dalam template, *ngFor.

1. Di housing-list.component.html, perbarui elemen artikel dalam template agar menggunakan *ngFor, sehingga Anda dapat menampilkan entri array di browser:

<article *ngFor="let location of locationList"></article>

Nilai yang ditetapkan ke atribut ngFor adalah sintaksis template Angular. Tindakan ini akan membuat variabel lokal di template. Angular menggunakan variabel lokal dalam cakupan elemen article antara tag terbuka dan tag penutup.

Untuk mempelajari ngFor dan sintaksis template lebih lanjut, lihat Dokumentasi Angular.

ngFor mengulangi elemen artikel untuk setiap entri array locationList. Berikutnya, Anda akan menampilkan nilai dari variabel lokasi.

2. Perbarui template untuk menambahkan elemen paragraf(<p>). Turunan elemen paragraf adalah nilai interpolasi dari properti lokasi:

<input #search><button (click)="searchHousingLocations(search.value)">Search</button>
<article *ngFor="let location of locationList">
   <p>{{location.name}}</p>
</article>

Di template Angular, Anda dapat menggunakan interpolasi teks untuk menampilkan nilai dengan sintaksis tanda kurung kurawal ganda ( {{ }}).

3. Simpan dan kembali ke browser. Sekarang, aplikasi akan menampilkan satu label untuk setiap entri array dalam array locationList.

Data dibagikan dari komponen aplikasi ke komponen daftar perumahan, dan kami melakukan iterasi pada setiap nilai tersebut untuk menampilkannya di browser.

Kita baru saja membahas beberapa cara untuk berbagi data antarkomponen, menggunakan beberapa sintaksis template baru dan perintah ngFor.

6. Memfilter hasil penelusuran

Saat ini, aplikasi menampilkan semua hasil, bukan hasil berdasarkan penelusuran pengguna. Untuk mengubahnya, Anda perlu mengupdate HousingListComponent agar aplikasi dapat berfungsi sebagaimana mestinya.

1. Di housing-list.component.ts, perbarui HousingListComponent agar memiliki properti baru yang disebut results yang berjenis HousingLocation[]:

export class HousingListComponent implements OnInit {

 @Input() locationList: HousingLocation[] = [];
 results: HousingLocation[] = [];
 ...

Array hasil mewakili lokasi perumahan yang cocok dengan penelusuran pengguna. Langkah berikutnya adalah memperbarui metode searchHousingLocations untuk memfilter nilai.

2. Hapus console.log dan perbarui kode untuk menetapkan properti hasil ke output pemfilteran locationList, yang difilter oleh searchText:

searchHousingLocations(searchText: string) {
  this.results = this.locationList.filter(
  (location: HousingLocation) => location.city
    .toLowerCase()
    .includes(
        searchText.toLowerCase()
  ));
}

Dalam kode ini, kita menggunakan metode filter array dan hanya menerima nilai yang berisi searchText. Semua nilai dibandingkan menggunakan versi huruf kecil string.

Dua hal yang perlu diperhatikan:

• Awalan this harus digunakan saat mereferensikan properti class di dalam metode. Itulah sebabnya kami menggunakan this.results dan this.locationList.
• Fungsi penelusuran di sini hanya cocok dengan properti kota dari lokasi, tetapi Anda dapat memperbarui kode agar menyertakan lebih banyak properti.

Meskipun kode ini berfungsi sebagaimana mestinya, Anda dapat memperbaikinya.

3. Perbarui kode untuk mencegah penelusuran melalui array jika searchText kosong:

searchHousingLocations(searchText: string) {
  if (!searchText) return;
  ...
}

Metode ini telah diperbarui dan ada perubahan template yang perlu Anda buat sebelum hasilnya ditampilkan di browser.

4. Di housing-location.component.html, ganti locationList dengan results di ngFor:

<article *ngFor="let location of results">...</article>

5. Simpan kode dan kembali ke browser. Dengan menggunakan input tersebut, telusuri lokasi dari contoh data (misalnya, Chicago).

Aplikasi hanya menampilkan hasil yang cocok:

Anda baru saja menyelesaikan fungsi tambahan yang diperlukan untuk menautkan input pengguna sepenuhnya ke hasil penelusuran. Aplikasi ini hampir selesai.

Selanjutnya, Anda akan menampilkan detail selengkapnya tentang aplikasi untuk menyelesaikannya.

7. Menampilkan detail

Aplikasi harus mendukung untuk mengklik hasil penelusuran dan menampilkan informasi di panel detail. HousingListComponent mengetahui hasil yang telah diklik sejak data ditampilkan dalam komponen tersebut. Kita memerlukan cara untuk membagikan data dari HousingListComponent ke komponen induk AppComponent.

Di Angular, @Input() mengirim data dari induk ke turunan, sementara @Output() memungkinkan komponen mengirim peristiwa dengan data dari turunan ke komponen induk. Dekorator output menggunakan EventEmitter untuk memberi tahu pemroses apa pun peristiwa apa pun. Dalam hal ini, Anda ingin menampilkan peristiwa yang mewakili klik hasil penelusuran. Bersama dengan peristiwa pemilihan, Anda ingin mengirim item yang dipilih sebagai bagian dari payload.

1. Di housing-list.component.ts, perbarui import untuk menyertakan Output dan EventEmitter dari @angular/core dan HousingLocation dari lokasinya:

import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
import { HousingLocation } from '../housing-location';

2. Pada bagian isi HousingListComponent, perbarui kode untuk menambahkan properti baru yang disebut locationSelectedEvent dari jenis EventEmitter<HousingLocation>();:

@Output() locationSelectedEvent = new EventEmitter<HousingLocation>();

Properti locationSelectedEvent didekorasi dengan @Output(), yang menjadikannya bagian dari API komponen ini. Dengan EventEmitter, Anda memanfaatkan API generik untuk class dengan menyediakan jenis HousingLocation. Saat peristiwa dimunculkan oleh locationSelectedEvent, pemroses ke peristiwa dapat mengharapkan data yang menyertainya adalah jenis HousingLocation. Ini adalah jenis keamanan yang mendukung pengembangan kami dan mengurangi potensi error.

Kita perlu memicu locationSelectedEvent setiap kali pengguna mengklik lokasi dari daftar.

3. Perbarui HousingListComponent untuk menambahkan metode baru bernama selectLocation yang menerima nilai jenis housingLocation sebagai parameter:

selectHousingLocation(location: HousingLocation) { }

4. Di bagian isi metode, tampilkan peristiwa baru dari emitor locationSelectedEvent. Nilai yang ditampilkan adalah lokasi yang dipilih oleh pengguna.

selectHousingLocation(location: HousingLocation) {
  this.locationSelectedEvent.emit(location);
}

Mari kita tautkan ini ke template.

5. Di housing-list-component.html, perbarui elemen artikel agar memiliki turunan tombol baru dengan click event. Peristiwa ini memanggil metode selectHousingLocation di class TypeScript dan meneruskan referensi ke location yang diklik sebagai argumen.

<article *ngFor="let location of results" >
  <p>{{location.name}}</p>
  <button (click)="selectHousingLocation(location)">View</button>
</article>

Lokasi perumahan kini memiliki tombol yang dapat diklik dan Anda meneruskan nilai kembali ke komponen.

Langkah terakhir dalam proses ini adalah mengupdate AppComponent untuk memproses peristiwa dan memperbarui tampilan.

6. Di app.component.html, perbarui elemen app-housing-list untuk memproses locationSelectedEvent dan menangani peristiwa dengan metode updateSelectedLocation:

<app-housing-list [locationList]="housingLocationList" (locationSelectedEvent)="updateSelectedLocation($event)"></app-housing-list>

$event disediakan oleh Angular saat menangani pengendali peristiwa di template. Argumen $event adalah objek dari jenis HousingLocation karena itulah yang kami tetapkan sebagai parameter jenis EventEmitter. Angular menangani semua ini untuk Anda. Anda hanya perlu mengonfirmasi bahwa template sudah benar.

7. Di app.component.ts, perbarui kode untuk menyertakan properti baru yang disebut selectedLocation dari jenis HousingLocation | undefined.

selectedLocation: HousingLocation | undefined;

Ini menggunakan fitur TypeScript yang disebut Union Type. Gabungan memungkinkan variabel menerima salah satu dari beberapa jenis. Dalam kasus ini, Anda ingin nilai selectedLocation menjadi HousingLocation atau undefined karena Anda tidak menentukan nilai default untuk selectedLocation.

Anda perlu menerapkan updateSelectedLocation.

8. Tambahkan metode baru bernama updateSelection dengan parameter yang disebut location dan dengan jenis HousingLocation.

updateSelectedLocation(location: HousingLocation) { } searchHousingLocations() {}

9. Dalam isi metode, tetapkan nilai selectedLocation menjadi parameter location:

updateSelectedLocation(location: HousingLocation) {
  this.selectedLocation = location;
}

Setelah bagian ini selesai, langkah terakhir adalah memperbarui template untuk menampilkan lokasi yang dipilih.

10. Di app.component.html, tambahkan elemen <article> baru yang akan kita gunakan untuk menampilkan properti lokasi yang dipilih. Perbarui template dengan kode berikut:

<article>
  <img [src]="selectedLocation?.photo">
  <p>{{selectedLocation?.name}}</p>
  <p>{{selectedLocation?.availableUnits}}</p>
  <p>{{selectedLocation?.city}}, {{selectedLocation?.state}}</p>
  <p>{{selectedLocation?.laundry ? "Has laundry" : "Does Not have laundry"}}</p>
  <p>{{selectedLocation?.wifi ? "Has wifi" : "Does Not have wifi"}}</p>
 </article>

Karena selectedLocation dapat berupa undefined, Anda menggunakan operator rantai opsional untuk mengambil nilai dari properti. Anda juga menggunakan sintaksis ternary untuk nilai boolean wifi dan laundry. Tindakan ini memberikan peluang untuk menampilkan pesan kustom, bergantung pada nilainya.

11. Simpan kode dan periksa browser. Telusuri lokasi dan klik salah satu untuk menampilkan detailnya:

Kelihatannya bagus, tapi masih ada masalah yang perlu diselesaikan. Saat halaman dimuat di awal, ada beberapa artefak teks dari panel detail yang seharusnya tidak ditampilkan. Angular memiliki beberapa cara untuk menampilkan konten secara bersyarat yang akan Anda gunakan di langkah berikutnya.

Untuk saat ini, pastikan Anda sudah menggunakan aplikasi ini hingga tahap selanjutnya. Berikut yang telah Anda terapkan sejauh ini:

• Anda dapat berbagi data dari komponen turunan ke komponen induk menggunakan dekorator Output dan EventEmitter.
• Anda juga berhasil mengizinkan pengguna untuk memasukkan nilai dan melakukan penelusuran menggunakan nilai tersebut.
• Aplikasi dapat menampilkan hasil penelusuran dan pengguna dapat mengkliknya untuk melihat detail selengkapnya.

Ini adalah pekerjaan yang bagus sejauh ini. Mari perbarui template dan selesaikan aplikasinya.

8 Memoles template

UI saat ini berisi artefak teks dari panel detail yang harus ditampilkan secara bersyarat. Kita akan menggunakan dua fitur Angular, ng-container dan *ngIf.

Jika Anda menerapkan perintah ngIf ke elemen article secara langsung, hal ini menyebabkan pergeseran tata letak saat pengguna membuat pilihan pertama. Untuk meningkatkan pengalaman ini, Anda dapat menggabungkan detail lokasi dalam elemen lain yang merupakan turunan dari article. Elemen ini tidak memiliki gaya atau fungsi dan hanya menambahkan bobot ke DOM. Untuk menghindari hal tersebut, Anda dapat menggunakan ng-container. Anda dapat menerapkan perintah, tetapi perintah tersebut tidak akan ditampilkan di DOM akhir.

1. Di app.component.html, perbarui elemen article agar cocok dengan kode ini:

<article>
  <ng-container>
  <img [src]="selectedLocation?.photo">
  <p>{{selectedLocation?.name}}</p>
  <p>{{selectedLocation?.city}}, {{selectedLocation?.state}}</p>
  <p>Available Units: {{selectedLocation?.availableUnits}}</p>
  <p>{{selectedLocation?.laundry ? "Has laundry" : "Does Not have laundry"}}</p>
  <p>{{selectedLocation?.wifi ? "Has wifi" : "Does Not have wifi"}}</p>
  </ng-container>
</article>

2. Selanjutnya, tambahkan atribut *ngIf ke elemen ng-container. Nilainya harus selectedLocation.

<article>
  <ng-container *ngIf="selectedLocation">
  ...
  </ng-container>
</article>

Sekarang aplikasi hanya menampilkan konten elemen ng-container jika selectedLocation adalah Truthy.

3. Simpan kode ini dan pastikan bahwa browser tidak lagi menampilkan artefak teks saat halaman dimuat.

Ada satu pembaruan akhir yang dapat dilakukan pada aplikasi kami. Hasil penelusuran dalam housing-location.component.html akan menampilkan detail selengkapnya.

4. Di housing-location.component.html, perbarui kode menjadi:

<label for="location-search">Search for a new place</label>
<input id="location-search" #search placeholder="Ex: Chicago"><button
    (click)="searchHousingLocations(search.value)">Search</button>
<article *ngFor="let location of results" (click)="selectHousingLocation(location)">
  <img [src]="location.photo" [alt]="location.name">
  <p>{{location.name}}</p>
  <p>{{location.city}}, {{location.state}}</p>
  <button (click)="selectHousingLocation(location)">View</button>
</article>

5. Simpan kode dan kembali ke browser untuk membuka aplikasi yang sudah selesai.

Aplikasi ini terlihat bagus sekarang dan berfungsi penuh. Bagus.

9. Selamat

Terima kasih telah mengikuti perjalanan ini dan menggunakan Angular untuk membangun Fairhouse.

Anda telah membuat antarmuka pengguna menggunakan Angular. Anda telah membuat komponen dan antarmuka menggunakan CLI CLI. Kemudian, Anda menggunakan fitur template canggih di Angular untuk membuat aplikasi fungsional yang menampilkan gambar, menangani peristiwa, dan lain-lain.

Apa selanjutnya?

Jika Anda ingin terus membangun fungsionalitas, berikut beberapa ide:

• Data di-hard code dalam aplikasi. Pemfaktoran ulang yang bagus adalah dengan menambahkan layanan yang berisi data.
• Halaman detail saat ini ditampilkan di halaman yang sama, tetapi akan menyenangkan jika Anda memindahkan detail ke halamannya sendiri dan memanfaatkan pemilihan rute Angular.
• Pembaruan lainnya adalah menghosting data di endpoint istirahat dan menggunakan paket HTTP di Angular untuk memuat data pada runtime.

Banyak kesempatan untuk bersenang-senang.