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 di layout.module.ts

Implement body class di dashboard.component.ts

Berikan class body ketika dashboard component diinisiasi, dan hapus class body saat onDestroy :

Buat wrapper div di dashboard.component.html

Tambahkan dashboard route

Tambahkan layout module pada dashboard.module.ts

Route pada tombol Login

Pada login component, ketika tombol login di klik akan navigate ke halaman dashboard

login.component.ts

login.component.html

Import Dashboard Module pada App Module

Modifikasi topnavbar.component.html

Tambahkan header ke sini :

Modifikasi asidenavbar.component.html

Tambahkan isi aside dari adminLTE ke sini :

Modifikasi footernavbar.component.html

Tambahkan isi footer dari adminLTE ke sini :

Modifikasi settingsnavbar.component.html

Tambahkan isi aside setting dari adminLTE ke sini :

Modifikasi dashboard.component.html

Tambahkan seluruh komponen disini

Import seluruh script ke angular.json

window.dispatchEvent pada dashboard.component.ts

Restart angular dan lihat hasilnya pada browser

AdminLTE Dashboard

win

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.