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 1 : Menginstall Bootstrap pada Angular 8

Posted on November 15, 2019November 15, 2019 by admin

Menginstall bootstrap pada angular 8 sangat mudah. Pertama-tama setelah kita membuat aplikasi angular, tambahkan satu button bootstrap pada app.component.html di atas resource:

<button class="btn btn-primary">Bootstrap Button</button>

  <!-- Resources -->
  <h2>Resources</h2>

<button class="btn btn-primary">Bootstrap Button</button>

<h2>Resources</h2>

Saat pertama kali dijalankan, kelas bootstrap tidak akan terinstall dan tampilan button masih sederhana. Untuk mengaktifkan kelas bootstrap, install package bootstrap dari npm :

npm install --save bootstrap

1	npm install --save bootstrap

Setelah itu, modifikasi angular.json dengan menambahkan bootstrap Read more about Angular Tips 1 : Menginstall Bootstrap pada Angular 8[…]

indocoder.com

Tag: angular

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 1 : Menginstall Bootstrap pada Angular 8