TypeScript icon, indicating that this package has built-in type declarations

    19.3.44 • Public • Published


    The layout package contains cards, avatars, splitter and Dashboard Layout components.

    • The card is a small container in which user can show defined content in specific structure.

    • The avatars are icons, initials or figures representing a particular person, used in popular media formats like images, SVG, font icons, and letters.

    • The splitter is container component which used to construct different layouts using multiple and nested panes.

    • The DashboardLayout is a grid structured layout component that helps to create a dashboard with panels. Panels hold the UI components and allow resize, reorder, drag-n-drop, remove and add options. This allows users to easily place the components at the desired position within the grid layout.


    This is a commercial product and requires a paid license for possession or use. Syncfusion’s licensed software, including this component, is subject to the terms and conditions of Syncfusion's EULA. To acquire a license, you can purchase one at https://www.syncfusion.com/sales/products or start a free 30-day trial here.

    A free community license is also available for companies and individuals whose organizations have less than $1 million USD in annual gross revenue and five or fewer developers.


    To install Layout components and its dependent packages, use the following command.

    npm install @syncfusion/ej2-angular-layouts

    Components included

    Following list of components are available in the package

    Supported Frameworks

    These components are available in following list of:

    1. React
    2. Vue
    3. ASP.NET Core
    4. ASP.NET MVC
    5. JavaScript (ES5)

    Use Case samples

    Key Features

    • Card

      • Header - Header supports to include title, subtitle along with image.

      • Images and Title - Support to include images with customizable caption positions in it.

      • Action Buttons - Supports to add buttons within the card either in vertical or horizontal alignment.

      • Horizontal Card - Allows to align card elements horizontally and also allows to stack the content vertically within horizontal alignment.

    • Avatar

      • Types - Provided 2 types of avatars such as default and circle.

      • Sizes - Supports 7 different sizes to adapt the various application scenario.

        * xsmall
        * small
        * medium (default)
        * large
        * xlarge
    • Splitter

      • Multiple Panes - Provided an option to configure more than two panes.

      • Resizable Panes - Supports resizable to adjust its pane size dynamically.

      • Orientation - The panes can orient either horizontally or vertically.

      • Integration - Other Angular UI components can be integrated within panes.

      • Nested Panes - Another splitter can be integrated within panes to create a complex layout.

    • Dashboard Layout

      • Drag and Drop - Allows drag and drop of panels at the desired location within the dashboard.

      • Floating - Floats the panels upward when the dragging option is enabled.

      • Resizing - Support to resize the panels in any direction as per the requirement.

      • MediaQuery - Allows the panels to be stacked when the specified resolution is met.


    Product support is available for through following mediums.


    Check the license detail here.


    Check the changelog here

    © Copyright 2019 Syncfusion, Inc. All Rights Reserved. The Syncfusion Essential Studio license and copyright applies to this distribution.


    npm i @syncfusion/ej2-angular-layouts

    DownloadsWeekly Downloads





    SEE LICENSE IN license

    Unpacked Size

    1.42 MB

    Total Files


    Last publish


    • syncfusionorg
    • essentialjs2
    • syncfusion-javascript