Angular Tips 4 : Integrasi AdminLTE dengan Angular 8 Bagian 3

Buat Dashboard Module

Buat Dasboard Component di dalam dashboard module

Buat Layout Module Layout Module ini akan digunakan sebagai layout utama website seperti header, footer, sidebar.

Buat topnavbar Component

Buat asidenavbar Component

Buat footernavbar Component

Buat settingsnavbar Component

Export Component di layout.module.ts Export seluruh component yang baru dibuat Read more about Angular Tips 4 : Integrasi AdminLTE dengan Angular 8 Bagian 3[…]

Angular Tips 4 : Integrasi AdminLTE dengan Angular 8 Bagian 2

Di bagian 2 kita akan membuat login page adminLTE. Berikut adalah langkahnya : Modifikasi app.component.html

Buat Login Module

Buat Login Component di Dalam Login Module

Import LoginModule ke Dalam app.module.ts

Konfigurasi Login Routing pada login-routing.module.ts

Redirect ke login page sewaktu aplikasi di jalankan Modifikasi app-routing.module.ts

Page Source AdminLTE Login Read more about Angular Tips 4 : Integrasi AdminLTE dengan Angular 8 Bagian 2[…]

Angular Tips 4 : Integrasi AdminLTE dengan Angular 8 Bagian 1

Di tutorial ini kita akan menggunakan AdminLTE 2 untuk membuat login page dan dashboard. Tutorial ini akan dibagi menjadi 3 bagian. Bagian pertama akan mengintegrasikan Angular dengan AdminLTE, bagian kedua kita akan membuat login page AdminLTE, dan bagian ketiga akan membuat AdminLTE Dashboard. Download AdminLTE3 Download AdminLTE 2 dari adminlte.io Buka Page Source Halaman Dashboard Read more about Angular Tips 4 : Integrasi AdminLTE dengan Angular 8 Bagian 1[…]

Angular Tips 3 : Menggunakan Sweetalert2 pada Angular 8

Untuk membuat sweetalert berfungsi pada aplikasi Angular 8, cara nya juga sama seperti dua tips sebelumnya. Langkah pertama, install sweetalert melalui npm : Install Sweetalert

Angular.json Tambahkan css dan js pada angular.json :

Modifikasi app.component.ts Modifikasi app.component.ts dengan import Swal from sweetalert dan OnInit component, karena kita ingin melihat apakah sweetalert berhasil diinstal Read more about Angular Tips 3 : Menggunakan Sweetalert2 pada Angular 8[…]

Angular Tips 2 : Menginstall Font Awesome pada Angular 8

Setelah di tips sebelumnya kita berhasil menginstall boostrap, saat ini kita akan menginstall font awesome untuk mengaktifkan icon. Install Font Awesome Seperti pada dokumentasinya di https://fontawesome.com/, untuk menginstall melalui npm adalah dengan perintah berikut:

Tambahkan file css dan js font awesome pada angular.json Selanjutnya, pada file angular.json tambahkan file berikut :

Restart Angular Restart Read more about Angular Tips 2 : Menginstall Font Awesome pada Angular 8[…]