Angular 3 basic learn angular for all.pptx

angular basic

1. Directive & Pipe Mega Jaya., S.T., M.TI

2. Apa itu Directive? Direktif dalam Angular adalah kelas yang menambahkan perilaku tambahan ke elemen dalam aplikasi Angular. Direktif berfungsi untuk memanipulasi Document Object Model (DOM). Contoh Directive Direktif NgClass yang secara dinamis menambahkan atau menghapus kelas berdasarkan kondisi Direktif ngIf yang menambahkan atau menghapus elemen dari DOM berdasarkan ekspresi yang diberikan Direktif ngFor yang merupakan arahan struktural umum

3. C:\Users\JayaMega\Latihan1\src\app > ng generate directive complexHighlight

4. Lanjutkan dengan menambahkan code berikut di app.component.ts

5. Structural Directive ng g directive directives/show-if

6. Structural Directive Modify app.component.ts

7. Modify app.component.html

8. Pipe Dalam Angular, "pipe" adalah fitur yang digunakan untuk mentransformasi data tampilan (template) sebelum ditampilkan kepada pengguna. Pipes memungkinkan Anda untuk memformat, memfilter, atau memanipulasi data dengan cara yang deklaratif dan efisien. Pipe yang biasa digunakan: date number currency Buat list belanja dalam Array (Minimal 10 data) Buat status (Inprogress, Done, Cancel) Beri warna berbeda pada setiap list belanja sesuai dengan status Gunakan pipe untuk merubah text daftar belanja yang sudah DONE menjadi uppercase & italic Latihan

9. ng generate pipe pipes/capitalize Modify capitalize.pipe.ts

10. ng generate pipe pipes/capitalize Modify app.component.ts

11. Template-Driven Forms NgModel adalah direktif dalam Angular yang berfungsi untuk mengikat data dua arah antara model dan tampilan. NgModel digunakan untuk menyinkronkan data antara kolom input dan properti dalam Class Component. NgModel bermanfaat dalam formulir berbasis templat. NgModel dapat menyederhanakan tugas seperti validasi formulir dan pengiriman data. Belajar Form Contoh Directive Type form Class ngModel

12. Form Input tanpa ngModel Form Input menggunakan ngModel

13. Validasi Form Dalam pembuatan form seringkali kita perlu membuat validasi untuk memastikan nilai/value yang diinput sesuai dengan yang diharapkan. Validasi dasar Memeriksa apakah semua isian formulir sudah terisi data Memeriksa satu persatu setiap isian formulir dan memeriksa datanya Validasi format data Memeriksa kebenaran format dan nilai data yang dimasukkan

14. Type input Text Number Date Color Tel File Password dll Buat 5 form Input (Nama, Email, Password, No Telp & Alamat) Buat validasi jika form masih kosong Buat 1 function untuk mendapatkan input value dari form Munculkan seluruh value dibawah form