ISA-Frontend/libs/ui/layout

ui-layout

This library provides utilities and directives for responsive design in Angular applications.

Features

• Breakpoint Utility: A function to detect viewport breakpoints using Angular's BreakpointObserver.
• Breakpoint Directive: A structural directive to conditionally render templates based on viewport breakpoints.

Installation

Ensure you have Angular and its dependencies installed. Then, include this library in your Angular project.

Usage

Breakpoint Utility

The breakpoint function allows you to create a Signal that evaluates to true if the current viewport matches the specified breakpoints.

import { breakpoint, Breakpoint } from 'ui-layout';

const isTablet = breakpoint(Breakpoint.Tablet);

Breakpoint Directive

The uiBreakpoint directive conditionally includes a template based on the viewport's breakpoint.

<ng-container *uiBreakpoint="'tablet'">
  This content is visible only on tablet viewports.
</ng-container>

InViewport Directive

Use this directive to emit an event whenever the host element enters or leaves the viewport.

<some-element uiInViewport (uiInViewport)="onInViewportChange($event)"> ... </some-element>

Breakpoints Table

Breakpoint	CSS Media Query Selector
tablet	(max-width: 1279px)
desktop	(min-width: 1280px) and (max-width: 1439px)
dekstop-l	(min-width: 1440px) and (max-width: 1919px)
dekstop-xl	(min-width: 1920px)

Running Unit Tests

Run nx test ui-layout to execute the unit tests.