Angular Tips 4 : Integrasi AdminLTE dengan Angular 8 Bagian 3

Posted on November 16, 2019 by admin

Buat Dashboard Module

ng g m dashboard --routing

1	ng g m dashboard --routing

Buat Dasboard Component di dalam dashboard module

ng g c ./dashboard/dashboard --skipTests=true

1	ng g c ./dashboard/dashboard --skipTests=true

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

ng g m layout --routing

1	ng g m layout --routing

Buat topnavbar Component

ng g c ./layout/topnavbar --skipTests=true

1	ng g c ./layout/topnavbar --skipTests=true

Buat asidenavbar Component

ng g c ./layout/asidenavbar --skipTests=true

1	ng g c ./layout/asidenavbar --skipTests=true

Buat footernavbar Component

ng g c ./layout/footernavbar --skipTests=true

1	ng g c ./layout/footernavbar --skipTests=true

Buat settingsnavbar Component

ng g c ./layout/settingsnavbar --skipTests=true

1	ng g c ./layout/settingsnavbar --skipTests=true

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

Posted on November 16, 2019 by admin

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

<router-outlet></router-outlet>

1	<router-outlet></router-outlet>

Buat Login Module

ng g m login --routing

1	ng g m login --routing

Buat Login Component di Dalam Login Module

ng g c ./login/login --skipTests=true

1	ng g c ./login/login --skipTests=true

Import LoginModule ke Dalam app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { LoginModule } from './login/login.module';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    LoginModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

import { BrowserModule } from '@angular/platform-browser';

import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';

import { AppComponent } from './app.component';

import { LoginModule } from './login/login.module';

@NgModule({

declarations: [

AppComponent

imports: [

BrowserModule,

AppRoutingModule,

LoginModule

providers: [],

bootstrap: [AppComponent]

})

export class AppModule { }

Konfigurasi Login Routing pada login-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { LoginComponent } from './login/login.component';


const routes: Routes = [
  {path: 'login', component: LoginComponent}
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class LoginRoutingModule { }

import { NgModule } from '@angular/core';

import { Routes, RouterModule } from '@angular/router';

import { LoginComponent } from './login/login.component';

const routes: Routes = [

{path: 'login', component: LoginComponent}

];

@NgModule({

imports: [RouterModule.forChild(routes)],

exports: [RouterModule]

})

export class LoginRoutingModule { }

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

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';


const routes: Routes = [
  {path: '', redirectTo: 'login', pathMatch: 'full'}
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

import { NgModule } from '@angular/core';

import { Routes, RouterModule } from '@angular/router';

const routes: Routes = [

{path: '', redirectTo: 'login', pathMatch: 'full'}

];

@NgModule({

imports: [RouterModule.forRoot(routes)],

exports: [RouterModule]

})

export class AppRoutingModule { }

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

Posted on November 16, 2019 by admin

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

Posted on November 15, 2019 by admin

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

npm i sweetalert2

1	npm i sweetalert2

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

"styles": [
  "node_modules/bootstrap/dist/css/bootstrap.min.css",
  "src/styles.css",
  "node_modules/sweetalert2/dist/sweetalert2.css",
  "node_modules/@fortawesome/fontawesome-free/css/all.min.css"
],
"scripts": [
  "node_modules/bootstrap/dist/js/bootstrap.min.js",
  "node_modules/sweetalert2/dist/sweetalert2.all.min.js",
  "node_modules/@fortawesome/fontawesome-free/js/all.min.js"
]

"styles": [

"node_modules/bootstrap/dist/css/bootstrap.min.css",

"src/styles.css",

"node_modules/sweetalert2/dist/sweetalert2.css",

"node_modules/@fortawesome/fontawesome-free/css/all.min.css"

"scripts": [

"node_modules/bootstrap/dist/js/bootstrap.min.js",

"node_modules/sweetalert2/dist/sweetalert2.all.min.js",

"node_modules/@fortawesome/fontawesome-free/js/all.min.js"

]

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

Posted on November 15, 2019 by admin

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:

npm install --save-dev @fortawesome/fontawesome-free

1	npm install --save-dev @fortawesome/fontawesome-free

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

"styles": [
  "node_modules/bootstrap/dist/css/bootstrap.min.css",
  "src/styles.css",
  "node_modules/@fortawesome/fontawesome-free/css/all.min.css"
],
"scripts": [
  "node_modules/bootstrap/dist/js/bootstrap.min.js",
  "node_modules/@fortawesome/fontawesome-free/js/all.min.js"
]

"styles": [

"node_modules/bootstrap/dist/css/bootstrap.min.css",

"src/styles.css",

"node_modules/@fortawesome/fontawesome-free/css/all.min.css"

"scripts": [

"node_modules/bootstrap/dist/js/bootstrap.min.js",

"node_modules/@fortawesome/fontawesome-free/js/all.min.js"

]

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

indocoder.com

Month: November 2019

Angular Tips 4 : Integrasi AdminLTE dengan Angular 8 Bagian 3

Angular Tips 4 : Integrasi AdminLTE dengan Angular 8 Bagian 2

Angular Tips 4 : Integrasi AdminLTE dengan Angular 8 Bagian 1

Angular Tips 3 : Menggunakan Sweetalert2 pada Angular 8

Angular Tips 2 : Menginstall Font Awesome pada Angular 8