### File

`src/lib/cells/options-cell/options-cell.component.ts`

### Implements

`AfterContentInit` `OnDestroy` `OnChanges`

### Metadata

changeDetection | `ChangeDetectionStrategy.OnPush`
selector | `td[rxap-options-cell]`
standalone | `true`
styleUrls | `./options-cell.component.scss`
templateUrl | `./options-cell.component.html`

### Index

###### Properties

- Public options
- Public viewValue

###### Methods

- Public getViewValue
- Public setViewValue

###### Inputs

- default
- empty
- rxap-options-cell

### Constructor

`constructor(renderer: Renderer2)`
Defined in src/lib/cells/options-cell/options-cell.component.ts:47

Parameters :

Name | Type | Optional
renderer | `Renderer2` | No

### Inputs

default
Type : `string`
Defined in src/lib/cells/options-cell/options-cell.component.ts:37

empty
Type : `string`
Defined in src/lib/cells/options-cell/options-cell.component.ts:41

rxap-options-cell
Type : `any`
Defined in src/lib/cells/options-cell/options-cell.component.ts:33

### Methods

Public getViewValue
`getViewValue()`
Defined in src/lib/cells/options-cell/options-cell.component.ts:92
Returns : `string`

Public setViewValue
`setViewValue()`
Defined in src/lib/cells/options-cell/options-cell.component.ts:67
Returns : `void`

### Properties

Public options
Type : `QueryList<MatOption>`
Decorators : `@ContentChildren(MatOption, {descendants: true})`
Defined in src/lib/cells/options-cell/options-cell.component.ts:55

Public viewValue
Type : `string`
Defined in src/lib/cells/options-cell/options-cell.component.ts:43

    import type {
      OnChanges,
      QueryList,
      SimpleChanges,
    } from '@angular/core';
    import {
      AfterContentInit,
      ChangeDetectionStrategy,
      Component,
      ContentChildren,
      Input,
      isDevMode,
      OnDestroy,
      Renderer2,
    } from '@angular/core';
    import { MatOption } from '@angular/material/core';
    import { Subscription } from 'rxjs';
    import {
      startWith,
      tap,
    } from 'rxjs/operators';

    @Component({
      // eslint-disable-next-line @angular-eslint/component-selector
      selector: 'td[rxap-options-cell]',
      templateUrl: './options-cell.component.html',
      styleUrls: [ './options-cell.component.scss' ],
      changeDetection: ChangeDetectionStrategy.OnPush,
      standalone: true,
    })
    export class OptionsCellComponent implements AfterContentInit, OnDestroy, OnChanges {
      @Input('rxap-options-cell')
      public value: any;

      // eslint-disable-next-line @angular-eslint/no-input-rename
      @Input('default')
      public defaultViewValue!: string;

      // eslint-disable-next-line @angular-eslint/no-input-rename
      @Input('empty')
      public emptyViewValue!: string;

      public viewValue!: string;

      private readonly _subscription = new Subscription();

      private _initialised = false;

      constructor(private readonly renderer: Renderer2) {
        this.defaultViewValue = ''; // $localize`:@@rxap-material.table-system.options-cell.unknown:unknown`;
        this.emptyViewValue = ''; // $localize`:@@rxap-material.table-system.options-cell.empty:empty`;
      }

      @ContentChildren(MatOption, { descendants: true })
      public options!: QueryList<MatOption>;

      public ngAfterContentInit() {
        // Hide the mat-option elements
        this._subscription.add(this.options.changes.pipe(
          startWith(null),
          tap(() => this.options.forEach(option => this.renderer.setStyle(option._getHostElement(), 'display', 'none'))),
        ).subscribe());
        this.setViewValue();
        this._initialised = true;
      }

      public setViewValue() {
        if (this.value === undefined || this.value === null) {
          this.viewValue = this.emptyViewValue;
        } else {
          if (this.options) {
            this._subscription.add(this.options.changes
                                       .pipe(
                                         startWith(null),
                                         tap(() => (this.viewValue = this.getViewValue())),
                                       )
                                       .subscribe());
          } else if (isDevMode()) {
            console.log('Could not load any option');
          }
        }
      }

      public ngOnChanges(changes: SimpleChanges) {
        if (this._initialised) {
          if (changes['value']) {
            this.setViewValue();
          }
        }
      }

      public getViewValue(): string {
        return (
          this.options.find((option) => option.value === this.value)?.viewValue ??
          this.defaultViewValue
        );
      }

      public ngOnDestroy() {
        this._subscription?.unsubscribe();
      }
    }

    {{viewValue}}
    <ng-content></ng-content>

`./options-cell.component.scss`

Legend
Html element
Component
Html element with directive

# results matching ""

# No results matching ""