Skip to content

Commit b27e559

Browse files
mledourmledour
committed
demo custom layout
1 parent 8eba180 commit b27e559

File tree

9 files changed

+32
-33
lines changed

9 files changed

+32
-33
lines changed

demo/src/app/+layout/disable/disable-routing.module.ts renamed to demo/src/app/+layout/custom/custom-routing.module.ts

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,15 @@
11
import { NgModule } from '@angular/core';
22
import { Routes, RouterModule } from '@angular/router';
33

4-
import { DisableComponent } from './disable.component';
4+
import { CustomComponent } from './custom.component';
55

66
const routes: Routes = [{
77
path: '',
8-
component: DisableComponent
8+
component: CustomComponent
99
}];
1010

1111
@NgModule({
1212
imports: [RouterModule.forChild(routes)],
1313
exports: [RouterModule]
1414
})
15-
export class DisableRoutingModule { }
15+
export class CustomRoutingModule { }

demo/src/app/+layout/disable/disable.component.css renamed to demo/src/app/+layout/custom/custom.component.css

File renamed without changes.

demo/src/app/+layout/disable/disable.component.html renamed to demo/src/app/+layout/custom/custom.component.html

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
1-
<mk-box header="About disabling layout" [isCollapsable]="false" [isRemovable]="false">
2-
<p>You can completely disable layout components to create custom pages like <a routerLink="/login">Login</a> and <a routerLink="/register">Register</a> page.</p>
1+
<mk-box header="About custom layout" [isCollapsable]="false" [isRemovable]="false">
2+
<p>You can completely disable layout components to create custom page layout like <a routerLink="/login">Login</a> and <a routerLink="/register">Register</a> pages.</p>
33
</mk-box>
44

55
<mk-box header="Configuration" [isCollapsable]="false" [isRemovable]="false">
6-
<p>First you will need to import LayoutService and subscribe to isLayoutDisabled in the main app component:</p>
6+
<p>First you will need to import LayoutService and subscribe to isCustomLayout in the main app component:</p>
77
<pre><code class="language-typescript">import &#123; Component, OnInit } from '@angular/core';
88
import &#123; LayoutService } from '../../../src';
99

@@ -12,22 +12,22 @@
1212
templateUrl: './app.component.html'
1313
&#125;)
1414
export class AppComponent implements OnInit &#123;
15-
public isLayoutDisabled: boolean;
15+
public isCustomLayout: boolean;
1616

1717
constructor(
1818
private layoutService: LayoutService
1919
) &#123;&#125;
2020

2121
ngOnInit() &#123;
22-
this.layoutService.isLayoutDisabled.subscribe((value: boolean) => &#123;
23-
this.isLayoutDisabled = value;
22+
this.layoutService.isCustomLayout.subscribe((value: boolean) => &#123;
23+
this.isCustomLayout = value;
2424
&#125;);
2525
}
2626
}</code></pre>
2727

2828
<br/>
2929
<p>Wrap the main component html like so:</p>
30-
<pre><code class="language-html">&lt;ng-container *ngIf="isLayoutDisabled else layoutEnabled"&gt;
30+
<pre><code class="language-html">&lt;ng-container *ngIf="isCustomLayout else noCustomLayout"&gt;
3131
&lt;router-outlet&gt;&lt;/router-outlet&gt;
3232
&lt;/ng-container&gt;
3333
&lt;ng-template #layoutEnabled&gt;
@@ -44,7 +44,7 @@
4444
path: 'login',
4545
loadChildren: 'app/login/login.module#LoginModule',
4646
data: &#123;
47-
disableLayout: true
47+
customLayout: true
4848
&#125;
4949
&#125;,
5050
...

demo/src/app/+layout/disable/disable.component.ts renamed to demo/src/app/+layout/custom/custom.component.ts

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,10 @@ import { Component, AfterViewInit } from '@angular/core';
33
declare var Prism;
44

