jqwidgets-framework/demos/Angular/src/grid/grouping/app.component.html

jQWidgets is an advanced Angular, Vue, Blazor, React, Web Components, jquery, ASP .NET MVC, Custom Elements and HTML5 UI framework.

<jqxGrid #myGrid (onGroupexpand)="onGroupExpand($event)" (onGroupcollapse)="onGroupCollapse($event)"
    [width]="getWidth()" [groupable]="true" [columns]="columns" 
    [source]="dataAdapter" [groups]="['City']">
</jqxGrid>

<div style="margin-top: 20px;">
    <div style="float: left; margin-left: 20px;">

        <jqxButton (onClick)="onExpandGroup()" [width]="150">Expand Group</jqxButton>
        <br />

        <jqxButton (onClick)="onCollapseGroup()" [width]="150">Collapse Group</jqxButton>
        <br />

        <span style="margin-top: 10px;">Group:</span>
        <input #groupNum value="1" style="margin-top: 10px; width: 20px;" type="text" />
    </div>
    <div style="float: left; margin-left: 20px;">

        <jqxButton (onClick)="onExpandAllGroup()" [width]="150">Expand All Group</jqxButton>
        <br />

        <jqxButton (onClick)="onCollapseAllGroup()" [width]="150">Collapse All Groups</jqxButton>
        <br />

    </div>
    <div style="float: left; margin-left: 20px;">
        <div style="font-weight: bold;">
          <span>Event Log:</span>
        </div>
        <div style="margin-top: 10px;">
          <span>Expanded Group:</span> 
          <span #expandedGroup></span>
        </div>
        <div style="margin-top: 10px;">
          <span>Collapsed Group:</span> 
          <span #collapsedGroup></span>
        </div>
    </div>
</div>