jqwidgets-framework/demos/angular/angulartop.htm

jQWidgets is an advanced jQuery, Angular, React, ASP .NET MVC, Custom Elements and HTML5 UI framework.

<!-- HEADER START -->
<div role="banner" class="header">
    <div class="wrap cf">
        <a class="header-logo" href="/">
            <img src="../resources/design/i/logo-jqwidgets.svg" width="273" height="69" alt="jQWidgets" />
        </a>

        <a href="#" id="menu_link" class="menu_link">
            <span class="t"></span>
            <span class="m"></span>
            <span class="b"></span>
        </a>


        <!-- MENU START -->
        <div class="header-menu">
            <nav>
                <ul>
                    <li>
                        <a href="http://www.jqwidgets.com/jquery-widgets-documentation">Documentation</a>
                    </li>
                    <li>
                        <a href="http://www.jqwidgets.com/license">License and Pricing</a>
                    </li>
                    <li>
                        <a href="http://www.jqwidgets.com/services">Services</a>
                    </li>
                    <li class="dropdown">
                        <a href="javascript:void(0);">Community</a>
                        <ul>
                            <li>
                                <a href="http://www.jqwidgets.com/community">Forums</a>
                            </li>
                            <li>
                                <a href="http://www.jqwidgets.com/blog">Blogs</a>
                            </li>
                            <li>
                                <a href="http://www.jqwidgets.com/follow">Follow Us</a>
                            </li>
                            <li>
                                <a href="https://www.jqwidgets.com/wp-login.php">Client Login</a>
                            </li>
                        </ul>
                    </li>
                    <li class="dropdown">
                        <a href="javascript:void(0);">About</a>
                        <ul>
                            <li>
                                <a href="http://www.jqwidgets.com/about">About Us</a>
                            </li>
                            <li>
                                <a href="http://www.jqwidgets.com/contact-us">Contact Us</a>
                            </li>
                            <li>
                                <a href="http://www.jqwidgets.com/faq">FAQ</a>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <a class="demo" href="http://www.jqwidgets.com/jquery-widgets-demo">Demo</a>
                    </li>
                    <li>
                        <a class="download" href="http://www.jqwidgets.com/download">Download</a>
                    </li>
                </ul>
            </nav>
        </div>
        <!-- MENU END -->

    </div>
