Angular front end-2 basic learn for angular.pptx

angular basic

1. Pengenalan Typescript Mega Jaya., S.T., M.TI

2. Apa itu Typescript? TypeScript adalah bahasa pemrograman open source yang dikembangkan oleh Microsoft, yang merupakan superset dari JavaScript. Artinya, semua kode JavaScript yang valid juga valid di TypeScript, namun TypeScript menambahkan fitur-fitur seperti tipe data statis untuk meningkatkan keandalan dan skalabilitas kode. Tipe Data Statis: Fitur ini memungkinkan kita untuk menentukan tipe data variabel saat penulisan kode, yang membantu mendeteksi kesalahan lebih awal saat proses kompilasi, bukan saat runtime.

3. Tipe Data Primitive types: Tipe data dasar yang sering digunakan, seperti string, number, dan boolean Array Object Any : Tipe data yang dapat berupa tipe data apa pun Union: Tipe data yang memungkinkan sebuah variabel memiliki lebih dari satu tipe data Optional types: Tipe data yang digunakan ketika sebuah properti atau parameter bersifat opsional Null : Tipe data yang hanya memiliki satu nilai valid null Undefined : Tipe data yang berarti nilai tersebut tidak ditetapkan atau diinisialisasi

4. Contoh Interface adalah fitur yang mendefinisikan struktur Object dan Class. Interface berfungsi seperti kontrak yang memastikan Object atau Class mematuhi bentuk tertentu.

5. Variable nama yang digunakan untuk menyimpan dan memanipulasi data. Contoh: let, const.

6. Function Fungsi dalam TypeScript adalah blok kode yang digunakan untuk melakukan tugas tertentu

7. Apa itu Component? Komponen dalam Angular adalah blok bangunan dasar yang menyusun antarmuka pengguna (UI) aplikasi Angular. Komponen Angular dapat diibaratkan sebagai blok bangunan atau Lego yang digunakan untuk membuat aplikasi.

8. Fitur komponen Angular Komponen Angular dapat digunakan kembali di berbagai bagian aplikasi tanpa perlu menulis ulang kode. Komponen Angular dapat mengatur proyek menjadi bagian-bagian yang mudah dikelola dan terorganisasi dengan baik. Komponen Angular dapat diidentifikasi dengan sufiks component (misalnya, my-custom-name.component.ts). Komponen Angular dapat memiliki statusnya sendiri. Komponen Angular dapat dikaitkan dengan template dan merupakan bagian dari direktif. Struktur komponen Angular Komponen Angular terdiri dari tiga bagian utama: template, Class, dan metadata. Komponen Angular dirancang untuk memiliki satu tanggung jawab tunggal. Komponen Angular dapat disatukan dengan menggunakan komponen di dalam komponen lain.

9. Property Binding Property binding di Angular adalah mekanisme untuk menetapkan nilai ke properti HTML atau DOM secara dinamis Contoh penggunaan property binding Mengaktifkan fitur tombol Menetapkan jalur gambar secara terprogram Berbagi nilai antar komponen Mengatur properti seperti class, href, src, textContent, dll. Mengatur properti komponen atau direktif kustom Cara kerja property binding Property binding membangun saluran komunikasi dari kelas komponen ke templat (file HTML) Perubahan pada data komponen secara otomatis memperbarui templat yang dirender Perubahan pada salah satu komponen secara otomatis tercermin pada komponen lainnya

10. Contoh

11. Event Binding Event binding dalam Angular adalah cara untuk mengontrol event dari suatu elemen. Event binding memungkinkan pengguna untuk mendengarkan dan menanggapi tindakan pengguna seperti klik, sentuhan, gerakan tetikus, dan penekanan tombol.

12. Life Cycle Hooks Lifecycle hook dalam Angular adalah metode yang dijalankan pada titik tertentu selama siklus hidup komponen. Metode ini memungkinkan Anda untuk menerapkan logika atau operasi khusus pada titik waktu tertentu. ngOnInit(), ngDoCheck(), ngAfterContentInit(), ngAfterContentChecked(), ngAfterViewInit(), ngAfterViewChecked(), ngOnDestroy(). Contoh: Manfaat lifecycle hook: Membantu mengelola dampak deteksi perubahan data, Memanfaatkan siklus hidup komponen Angular, Mengambil data eksternal, Mengelola status sebelum dan setelah komponen dirender.

13. @Input() @Input() adalah dekorator Angular yang digunakan untuk meneruskan data dari komponen induk ke komponen anak. Dekorator ini merupakan salah satu yang paling sering digunakan dalam aplikasi Angular. @Output() Dalam Angular, @Output() adalah dekorator yang digunakan untuk membuat properti dalam komponen anak yang dapat mengirim data ke komponen induk. Ini memungkinkan komunikasi satu arah dari komponen anak ke komponen induk.

14. Contoh

15. Emit & Event Emitter Dalam Angular, emit() adalah metode yang digunakan dengan EventEmitter untuk mengirimkan atau memancarkan data dari komponen anak ke komponen induk. Berikut adalah penjelasan lebih rinci: EventEmitter: EventEmitter adalah kelas dalam Angular yang digunakan untuk membuat peristiwa khusus. Komponen anak menggunakan EventEmitter untuk memberi tahu komponen induk ketika sesuatu terjadi (misalnya, tombol diklik, data berubah). emit(): Metode emit() adalah bagian dari EventEmitter. Ketika emit() dipanggil, ia mengirimkan data apa pun yang diteruskan sebagai argumen ke komponen induk yang mendengarkan peristiwa tersebut. Komponen induk mendengarkan peristiwa ini menggunakan pengikatan peristiwa (misalnya, (namaPeristiwa)="namaFungsi($event)").

16. Component Anak:

17. Component Induk :

18. Decorator Dalam Angular, dekorator adalah fungsi khusus yang digunakan untuk memodifikasi atau menambahkan metadata ke kelas, properti, metode, atau parameter. Dekorator memungkinkan Anda untuk menambahkan fungsionalitas tambahan ke kode Anda tanpa mengubah struktur dasarnya. Jenis-jenis Dekorator di Angular: Class Decorator: @Component: Mendefinisikan komponen Angular. @Directive: Mendefinisikan direktif Angular. @NgModule: Mendefinisikan modul Angular. @Injectable: Mendefinisikan layanan yang dapat diinjeksikan. Decorator Property: @Input: Mendefinisikan properti input untuk komponen. @Output: Mendefinisikan properti output untuk komponen. @ViewChild dan @ViewChildren: Mengakses elemen DOM dari komponen. @ContentChild dan @ContentChildren: Mengakses elemen konten dari komponen. Dekorator Metode: @HostListener: Mendengarkan peristiwa DOM. Decorator parameter: @Inject: Menginjeksikan dependensi ke dalam konstruktor.

19. Tugas: Buat 3 component (Kelas, Murid, Materi) Data Murid & Materi di component Kelas Buat Nama Murid dari componet Murid Buat List Materi dari component Materi