### File

`src/lib/table-column-menu/table-column-menu.component.ts`

### Implements

`AfterContentInit`

### Metadata

changeDetection | `ChangeDetectionStrategy.OnPush`
exportAs | `rxapTableColumns`
selector | `rxap-table-column-menu`
imports | `MatButtonModule` `MatMenuModule` `MatIconModule` `NgFor` `StopPropagationDirective` `MatCheckboxModule` `NgClass`
styleUrls | `./table-column-menu.component.scss`
templateUrl | `./table-column-menu.component.html`

### Index

###### Properties
Public Optional columns Public displayColumns
###### Methods
Public activate Public deactivate Public updateDisplayColumns
###### Inputs
inline matCard
###### HostBindings
class.inline class.mat-card-mode
###### Accessors
visibleColumns inline matCard

### Inputs

inline
Type : `boolean | string`
Defined in src/lib/table-column-menu/table-column-menu.component.ts:61
true - the menu is displayed inline and not absolute

matCard
Type : `boolean | string`
Defined in src/lib/table-column-menu/table-column-menu.component.ts:66

### HostBindings

class.inline
Type : `boolean`
Default value : `false`
Defined in src/lib/table-column-menu/table-column-menu.component.ts:50

class.mat-card-mode
Type : `boolean`
Default value : `false`
Defined in src/lib/table-column-menu/table-column-menu.component.ts:71

### Methods

Public activate
`activate(columnName: string)`
Defined in src/lib/table-column-menu/table-column-menu.component.ts:88
Parameters :
Name | Type | Optional
columnName | `string` | No
Returns : `void`

Public deactivate
`deactivate(columnName: string)`
Defined in src/lib/table-column-menu/table-column-menu.component.ts:95
Parameters :
Name | Type | Optional
columnName | `string` | No
Returns : `void`

Public updateDisplayColumns
`updateDisplayColumns()`
Defined in src/lib/table-column-menu/table-column-menu.component.ts:77
Returns : `void`

### Properties

Public Optional columns
Type : `QueryList<TableColumnOptionComponent>`
Decorators : `@ContentChildren(TableColumnOptionComponent)`
Defined in src/lib/table-column-menu/table-column-menu.component.ts:45

Public displayColumns
Type : `string[]`
Default value : `[]`
Defined in src/lib/table-column-menu/table-column-menu.component.ts:47

### Accessors

visibleColumns
get `visibleColumns()`
Defined in src/lib/table-column-menu/table-column-menu.component.ts:40

inline
get `inline()`
Defined in src/lib/table-column-menu/table-column-menu.component.ts:52
set `inline(value: boolean | string)`
Defined in src/lib/table-column-menu/table-column-menu.component.ts:61
true - the menu is displayed inline and not absolute Parameters :
Name | Type | Optional
value | `boolean | string` | No
Returns : `void`

matCard
set `matCard(value: boolean | string)`
Defined in src/lib/table-column-menu/table-column-menu.component.ts:66
Parameters :
Name | Type | Optional
value | `boolean | string` | No
Returns : `void`

    import {
      NgClass,
      NgFor,
    } from '@angular/common';
    import type { QueryList } from '@angular/core';
    import {
      AfterContentInit,
      ChangeDetectionStrategy,
      Component,
      ContentChildren,
      HostBinding,
      Input,
    } from '@angular/core';
    import { MatButtonModule } from '@angular/material/button';
    import { MatCheckboxModule } from '@angular/material/checkbox';
    import { MatIconModule } from '@angular/material/icon';
    import { MatMenuModule } from '@angular/material/menu';
    import { StopPropagationDirective } from '@rxap/directives';
    import { coerceBoolean } from '@rxap/utilities';
    import { TableColumnOptionComponent } from './table-column-option/table-column-option.component';

    @Component({
        selector: 'rxap-table-column-menu',
        templateUrl: './table-column-menu.component.html',
        styleUrls: ['./table-column-menu.component.scss'],
        changeDetection: ChangeDetectionStrategy.OnPush,
        exportAs: 'rxapTableColumns',
        imports: [
            MatButtonModule,
            MatMenuModule,
            MatIconModule,
            NgFor,
            StopPropagationDirective,
            MatCheckboxModule,
            NgClass,
        ]
    })
    export class TableColumnMenuComponent implements AfterContentInit {

      public get visibleColumns() {
        return this.columns?.filter((option) => !option.hidden);
      }

      @ContentChildren(TableColumnOptionComponent)
      public columns?: QueryList<TableColumnOptionComponent>;

      public displayColumns: string[] = [];

      @HostBinding('class.inline')
      private _inline = false;

      public get inline(): boolean | '' {
        return this._inline;
      }

      /**
       * true - the menu is displayed inline and not absolute
       * @param value
       */
      @Input()
      public set inline(value: boolean | '') {
        this._inline = coerceBoolean(value);
      }

      @Input()
      public set matCard(value: boolean | '') {
        this._matCardMode = coerceBoolean(value);
      }

      @HostBinding('class.mat-card-mode')
      private _matCardMode = false;

      public ngAfterContentInit() {
        this.updateDisplayColumns();
      }

      public updateDisplayColumns() {
        if (!this.columns) {
          throw new Error(
            'Could not query content children of TableColumnOptionComponent',
          );
        }
        this.displayColumns = this.columns
                                  .filter((option) => option.active)
                                  .map((option) => option.name);
      }

      public activate(columnName: string) {
        this.columns
            ?.filter((option) => option.name === columnName)
            .forEach((column) => column.activate());
        this.updateDisplayColumns();
      }

      public deactivate(columnName: string) {
        this.columns
            ?.filter((option) => option.name === columnName)
            .forEach((column) => column.deactivate());
        this.updateDisplayColumns();
      }
    }

    <button [matMenuTriggerFor]="columnMenu" mat-icon-button type="button">
      <mat-icon>tune</mat-icon>
    </button>

    <mat-menu #columnMenu="matMenu">
      <span
        *ngFor="let column of $any(visibleColumns ?? [])"
        [disableRipple]="true"
        mat-menu-item
        rxapStopPropagation
      >
        <mat-checkbox
          (change)="column.toggle(); updateDisplayColumns()"
          [checked]="column.active">
          {{ column.display }}
        </mat-checkbox>
      </span>
      <ng-content select="[mat-menu-item],mat-divider"></ng-content>
    </mat-menu>

`./table-column-menu.component.scss`

    :host {
      /* TODO(mdc-migration): The following rule targets internal classes of card that may no longer apply for the MDC version. */
      &.mat-card-mode:not(.inline) {
        position: absolute;
        top: 8px;
        right: 8px;
        bottom: auto;
        left: auto;
      }
    }

Legend
Html element
Component
Html element with directive

# results matching ""

# No results matching ""