</div>
<!-- HEADER END -->
<!-- MAIN CONTENT START -->
<div class="main" role="main">

    <!-- BIG TITLE START -->
    <div class="big_title">
        <h1>Angular 2 UI Components</h1>

        <!-- TITLE NAV START -->
        <nav class="title_nav">
            <div class="nav_wrap">
                <div class="wrap">
                    <ul>
                        <li>
                            <a href="../../jquery-widgets-demo/">Javascript/jQuery</a>
                        </li>
                        <li class="current">
                            <a href="../">Angular 2</a>
                        </li>
                        <li>
                            <a href="../../react">React</a>
                        </li>
                        <li>
                            <a href="http://www.jqwidgets.com/asp.net-core-mvc-tag-helpers/">ASP .NET MVC</a>
                        </li>
                        <li>
                            <a href="../../jquery-widgets-demo/showcasedemos/">Showcase Demos</a>
                        </li>
                        <li>
                            <a href="../../jquery-widgets-demo/mobiledemos/">Responsive Design</a>
                        </li>
                        <li>
                            <a href="http://jqwidgets.com/themebuilder/">Theme Builder</a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
        <!-- TITLE NAV END -->

    </div>
    <!-- BIG TITLE END -->

    <!-- WIDGETS START -->
    <div class="widgets closed">
        <div id="toggleButtonWrapper">
            <div class="closed" id="toggleButton"></div>
            <span id="toggleButtonLabel">Show Demo List</span>
        </div>
        <div style="display: none;" class="wrap">
            <h3 class='widgets-title'>Angular2 UI Components</h3>
            <ul class="cf">
                   <li>
                        <div class="jqx-grid-icon" title="jqxGrid"></div>
                        <div>
                            <a title="jqxGrid - Angular Grid Component" href="../angular-grid/index.htm">jqxGrid</a>
                        </div>
                    </li>
                    <li>
                        <div class="jqx-tabs-icon" title="jqxTabs"></div>
                        <div>
                            <a title="jqxTabs - Angular Tabs Component" href="../angular-tabs/index.htm">jqxTabs</a>
                        </div>
                    </li>
                    <li>
                        <div class="jqx-textarea-icon" title="jqxTextArea"></div>
                        <div><a title="jqxTextArea - Angular TextArea Component" href="../angular-textarea/index.htm">jqxTextArea</a></div>
                    </li>
                    <li>
                        <div class="jqx-window-icon" title="jqxWindow"></div>
                        <div>
                            <a title="jqxWindow - Angular Window/Dialog Component" href="../angular-window/index.htm">jqxWindow</a>
                        </div>
                    </li>
                    <li>
                        <div class="jqx-knob-icon" title="jqxKnob"></div>
                        <div><a title="jqxKnob - Angular Knob Chart Component" href="../angular-knob/index.htm">jqxKnob</a></div>
                    </li>
                    <li>
                        <div class="jqx-responsivepanel-icon" title="jqxResponsivePanel"></div>
                        <div><a title="jqxResponsivePanel - Angular Responsive Panel Component" href="../angular-responsivepanel/index.htm">jqxResponsivePanel</a></div>
                    </li>

                    <!-- row 2 -->
                    <li>
                        <div class="jqx-chart-icon" title="jqxChart"></div>
                        <div>
                            <a title="jqxChart - Angular Chart Component" href="../angular-chart/index.htm">jqxChart</a>
                        </div>
                    </li>
                    <li>
                        <div class="jqx-menu-icon" title="jqxMenu"></div>
                        <div>
                            <a title="jqxMenu - Angular Menu Component" href="../angular-menu/index.htm">jqxMenu</a>
                        </div>
                    </li>
                    <li>
                        <div class="jqx-inputfield-icon" title="jqxInput"></div>
                        <div>
                            <a title="jqxInput - Angular Input Component" href="../angular-input/index.htm">jqxInput</a>
                        </div>
                    </li>
                    <li>
                        <div class="jqx-docking-icon" title="jqxDocking"></div>
                        <div>
                            <a title="jqxDocking - Angular Docking Windows Component" href="../angular-docking/index.htm">jqxDocking</a>
                        </div>
                    </li>

                    <li>
                        <div class="jqx-gauge-icon" title="jqxGauge"></div>
                        <div>
                            <a title="jqxGauge - Angular Gauge and Linear Gauge Components" href="../angular-gauge/index.htm">jqxGauge</a>
                        </div>
                    </li>
                    <li>
                        <div class="jqx-navbar-icon" title="jqxNavBar"></div>
                        <div><a title="jqxNavBar - Angular NavBar Component" href="../angular-navbar/index.htm">jqxNavBar</a></div>
                    </li>

                    <!-- row 3 -->
                    <li>
                        <div class="jqx-scheduler-icon" title="jqxScheduler"></div>
                        <div><a title="jqxScheduler - Angular Scheduler Component" href="../angular-scheduler/index.htm">jqxScheduler</a></div>
                    </li>
                    <li>
                        <div class="jqx-tree-icon" title="jqxTree"></div>
                        <div>
                            <a title="jqxTree - Angular Tree Component" href="../angular-tree/index.htm">jqxTree</a>
                        </div>
                    </li>
                    <li>
                        <div class="jqx-passwordinput-icon" title="jqxPasswordInput"></div>
                        <div><a title="jqxPasswordInput - Angular Password Input Component" href="../angular-passwordinput/index.htm">jqxPasswordInput</a></div>
                    </li>
                    <li>
                        <div class="jqx-notification-icon" title="jqxNotification"></div>
                        <div>
                            <a title="jqxNotification - Angular Notification Component" href="../angular-notification/index.htm">jqxNotification</a>
                        </div>
                    </li>

                    <li>
                        <div class="jqx-bar-gauge-icon" title="jqxBarGauge"></div>
                        <div>
                            <a title="jqxBarGauge - Angular Bar Gauge Component" href="../angular-bargauge/index.htm">jqxBarGauge</a>
                        </div>
                    </li>
                    <li>
                        <div class="jqx-sortable-icon" title="jqxSortable"></div>
                        <div>
                            <a title="jqxSortable - Angular Sortable Plugin" href="../angular-sortable/index.htm">jqxSortable</a>
                        </div>
                    </li>
                    <!-- row 4 -->
                    <li>
                        <div class="jqx-treegrid-icon" title="jqxTreeGrid"></div>
                        <div>
                            <a title="jqxTreeGrid - Angular Tree Grid Component" href="../angular-treegrid/index.htm">jqxTreeGrid</a>
                        </div>
                    </li>
                    <li>
                        <div class="jqx-navigationbar-icon" title="jqxNavigationBar"></div>
                        <div>
                            <a title="jqxNavigationBar - Angular NavigationBar/Accordion Component" href="../angular-navigationbar/index.htm">jqxNavigationBar</a>
                        </div>
                    </li>
                    <li>
                        <div class="jqx-maskedinput-icon" title="jqxMaskedInput"></div>
                        <div><a title="jqxMaskedInput - Angular Masked Input Component" href="../angular-maskedinput/index.htm">jqxMaskedInput</a></div>
                    </li>

                    <li>
                        <div class="jqx-popover-icon" title="jqxPopover"></div>
                        <div><a tabindex="jqxPopover - Angular Popover Component" href="../angular-popover/index.htm">jqxPopOver</a></div>
                    </li>
                    <li>
                        <div class="jqx-expander-icon" title="jqxExpander"></div>
                        <div>
                            <a title="jqxExpander - Angular Expander Component" href="../angular-expander/index.htm">jqxExpander</a>
                        </div>
                    </li>
                    <li>
                        <div class="jqx-loader-icon" title="jqxLoader"></div>
                        <div><a title="jqxLoader - Angular Loader Component" href="../angular-loader/index.htm">jqxLoader</a></div>
                    </li>

                    <!-- row 5 -->
                    <li>
                        <div class="jqx-datatable-icon" title="jqxDataTable"></div>
                        <div>
                            <a title="jqxDataTable - Angular Data Table Component" href="../angular-datatable/index.htm">jqxDataTable</a>
                        </div>
                    </li>
                    <li>
                        <div class="jqx-listmenu-icon" title="jqxListMenu"></div>
                        <div>
                            <a title="jqxListMenu - Angular List Menu Component" href="../angular-listmenu/index.htm">jqxListMenu</a>
                        </div>
                    </li>
                    <li>
                        <div class="jqx-complexinput-icon" title="jqxComplexInput"></div>
                        <div>
                            <a title="jqxComplexInput - Angular Complex Input Component" href="../angular-complexinput/index.htm">jqxComplexInput</a>
                        </div>
                    </li>

                    <li>
                        <div class="jqx-tooltip-icon" title="jqxTooltip"></div>
                        <div>
                            <a title="jqxToolTip - Angular Tooltip Component" href="../angular-tooltip/index.htm">jqxTooltip</a>
                        </div>
                    </li>

                    <li>
                        <div class="jqx-rating-icon" title="jqxRating"></div>
                        <div><a title="jqxRating - Angular Rating Component" href="../angular-rating/index.htm">jqxRating</a></div>
                    </li>
                    <li>
                        <div class="jqx-draw-icon" title="jqxDraw"></div>
                        <div>
                            <a title="jqxDraw - Angular Draw(HTML5, SVG, VML) Plugin" href="../angular-draw/index.htm">jqxDraw</a>
                        </div>
                    </li>
                    <!-- row 6 -->
                    <li>
                        <div class="jqx-treemap-icon" title="jqxTreeMap"></div>
                        <div><a title="jqxTreeMap - Angular Tree Map Component" href="../angular-treemap/index.htm">jqxTreeMap</a></div>
                    </li>
                    <li>
                        <div class="jqx-toolbar-icon" title="jqxToolBar"></div>
                        <div><a title="jqxToolBar - Angular ToolBar Component" href="../angular-toolbar/index.htm">jqxToolBar</a></div>
                    </li>
                    <li>
                        <div class="jqx-formattedinput-icon" title="jqxFormattedInput"></div>
                        <div><a title="jqxFormattedInput - Angular Formatted Input Component" href="../angular-formattedinput/index.htm">jqxFormattedInput</a></div>
                    </li>


                    <li>
                        <div class="jqx-colorpicker-icon" title="jqxColorPicker"></div>
                        <div><a title="jqxColorPicker - Angular Color Picker Component" href="../angular-colorpicker/index.htm">jqxColorPicker</a></div>
                    </li>
                    <li>
                        <div class="jqx-rangeselector-icon" title="jqxRangeSelector"></div>
                        <div><a title="jqxRangeSelector - Angular Range Selector Component" href="../angular-rangeselector/index.htm">jqxRangeSelector</a></div>
                    </li>

                    <li>
                        <div class="jqx-dragdrop-icon" title="jqxDragDrop"></div>
                        <div><a title="jqxDragDrop - Angular Drag Drop Component" href="../angular-dragdrop/index.htm">jqxDragDrop</a></div>
                    </li>
                    <!-- row 7 -->
                    <li>
                        <div class="jqx-editor-icon" title="jqxEditor"></div>
                        <div>
                            <a title="jqxEditor - Angular HTML Editor Component" href="../angular-editor/index.htm">jqxEditor</a>
                        </div>
                    </li>

                    <li>
                        <div class="jqx-combobox-icon" title="jqxComboBox"></div>
                        <div><a title="jqxComboBox - Angular ComboBox Component" href="../angular-combobox/index.htm">jqxComboBox</a></div>
                    </li>
                    <li>
                        <div class="jqx-numberinput-icon" title="jqxNumberInput"></div>
                        <div><a title="jqxNumberInput - Angular Number Input Component" href="../angular-numberinput/index.htm">jqxNumberInput</a></div>
                    </li>
                    <li>
                        <div class="jqx-scrollview-icon" title="jqxScrollView"></div>
                        <div><a title="jqxScrollView - Angular ScrollView/Banner Component" href="../angular-scrollview/index.htm">jqxScrollView</a></div>
                    </li>
                    <li>
                        <div class="jqx-slider-icon" title="jqxSlider"></div>
                        <div><a title="jqxSlider - Angular Slider Component" href="../angular-slider/index.htm">jqxSlider</a></div>
                    </li>
                    <li>
                        <div class="jqx-dataadapter-icon" title="Web Pack"></div>
                        <div><a title="Angular2 Web Pack Integration" href="../angular-aot/webpack.htm">Web Pack</a></div>
                    </li>

                    <!-- row 8 -->
                    <li>
                        <div class="jqx-ribbon-icon" title="jqxRibbon"></div>
                        <div><a title="jqxRibbon - Angular Ribbon Bar Component" href="../angular-ribbon/index.htm">jqxRibbon</a></div>
                    </li>
                    <li>
                        <div class="jqx-dropdownlist-icon" title="jqxDropDownList"></div>
                        <div><a title="jqxDropDownList - Angular DropDown List Component" href="../angular-dropdownlist/index.htm">jqxDropDownList</a></div>
                    </li>
                    <li>
                        <div class="jqx-datetimeinput-icon" title="jqxDateTimeInput"></div>
                        <div>
                            <a title="jqxDateTimeInput - Angular Date and Time Input Component" href="../angular-datetimeinput/index.htm">jqxDateTimeInput</a>
                        </div>
                    </li>

                    <li>
                        <div class="jqx-progressbar-icon" title="jqxProgressBar"></div>
                        <div><a title="jqxProgressBar - Angular ProgressBar Component" href="../angular-progressbar/index.htm">jqxProgressBar</a></div>
                    </li>
                    <li>
                        <div class="jqx-scrollbar-icon" title="jqxScrollBar"></div>
                        <div><a title="jqxScrollBar - Angular ScrollBar Component" href="../angular-scrollbar/index.htm">jqxScrollBar</a></div>
                    </li>
                    <li>
                        <div class="jqx-panel-icon" title="jqxPanel"></div>
                        <div>
                            <a title="jqxPanel - Angular Panel Component" href="../angular-panel/index.htm">jqxPanel</a>
                        </div>
                    </li>
                    <!-- row 9 -->
                    <li>
                        <div class="jqx-layout-icon" title="jqxLayout"></div>
                        <div><a title="jqxLayout - Angular Layout Component" href="../angular-layout/index.htm">jqxLayout</a></div>
                    </li>

                    <li>
                        <div class="jqx-listbox-icon" title="jqxListBox"></div>
                        <div>
                            <a title="jqxListBox - Angular ListBox Component" href="../angular-listbox/index.htm">jqxListBox</a>
                        </div>
                    </li>
                    <li>
                        <div class="jqx-calendar-icon" title="jqxCalendar"></div>
                        <div>
                            <a title="jqxCalendar - Angular Calendar Component" href="../angular-calendar/index.htm">jqxCalendar</a>
                        </div>
                    </li>
                    <li>
                        <div class="jqx-fileupload-icon" title="jqxFileUpload"></div>
                        <div>
                            <a title="jqxFileUpload - Angular File Upload Component" href="../angular-fileupload/index.htm">jqxFileUpload</a>
                        </div>
                    </li>

                    <li>
                        <div class="jqx-splitter-icon" title="jqxSplitter"></div>
                        <div>
                            <a title="jqxSplitter - Angular Splitter Component" href="../angular-splitter/index.htm">jqxSplitter</a>
                        </div>
                    </li>

                    <li>
                        <div class="jqx-validator-icon" title="jqxValidator"></div>
                        <div><a title="jqxValidator - Angular Validator Component" href="../angular-validator/index.htm">jqxValidator</a></div>
                    </li>
                    <!-- row 10 -->
                    <li>
                        <div class="jqx-docklayout-icon" title="jqxDockingLayout"></div>
                        <div><a title="jqxDockingLayout - Angular Docking Layout Component" href="../angular-dockinglayout/index.htm">jqxDockingLayout</a></div>
                    </li>
                    <li>
                        <div class="jqx-buttons-icon" title="jqxButtons"></div>
                        <div>
                            <a title="jqxButtons - Angular Buttons Component" href="../angular-buttons/index.htm">jqxButtons</a>
                        </div>
                    </li>
                    <li>
                        <div class="jqx-kanban-icon" title="jqxKanban"></div>
                        <div>
                            <a title="jqxKanban - Angular Kanban Component" href="../angular-kanban/index.htm">jqxKanban</a>
                        </div>
                    </li>
                    <li>
                        <div class="jqx-bulletchart-icon" title="jqxBulletChart"></div>
                        <div><a title="jqxBulletChart - Angular Bullet Chart Component" href="../angular-bulletchart/index.htm">jqxBulletChart</a></div>
                    </li>
            </ul>
        </div>
    </div>
    <!-- WIDGETS END -->
</div>