### File

`src/lib/expand-row/expand-row-container/expand-row-container.component.ts`

### Implements

`AfterContentInit` `OnDestroy`

### Metadata

changeDetection | `ChangeDetectionStrategy.OnPush`
selector | `td[rxap-expand-row]`
imports | `PortalModule` `AsyncPipe`
styleUrls | `./expand-row-container.component.scss`
templateUrl | `./expand-row-container.component.html`

### Index

###### Properties
Public Readonly expandCell Public Optional expandCellContent Public portal
###### Inputs
element

### Constructor

`constructor(viewContainerRef: ViewContainerRef, expandCell: ExpandRowService<Data>)`
Defined in src/lib/expand-row/expand-row-container/expand-row-container.component.ts:63
Parameters :
Name | Type | Optional
viewContainerRef | `ViewContainerRef` | No
expandCell | `ExpandRowService<Data>` | No

### Inputs

element
Type : `Data`
Required : true
Defined in src/lib/expand-row/expand-row-container/expand-row-container.component.ts:56

### Properties

Public Readonly expandCell
Type : `ExpandRowService<Data>`
Decorators : `@Inject(ExpandRowService)`
Defined in src/lib/expand-row/expand-row-container/expand-row-container.component.ts:69

Public Optional expandCellContent
Type : `ExpandRowContentDirective<Data>`
Decorators : `@ContentChild(ExpandRowContentDirective)`
Defined in src/lib/expand-row/expand-row-container/expand-row-container.component.ts:59

Public portal
Type : `TemplatePortal<ExpandCellContentDirectiveContext<Data>> | null`
Default value : `null`
Defined in src/lib/expand-row/expand-row-container/expand-row-container.component.ts:61

    import {
      AfterContentInit,
      ChangeDetectionStrategy,
      Component,
      ContentChild,
      Inject,
      Input,
      OnDestroy,
      ViewContainerRef,
    } from '@angular/core';
    import {
      ExpandCellContentDirectiveContext,
      ExpandRowContentDirective,
    } from './expand-row-content.directive';
    import {
      PortalModule,
      TemplatePortal,
    } from '@angular/cdk/portal';
    import { Required } from '@rxap/utilities';
    import {
      animate,
      state,
      style,
      transition,
      trigger,
    } from '@angular/animations';
    import { ExpandRowService } from '../expand-row.service';
    import { Subscription } from 'rxjs';
    import {
      filter,
      tap,
    } from 'rxjs/operators';
    import { AsyncPipe } from '@angular/common';

    @Component({
        // eslint-disable-next-line @angular-eslint/component-selector
        selector: 'td[rxap-expand-row]',
        templateUrl: './expand-row-container.component.html',
        styleUrls: ['./expand-row-container.component.scss'],
        changeDetection: ChangeDetectionStrategy.OnPush,
        animations: [
            trigger('detailExpand', [
                state('collapsed', style({
                    height: '0px',
                    minHeight: '0',
                })),
                state('expanded', style({ height: '*' })),
                transition('expanded <=> collapsed', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')),
            ]),
        ],
        imports: [PortalModule, AsyncPipe]
    })
    export class ExpandRowContainerComponent<Data extends Record<string, any>> implements AfterContentInit, OnDestroy {

      @Input({ required: true })
      public element!: Data;

      @ContentChild(ExpandRowContentDirective)
      public expandCellContent?: ExpandRowContentDirective<Data>;

      public portal: TemplatePortal<ExpandCellContentDirectiveContext<Data>> | null = null;

      private _subscription?: Subscription;

      constructor(
        @Inject(ViewContainerRef)
        private readonly viewContainerRef: ViewContainerRef,
        @Inject(ExpandRowService)
        public readonly expandCell: ExpandRowService<Data>,
      ) {
      }

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

      public ngAfterContentInit() {
        if (this.expandCellContent) {
          this._subscription = this.expandCell.isExpanded$(this.element).pipe(
            filter(Boolean),
            tap(() => {
              if (!this.portal) {
                this.portal =
                  new TemplatePortal(this.expandCellContent!.template, this.viewContainerRef, { $implicit: this.element });
              }
            }),
          ).subscribe();
        }
      }

    }

    <div [@detailExpand]="(expandCell.isExpanded$(element) | async) ? 'expanded' : 'collapsed'" class="element-detail">
      <ng-content></ng-content>
      <ng-template [cdkPortalOutlet]="portal"></ng-template>
    </div>

`./expand-row-container.component.scss`

    .element-detail {
      overflow: hidden;
      display: flex;
    }

Legend
Html element
Component
Html element with directive

# results matching ""

# No results matching ""