The perfect layout for your Angular app: responsiveness, eye candy and many other features.
npm install @ziocampo/ngx-perfect-layouttypescript
import { NgxPerfectLayoutModule, NgxPerfectLayoutService } from '@ziocampo/ngx-perfect-layout';
imports: [
NgxPerfectLayoutModule,
],
providers: [
NgxPerfectLayoutService
]
`
Then use the component right in the app.component.html:
`html
header left zone
header right zone
footer left zone
footer right zone
`
For more details refer to the showcase project.
$3
NgxPerfectLayout is centered around the NgxPerfectLayoutService. Any options you should want to set are there. In any component you can ask for the service by DI:
`typescript
import { NgxPerfectLayoutService } from '@ziocampo/ngx-perfect-layout';
constructor(
private _layoutService: NgxPerfectLayoutService
) { }
`
and then set some option as shown below.
$3
Layout automatically adapts to many resolutions, from large panels to small ones.
Snap points are the ones that come with the @angular/flex-layout package.
!Layout image 1
!Layout image 2
$3
Just by toggling a bool option you can display a nice wait animation.
`html
this._layoutService.showWaitingAnimation = true;
`
!Wait animation image 1
$3
NgxPerfectLayout supports standard Angular themes (Indigo Pink etc.) as well as custom ones you can craft manually or at Material Theme Generator
To provide a list of custom themes just import them as usual in your `styles.scss` and declare a list of `Theme` objects:
`typescript
import { Theme } from '@ziocampo/ngx-perfect-layout';
public themes: Theme[] = [{
displayName: "Blue tango",
name: "blue-tango-theme"
}, {
displayName: "Coffee",
name: "coffee-theme"
}, {
displayName: "Relax",
name: "relax-theme"
}];
`
then assign it to the `themes` parameter:
`html
this._layoutService.themes = themes;
`
The themes will be displayed in a `mat-select` within the app drawer and applied upon the `(selectionChange)`.
!With standard theme image 1
$3
When you define your routes, just add a `data` element of type `RouteData`
`typescript
import { RouteData } from '@ziocampo/ngx-perfect-layout';
export const routes: Routes = [
{
path: "",
pathMatch: "full",
redirectTo: "home"
},
{
path: "home",
component: HomePageComponent,
data:{
displayName: "Home",
iconClass: "la-home"
} as RouteData
},
{
path: "no-options",
component: NoOptionsPageComponent,
data:{
displayName: "No options",
iconClass: "la-broom"
} as RouteData
}
];
`
then pass your routes to the `routes` parameter. Routes containing a `RouteData` element with a `displayName` will be shown as navigation.
`typescript
this._layoutService.routes = routes;
`
If you want to have hierarchical menus (just one level) you can group menu items by adding a `groupName:string` property in the `RouteData` element:
`typescript
{
path: "child1",
component: NoOptionsPageComponent,
data:{
displayName: "Child 1",
iconClass: "la-broom",
groupName:"With children"
}as RouteData
},
{
path: "child2",
component: NoOptionsPageComponent,
data:{
displayName: "No options",
iconClass: "la-stream",
groupName: "With children"
}as RouteData
},
``