jQWidgets
  • Docs
  • License and Pricing
  • Services
  • Community
    • Forums
    • Blogs
    • Follow Us
    • Client Login
  • About
    • About Us
    • Contact Us
    • FAQ
  • Products
    • Angular
    • React
    • Vue
    • jQuery
    • Web Components
    • Blazor
    • Svelte
    • Templates
  • Download
Angular UI Components
  • Javascript/jQuery
  • Angular
  • Vue
  • React
  • Web Components
  • Blazor
  • Templates
  • Theme Builder
  • Artavolo
Show Demo List

Angular UI Components (Angular 16–22 supported)

Data Grids and Tables

  • jqxGrid
  • jqxPivotGrid
  • jqxTreeGrid
  • jqxDataTable

Charts and Visualization

  • jqxChart
  • jqxGauge
  • jqxBarGauge
  • jqxBulletChart
  • jqxHeatMap
  • jqxTreeMap
  • jqxRangeSelector
  • jqxBarcode New
  • jqxQRcode New
  • jqxDraw

Scheduling and Planning

  • jqxScheduler
  • jqxGantt
  • jqxKanban
  • jqxTimeline

AI and Collaboration

  • jqxChat New

Editors and Inputs

  • jqxEditor
  • jqxForm
  • jqxDateTimeInput
  • jqxCalendar
  • jqxTimePicker
  • jqxInput
  • jqxNumberInput
  • jqxMaskedInput
  • jqxFormattedInput
  • jqxComplexInput
  • jqxPasswordInput
  • jqxTextArea
  • jqxColorPicker
  • jqxSlider
  • jqxKnob
  • jqxRating
  • jqxButtons
  • jqxCheckBoxGroup New
  • jqxFileUpload
  • jqxValidator
  • jqxValidator

Lists and Selection

  • jqxDropDownList
  • jqxComboBox
  • jqxListBox
  • jqxTree
  • jqxPickList New

Navigation and Menus

  • jqxTabs
  • jqxMenu
  • jqxToolBar
  • jqxRibbon
  • jqxNavigationBar
  • jqxNavBar
  • jqxListMenu

Layout and Containers

  • jqxSplitter
  • jqxLayout
  • jqxDockingLayout
  • jqxDocking
  • jqxSplitLayout
  • jqxPanel
  • jqxExpander
  • jqxResponsivePanel
  • jqxScrollView
  • jqxScrollBar

Popups and Feedback

  • jqxWindow
  • jqxNotification
  • jqxTooltip
  • jqxPopOver
  • jqxLoader
  • jqxProgressBar

Data and Utilities

  • jqxDragDrop
  • jqxSortable

jqxLayout

  • Default Functionality
  • Dashboard
  • Save/Load Layout
  • Integration with Other Widgets
  • Fluid Size
  • Right to Left Layout
Theme:
  • Demo
  • App.htm
  • app.ts
  • app.html
  • main.ts
  • API Reference

Angular Layout UI Component

The Layout component for Angular can be used to create complex layouts with panels that can be nested, resized, pinned, unpinned and closed.

angular layout

About jqxLayout for Angular

jqxLayout is the jQWidgets Layout component for Angular. IDE-style layout with tabbed groups, auto-hide and floating panels.

6 jqxLayout demos with source code

  • Default Functionality – The default functionalities of Angular Layout.
  • Dashboard – Angular Layout's dashboard combined with other widgets.
  • Save/Load Layout – Save and load the current Angular Layout.
  • Integration with Other Widgets – Integrate other widgets into Angular Layout.
  • Fluid Size – The width and height of Angular Layout are set in percentages.
  • Right to Left Layout – Angular Layout's right to left support.

jqxLayout API

jqxLayout has 9 properties, 3 events and 5 methods, all in the API reference. Its main members, those its demos use first:

  • layout (property) – Sets or gets the layout.
  • contextMenu (property) – Sets or gets whether a custom context menu will appear when certain elements of the widget are right-clicked.
  • loadLayout (method) – Loads a previously saved layout.
  • saveLayout (method) – Saves the current layout of the widget.
  • minGroupHeight (property) – Sets the default minimum height for groups which are vertically aligned within their parent group.
  • minGroupWidth (property) – Sets the default minimum width for groups which are horizontally aligned within their parent group.
  • resizable (property) – Sets or gets whether panels can be dynamically resized.
  • pin (event) – This event is triggered when a group has been pinned.
  • resize (event) – This event is triggered when a group has been resized (when the group has been resized with the mouse or when an adjacent group has been pinned, unpinned or…
  • unpin (event) – This event is triggered when a group has been unpinned.

Learn more

  • Getting started
  • API reference
  • JavaScript version
jQWidgets
  • Facebook
  • X (Twitter)
  • Demo
  • Download
  • Documentation
  • License and Pricing
  • Services
  • Products
  • Angular UI Components
  • React UI Components
  • Vue UI Components
  • Blazor UI Components
  • jQuery UI Components
  • Javascript UI Components
  • Svelte Data Grid (SvGrid)
  • Forums
  • About
  • Terms of Use
  • Privacy Policy
  • Contact Us

jQWidgets © 2011-2026. All Rights Reserved.