Jigsaw Web Components Library

Jigsaw components support customization by allowing you to inject custom content into specific parts of a component using specialized directives. For example, a jigsaw-dialog can be customized by providing content for the header, body, and footer using the following directives:

• jigsaw-title: For the dialog header.
• jigsaw-body: For the main content area.
• jigsaw-button-bar: For the footer/action area.

This pattern is also used in components like collapse and tab to configure their internal content.

<jigsaw-dialog width="800px" (close)="onAnswer()">
    <!-- header -->
    <div jigsaw-title>
        <span class="fa fa-thumbs-up"></span>Title of the dialog
    </div>
    <!-- content -->
    <div jigsaw-body>
        <ul class="dialog-content">
            <li>Dialog content...</li>
        </ul>
     </div>
    <!-- footer -->
    <div jigsaw-button-bar>
        <jigsaw-button colorType="primary" (click)="onAnswer('OK')">OK</jigsaw-button>
        <jigsaw-button (click)="onAnswer('Cancel')">Cancel</jigsaw-button>
    </div>
</jigsaw-dialog>

You can significantly improve Angular application performance by running high-frequency or non-essential code outside of the Angular Zone. This prevents Angular from triggering unnecessary change detection cycles every time an asynchronous task (like mousemove, scroll, or setTimeout) completes.

Core Concept: NgZone

Angular uses NgZone to wrap asynchronous APIs (XHR, setTimeout, user events). When an asynchronous task finishes, NgZone notifies Angular to run change detection. For high-frequency events like mousemove, this can lead to excessive CPU usage and dropped frames if the application has many components or complex templates.

Key Methods

• NgZone.runOutsideAngular(callback): Executes the provided callback function outside of Angular's zone. Change detection will not be triggered when tasks inside this callback complete.
• NgZone.run(callback): Executes the provided callback function inside the Angular zone, ensuring that change detection is triggered once the callback finishes. This is useful for synchronizing the application state with the UI after a period of running outside the zone.

// Concept overview
// 1. Use runOutsideAngular for high-frequency events to avoid change detection.
// 2. Use run to bring execution back into the zone to sync state and trigger change detection.

Angular uses compilation to transform component templates into highly optimized JavaScript classes. This approach provides several benefits over the dynamic rendering used in older frameworks like AngularJS 1.x:

1. JS VM Optimization: By generating specific code for change detection and rendering, Angular allows the JavaScript Virtual Machine to use efficient property access and inline caches. This is significantly faster than the generic, dynamic 'dirty checking' used in AngularJS 1.x.
2. Decoupling from Renderers: Compiling templates into JS classes decouples the component logic from the rendering engine. This allows the same compiled component to be rendered on different platforms (e.g., a web browser or NativeScript) by simply using a different renderer.
3. Reduced Payload/Execution: With AoT, the browser does not need to download the Angular compiler or spend CPU cycles compiling templates, leading to faster startup times and better battery/data efficiency.

The j-box layout engine is designed for complex layouts that require both horizontal and vertical alignment. While horizontal layout functions similarly to the Bootstrap grid system (supporting various arrangements and alignments), j-box extends this capability by supporting vertical layouts and nested layouts (e.g., a vertical layout containing horizontal layouts, or vice versa).

Key Properties

• direction: Determines if child j-box elements are arranged horizontally or vertically.
  • Default: Horizontal.
  • Vertical: Set direction="vertical" or use the shorthand direction="v".
• grow: Controls the width or height ratio of child j-box elements based on the direction.
  • Default: 1 (elements are distributed equally, e.g., 1:1).
  • Custom Ratios: To achieve a 1:2 ratio, set the first child's grow to 1 and the second child's grow to 2.
  • Precision: Supports decimal values for more precise proportional control.

Handling Content Overflow

j-box automatically generates scrollbars when content overflows. To avoid layout issues, it is recommended to use relative global positioning for elements inside a j-box or ensure the j-box dimensions are sufficiently large.