### File

`src/lib/cells/tree-control-cell/tree-control-cell.component.ts`

### Implements

`OnInit` `DoCheck`

### Metadata

changeDetection | `ChangeDetectionStrategy.OnPush`
selector | `rxap-tree-control-cell, td[rxap-tree-control-cell]`
imports | `MatButtonModule` `MatIconModule` `IconDirective` `NgIf`
styleUrls | `./tree-control-cell.component.scss`
templateUrl | `./tree-control-cell.component.html`

### Index

###### Properties
Public expandIcon Public icon Public offset
###### Methods
Public toggleExpand
###### Inputs
rxap-tree-control-cell

### Inputs

rxap-tree-control-cell
Type : `RowDataWithNode<any>`
Defined in src/lib/cells/tree-control-cell/tree-control-cell.component.ts:35

### Methods

Public toggleExpand
`toggleExpand()`
Defined in src/lib/cells/tree-control-cell/tree-control-cell.component.ts:46
Returns : `any`

### Properties

Public expandIcon
Type : `string`
Defined in src/lib/cells/tree-control-cell/tree-control-cell.component.ts:32

Public icon
Type : `IconConfig`
Defined in src/lib/cells/tree-control-cell/tree-control-cell.component.ts:30

Public offset
Type : `string`
Defined in src/lib/cells/tree-control-cell/tree-control-cell.component.ts:29

    import {
      ChangeDetectionStrategy,
      Component,
      DoCheck,
      Input,
      OnInit,
    } from '@angular/core';
    import { IconConfig } from '@rxap/utilities';
    import { IconDirective } from '@rxap/material-directives/icon';
    import { MatIconModule } from '@angular/material/icon';
    import { MatButtonModule } from '@angular/material/button';
    import { RowDataWithNode } from '@rxap/data-source/table/tree';
    import { NgIf } from '@angular/common';

    @Component({
        selector: 'rxap-tree-control-cell, td[rxap-tree-control-cell]',
        templateUrl: './tree-control-cell.component.html',
        styleUrls: ['./tree-control-cell.component.scss'],
        changeDetection: ChangeDetectionStrategy.OnPush,
        imports: [
            MatButtonModule,
            MatIconModule,
            IconDirective,
            NgIf,
        ]
    })
    export class TreeControlCellComponent implements OnInit, DoCheck {

      public offset!: string;
      public icon!: IconConfig;

      public expandIcon!: string;

      @Input('rxap-tree-control-cell')
      public element: RowDataWithNode<any>;

      public ngOnInit() {
        this.offset = (this.element.__node.depth * 24) + 'px';
        this.updateIcon();
      }

      public ngDoCheck() {
        this.updateIcon();
      }

      public toggleExpand() {
        return this.element.__node.toggleExpand();
      }

      private updateIcon(): void {
        this.icon = this.element.icon;
        if (this.element.__node.hasChildren) {
          if (this.element.__node.expanded) {
            this.expandIcon = 'expand_more';
          } else {
            this.expandIcon = 'expand_less';
          }
        } else {
          this.icon ??= { icon: 'subdirectory_arrow_right' };
        }
      }

    }

    <div class="flex flex-row justify-start items-center">
      <div class="pl-[{{ offset }}]">
        <button type="button" (click)="toggleExpand()" mat-icon-button>
          <mat-icon>{{expandIcon}}</mat-icon>
        </button>
      </div>
      <div *ngIf="icon">
        <mat-icon [rxapIcon]="icon"></mat-icon>
      </div>
      <div class="content">
        <ng-content></ng-content>
      </div>
    </div>

`./tree-control-cell.component.scss`

Legend
Html element
Component
Html element with directive

# results matching ""

# No results matching ""