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.

<!-- A container for positioned fixed elments at 100vh & 100vw, positioned on top the document, all you need is position absolute -->
<lay-position></lay-position>
<!-- The Inline Document -->
<lay-document-page></lay-document-page>

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

<!-- Auto Positioned -->
<lay-top-bar></lay-top-bar>
<lay-right-drawer></lay-right-drawer>

Auto Navigation

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

const routes: Routes = [{ path: 'home' }] => (DI service.navData) or use <lay-nav></lay-nav>

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

{ 	
	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

<!-- Small Screen / Mobile -->
<div class="d-md-none">
	<lay-view-outlet></lay-view-outlet>
	<!-- #Todo Fragment <app-todo></app-todo> -->
	<!-- #Weather Fragment <app-weather></app-weather> -->
</div>

<!-- Large Screen / Desktop -->
<div class="d-none d-md-block">
	<app-todo></app-todo>
	<app-weather></app-weather>
</div>

Breakpoint Service

You can define breakpoints and query them.

E.g. In Layout Config

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

Using it..

component.ts

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

component.html

<!-- Screen Width must be less than "lg" -->
<ng-container *ngIf="!lay.bp.lg"></ng-container>
<!-- Screen Width must be equal to "lg" or up -->
<ng-container *ngIf="lay.bp.lg"></ng-container>

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)**

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

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 <lay-document> can't update padding with classes as it's padding style property is already bound to calculating the number of <lay-top-bar>'s active).

<lay-document>
	<!-- Your container will be styled with padding classes on route hit -->
	<main layDoc>
		<router-outlet></router-outlet>
	</main>
</lay-document>

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 <router-outlets>. 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.

// 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.