ngx-arrangement

Lazy load, responsive and server side (angular universal) html rendering library for Angular.

Official documentation: https://astritdemiri.com/ng-library/ngx-arrangement

Simple example using ngx-arrangement: https://stackblitz.com/github/astritdemiri11/ngx-arrangement-example

Get the complete changelog here: https://github.com/astritdemiri11/ngx-arrangement/releases

Table of Contents

• Installation
• Usage
  • Import the ArrangementModule
    • SharedModule
  • Use the service, the pipe or the directive
• API
  • LayoutService
    • Properties
    • Methods

Installation

First you need to install the npm module:

1npm install ngx-arrangement --save

Choose the version corresponding to your Angular version:

Angular	ngx-arrangement
14 (ivy only)	1.x+

Usage

1. Import the ArrangementModule:

Finally, you can use ngx-arrangement in your Angular project. You have to import ArrangementModule in the root NgModule of your application.

1import {BrowserModule} from '@angular/platform-browser';
2import {NgModule} from '@angular/core';
3import {ArrangementModule} from 'ngx-arrangement';
4
5@NgModule({
6    imports: [
7        ArrangementModule,
8        BrowserModule
9    ],
10    bootstrap: [AppComponent]
11})
12export class AppModule { }

SharedModule

If you use a SharedModule that you import in multiple other feature modules, you can export the ArrangementModule to make sure you don't have to import it in every module.

1@NgModule({
2    exports: [
3        ArrangementModule,
4        CommonModule
5    ]
6})
7export class SharedModule { }

Note: Module services are provided in root @Injectable({ providedIn: 'root' }), see Dependency Injection.

Use the service, the pipe, the component or the directive:

You can either use the LayoutService, the VirtualLoadComponent, the ServerSideDirective or the ServerSideRenderDirective exported by library

This is how you use the component for rendering only if visible in screen:

1<virtual-load>
2  <ng-template loadContent>
3    Your content goes here
4  </ng-template>
5</virtual-load>

This is how you use the directive to configure if html should be rendered in server:

1<div *serverSideRender="false"></div>

This is how you use the directive to configure server side styles:

1<div serverSide ssStyle="zIndex: -1"></div>

API

LayoutService

Properties:

• model.isBrowser: boolean: Detects if app is executed in browser or server.

• model.handset$: Observable<boolean>: Detects if app is desktop or mobile version.

  example:

  1model.handset$.subscribe((handset: boolean) => {
  2  // do something
  3});

• model.resize$: Observable<Event>: Detects window resize.

  example:

  1model.resize$.subscribe((event: Event) => {
  2  // do something
  3});

Methods:

• business.isHandset(): boolean: Detects if app is desktop or mobile version.
• business.setServerHandset(handset: boolean): void: Sets the mobile or desktop for server rendering.