Options
All
  • Public
  • Public/Protected
  • All
Menu

Class LayoutComponent

whatitdoes

Manages all layout functions for the AppComponent.

purpose

The goal for this component is to encapsulate all logic relating to how the app's layout should function.

This allows:

  • all sub-components to focus on their own encapsulated behaviour
  • most layout changes to be made in one place
  • the AppComponent to stay lean and focused on its main task, orchestrating the app as a whole
  • the layout to be separate from other non-layout dependant elements such as modals and alerts
  • the layout to later be put inside a lazy-loaded route if the site requires a different layout for signed in users

For example, a change in the FooterComponent design shouldn't also require a change in the LayoutComponent or NavComponent.

Hierarchy

  • LayoutComponent

Implements

  • OnInit

Index

Constructors

Properties

Methods

Object literals

Constructors

constructor

Properties

Private activatedRoute

activatedRoute: ActivatedRoute

layout

layout: LayoutOptions

Route specific layout options.

This lets the NavComponent view know about any number of route specific layout customization options that are set in the AppRoutingModule config.

Private router

router: Router

Private statusBarService

statusBarService: StatusBarService

Methods

ngOnInit

  • ngOnInit(): void

onHeightChange

  • onHeightChange(position: string, newHeight: number, additionalPadding: number): void

  • When NavComponent or FooterComponent emits a height change, onHeightChange adds the new height to the padding of the .content-area element.

    Parameters

    • position: string

      accepts top or bottom.

    • newHeight: number

      the new pixel height of the element being measured

    • additionalPadding: number

      extra padding beyond the pixel height of the element being measured.

    Returns void

Private onNewRoute

  • onNewRoute(): void

  • onNewRoute is responsible for setting up route specific elements relating to the layout.

    this.layout: Tells the NavComponent view about any number of route specific layout customization options that are set in the AppRoutingModule config.

    scrollTop: Scrolls the page to the top.

    • Without this users will stay at their current scroll position when navigating between pages which is unexpected.

    Returns void

Object literals

padding

padding: object

Current padding of the layout, updated by onHeightChange.

Padding is set dynamically so that:

  • LayoutComponent does not need to know about other elements' styling
  • layout sub-components can be made without a predefined height

bottom

bottom: string = "20"

Responds to the height of FooterComponent. Defaults to 20px.

top

top: string = "20"

Responds to the height of NavComponent. Defaults to 20px.

Generated using TypeDoc