### File

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

### Implements

`OnInit`

### Metadata

selector | `rxap-table-column-option`
standalone | `true`
styleUrls | `./table-column-option.component.css`
templateUrl | `./table-column-option.component.html`

### Index

###### Methods

- Public activate
- Public deactivate
- Public toggle

###### Inputs

- active
- hidden
- inactive
- name
- show

###### Accessors

- display
- inactive
- hidden
- show

### Constructor

`constructor(_element: ElementRef<HTMLElement>, router: Router)`
Defined in src/lib/table-column-menu/table-column-option/table-column-option.component.ts:58

Parameters :

Name | Type | Optional
_element | `ElementRef<HTMLElement>` | No
router | `Router` | No

### Inputs

active
Type : `boolean`
Default value : `true`
Defined in src/lib/table-column-menu/table-column-option/table-column-option.component.ts:25

hidden
Type : `boolean | string`
Defined in src/lib/table-column-menu/table-column-option/table-column-option.component.ts:41

inactive
Type : `boolean | string`
Defined in src/lib/table-column-menu/table-column-option/table-column-option.component.ts:36

name
Type : `string`
Required : true
Defined in src/lib/table-column-menu/table-column-option/table-column-option.component.ts:22

show
Type : `boolean`
Defined in src/lib/table-column-menu/table-column-option/table-column-option.component.ts:52

### Methods

Public activate
`activate()`
Defined in src/lib/table-column-menu/table-column-option/table-column-option.component.ts:82
Returns : `void`

Public deactivate
`deactivate()`
Defined in src/lib/table-column-menu/table-column-option/table-column-option.component.ts:87
Returns : `void`

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

### Accessors

display
get `display()`
Defined in src/lib/table-column-menu/table-column-option/table-column-option.component.ts:31
The displayed value of the option. It is necessary to show the selected option in the select's trigger. Returns : `string`

inactive
set `inactive(value: boolean | string)`
Defined in src/lib/table-column-menu/table-column-option/table-column-option.component.ts:36

Parameters :

Name | Type | Optional
value | `boolean | string` | No

Returns : `void`

hidden
get `hidden()`
Defined in src/lib/table-column-menu/table-column-option/table-column-option.component.ts:45
set `hidden(value: boolean | string)`
Defined in src/lib/table-column-menu/table-column-option/table-column-option.component.ts:41

Parameters :

Name | Type | Optional
value | `boolean | string` | No

Returns : `void`

show
set `show(value: boolean)`
Defined in src/lib/table-column-menu/table-column-option/table-column-option.component.ts:52

Parameters :

Name | Type | Optional
value | `boolean` | No

Returns : `void`

    import {
      Component,
      ElementRef,
      Inject,
      Input,
      OnInit,
    } from '@angular/core';
    import { Router } from '@angular/router';
    import {
      coerceBoolean,
      Required,
    } from '@rxap/utilities';

    @Component({
      selector: 'rxap-table-column-option',
      templateUrl: './table-column-option.component.html',
      styleUrls: [ './table-column-option.component.css' ],
      standalone: true,
    })
    export class TableColumnOptionComponent implements OnInit {
      @Input({ required: true })
      public name!: string;

      @Input()
      public active = true;

      /**
       * The displayed value of the option. It is necessary to show the selected option in the
       * select's trigger.
       */
      get display(): string {
        return (this._element.nativeElement.textContent || '').trim();
      }

      @Input()
      public set inactive(value: boolean | '') {
        this.active = !coerceBoolean(value);
      }

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

      public get hidden(): boolean | '' {
        return this._hidden;
      }

      private _hidden = false;

      @Input()
      public set show(value: boolean) {
        this._hidden = !value;
      }

      private get cacheId(): string {
        return this.router.url + '--' + this.name;
      }

      constructor(
        @Inject(ElementRef)
        private _element: ElementRef<HTMLElement>,
        private readonly router: Router,
      ) {
      }

      public ngOnInit() {
        const cachedValue = localStorage.getItem(this.cacheId);
        if (cachedValue === 'true') {
          this.active = true;
        }
        if (cachedValue === 'false') {
          this.active = false;
        }
      }

      public toggle(): void {
        this.active = !this.active;
        localStorage.setItem(this.cacheId, this.active ? 'true' : 'false');
      }

      public activate() {
        this.active = true;
        localStorage.setItem(this.cacheId, 'true');
      }

      public deactivate() {
        this.active = false;
        localStorage.setItem(this.cacheId, 'false');
      }
    }

    <ng-content></ng-content>

`./table-column-option.component.css`

Legend
Html element
Component
Html element with directive

# results matching ""

# No results matching ""