55
@Component({
6-
selector: 'app-disable',
7-
templateUrl: './disable.component.html',
8-
styleUrls: ['./disable.component.css']
6+
templateUrl: './custom.component.html',
7+
styleUrls: ['./custom.component.css']
98
})
10-
export class DisableComponent implements AfterViewInit {
9+
export class CustomComponent implements AfterViewInit {
1110
/**
1211
* @method ngAfterViewInit
1312
*/

demo/src/app/+layout/disable/disable.module.ts renamed to demo/src/app/+layout/custom/custom.module.ts

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,18 +2,18 @@ import { NgModule } from '@angular/core';
22
import { CommonModule } from '@angular/common';
33
import { RouterModule } from '@angular/router';
44

5-
import { DisableRoutingModule } from './disable-routing.module';
6-
import { DisableComponent } from './disable.component';
5+
import { CustomRoutingModule } from './custom-routing.module';
6+
import { CustomComponent } from './custom.component';
77

88
import { BoxModule } from '../../../../../src';
99

1010
@NgModule({
1111
imports: [
1212
CommonModule,
1313
RouterModule,
14-
DisableRoutingModule,
14+
CustomRoutingModule,
1515
BoxModule
1616
],
17-
declarations: [DisableComponent]
17+
declarations: [CustomComponent]
1818
})
19-
export class DisableModule { }
19+
export class CustomModule { }

‎demo/src/app/admin-lte.conf.ts‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ export var adminLteConf = {
1313
{label: 'Get Started', route: '/', iconClasses: 'fa fa-road'},
1414
{label: 'Layout', iconClasses: 'fa fa-th-list', children: [
1515
{label: 'Configuration', route: 'layout/configuration'},
16-
{label: 'Disable', route: 'layout/disable'},
16+
{label: 'Custom', route: 'layout/custom'},
1717
{label: 'Header', route: 'layout/header'},
1818
{label: 'Sidebar Left', route: 'layout/sidebar-left'},
1919
{label: 'Sidebar Right', route: 'layout/sidebar-right'},
@@ -28,9 +28,9 @@ export var adminLteConf = {
2828
{label: 'Small Box', route: 'boxs/small-box'}
2929
]},
3030
{label: 'Dropdown', route: 'dropdown', iconClasses: 'fa fa-arrows-v'},
31-
{label: 'Form', iconClasses: 'fa fa-files-o', children: [
32-
{label: 'Input Text', route: 'form/input-text'}
33-
]},
31+
//{label: 'Form', iconClasses: 'fa fa-files-o', children: [
32+
//{label: 'Input Text', route: 'form/input-text'}
33+
//]},
3434
{label: 'Tabs', route: 'tabs', iconClasses: 'fa fa-th'}
3535
]
3636
};

‎demo/src/app/app-routing.module.ts‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -38,8 +38,8 @@ const routes: Routes = [
3838
title: 'Configuration'
3939
}
4040
}, {
41-
path: 'disable',
42-
loadChildren: 'app/+layout/disable/disable.module#DisableModule',
41+
path: 'custom',
42+
loadChildren: 'app/+layout/custom/custom.module#CustomModule',
4343
data: {
4444
title: 'Disable Layout'
4545
//disableLayout: true
@@ -127,13 +127,13 @@ const routes: Routes = [
127127
path: 'login',
128128
loadChildren: 'app/+login/login.module#LoginModule',
129129
data: {
130-
disableLayout: true
130+
customLayout: true
131131
}
132132
}, {
133133
path: 'register',
134134
loadChildren: 'app/+register/register.module#RegisterModule',
135135
data: {
136-
disableLayout: true
136+
customLayout: true
137137
}
138138
},
139139
];

‎demo/src/app/app.component.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
1-
<ng-container *ngIf="isLayoutDisabled else layoutEnabled">
1+
<ng-container *ngIf="customLayout else noCustomLayout">
22
<router-outlet></router-outlet>
33
</ng-container>
4-
<ng-template #layoutEnabled>
4+
<ng-template #noCustomLayout>
55
<mk-layout-wrapper>
66
<mk-layout-header>
77
<mk-layout-header-logo><b>Angular </b>AdminLTE</mk-layout-header-logo>

‎demo/src/app/app.component.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,15 +6,15 @@ import { LayoutService } from '../../../src';
66
templateUrl: './app.component.html'
77
})
88
export class AppComponent implements OnInit {
9-
public isLayoutDisabled: boolean;
9+
public customLayout: boolean;
1010

1111
constructor(
1212
private layoutService: LayoutService
1313
) {}
1414

1515
ngOnInit() {
16-
this.layoutService.isLayoutDisabled.subscribe((value: boolean) => {
17-
this.isLayoutDisabled = value;
16+
this.layoutService.isCustomLayout.subscribe((value: boolean) => {
17+
this.customLayout = value;
1818
});
1919
}
2020
}

0 commit comments

Comments
 (0)