Angular Layout Master

About

(Please consider TODO section at the bottom for production use.)

Angular Layout Master provides unstyled containers that are already positioned and sized for you, while making it clear where inline elements should be. The angular-layout-master-demo repo provides examples of how this package can help with Layout.

Ideally it's opinionated style guide tries to make a distiction between:

- Layout Components (prefixed with View) - Layout Responsibilities and uses widgets.
- Widget Components (no prefix) - Contained Logic for a widget (e.g. ChartComponent)

Layout Utilities out of the box:

- Layout Containers
- Auto Navigation
- View Navigation - (Responsive Navigation for smaller screens)
- Breakpoints
- Document Padding
- Lazy Module Router

Layout Containers

- Layout containers are used as component tags in your template code for control over it's styles. It adds sematic meaning to your document.

``html




`

- Currently as of version 2, the top-bar and right-drawer are usable for navigation purposes.

`html



`

Auto Navigation

Angular Layout Master offers a auto navigation feature that is intended to create navigation data from the router configuration.

`typescript
const routes: Routes = [{ path: 'home' }] => (DI service.navData) or use
`

View Navigation

View navigation is navigation made available to smaller screens (mobile). It breaks up areas of a large screen view (desktop) and allows you to also add these parts as navigatable components in the router config.

module-routing.ts

`typescript
{
path: 'path-to-view',
component: ViewComponent, // Layout Responsibilty
// #Fragment Navigation for Smaller Screens
data: {
layViewChildren: [
{
path: 'todo',
component: TodoComponent, // Widget Responsibility
layIcon: 'fa fa-check-square-o'
},
{
path: 'weather',
component: WeatherComponent, // Widget Responsibility
layIcon: 'fa fa-sun-o',
}
]
}
}
`

view.component.html

`html






`

Breakpoint Service

You can define breakpoints and query them.

E.g. In Layout Config

`typescript
const layoutConfig = {
breakpoints:
// In Css pixels
xs: 0,
sm: 576,
md: 768,
lg: 992,
xl: 1200,
}
`

Using it..

component.ts

`typescript
class MyComponentOrService {
// DI Layout Mater Service
constructor(public lay: LayoutMasterService) {}
}
`

component.html

`html




`

Document Padding

Some views may need to continously reuse document padding but not all views share the same padding requirements. Its nice to have control over the document padding at the root level for this flexibility and reusability.

Setup padding environemnts.

app.module#AppModule -> @NgModule-> LayoutModule.forRoot\(\\layoutConfig\)**

`typescript
const layoutConfig = {
doc: {
pad: {
// 'name': 'css-classes'
'standard': 'p-2 pt-md-3 pr-md-5 pb-md-5 pl-md-5',
'no-sides': 'pt-2 pb-5 pt-md-3',
'none': 'p-0',
// default if unspecified in route config
default: 'standard',
}
}
}

`

Then specify in the router config what views require which padding environment.

module-routing.ts

`typescript
const routes: Routes[] = [
{
path: 'path-to-view',
component: ViewComponent,
data: {
layDocPad: 'no-sides'
}
}
]
`

Lastly add a directive to a container. (Note: Directive is needed as can't update padding with classes as it's padding style property is already bound to calculating the number of 's active).

`html










`

Lazy Module Router

It comes with version 1's previous features of Route Master, which has simply been renamed to the "LayRouter" in version 2. In summary Lazy Modules can't route their components to the root module view (e.g. App.component.html) through named . This is a workaround solution to that problem.

See angular-layout-master-demo projects's) /lay-router/tutorial for documentation.

If you only require the layout router feature, you can simply only import the LayRouterModule from angular-layout-master and treeshake the rest of the package off.

`typescript
// Treeshake Layout Module
import { LayRouterModule } from 'angular-layout-master';

const routerConfig = {} // <- vizualize a config here..

@NgModule({
imports: [
LayRouterModule.forRoot(routerConfig)
],
})
export class AppModule { }
`




Futher Documentaion

This is just an overview of Angular Layout Master's features. To learn more, please read the tutorial section or api reference section of the live demo. (angular-layout-master-demo repo).




TODO

- Still need to support Angular Universal (e.g. breakpoint service uses window object.) You might be able to get by though by making node more universal with npm packages like domino.

- This package has not yet been tested with lazy load import` for Angular Ivy and only has been tested with the Angular 7.1.0 version, used at angular-layout-master-demo.