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

Buka https://adminlte.io/themes/AdminLTE/pages/examples/login.html dan lihat page sourcenya.

Copy folder yang berada di dalam link dan script ke dalam folder assets.

Modifikasi styles.css

Tambahkan css yang belum ditambah :

Modifikasi angular.json

Tambahkan scripts javascript disini :

Modifikasi login.component.html

Lihat page source dari login html dan copy div login-box :

Tambahkan class body pada ngOnInit login.component.ts

Tambahkan body class pada ngOnInit ketika login.html diload.

Tambahkan pula script js seperti pada page source.

Tambahkan declare var $ untuk mengaktifkan jquery.

Restart angular

Berhasil membuat login page AdminLTE :

AdminLTE Login Pge

 

 

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.