File

src/lib/expand-row/expand-controls-cell/expand-controls-cell.component.ts

Metadata

Index

Properties
Inputs

Constructor

constructor(expandCell: ExpandRowService<Data>)
Parameters :
Name Type Optional
expandCell ExpandRowService<Data> No

Inputs

rxap-expand-controls-cell
Type : Data
Required :  true

Properties

Public Readonly expandCell
Type : ExpandRowService<Data>
Decorators :
@Inject(ExpandRowService)
import {
  ChangeDetectionStrategy,
  Component,
  Inject,
  Input,
} from '@angular/core';
import { ExpandRowService } from '../expand-row.service';
import { Required } from '@rxap/utilities';
import { MatIconModule } from '@angular/material/icon';
import {
  AsyncPipe,
  NgIf,
} from '@angular/common';
import { MatButtonModule } from '@angular/material/button';

@Component({
    // eslint-disable-next-line @angular-eslint/component-selector
    selector: 'td[rxap-expand-controls-cell]',
    templateUrl: './expand-controls-cell.component.html',
    styleUrls: ['./expand-controls-cell.component.scss'],
    changeDetection: ChangeDetectionStrategy.OnPush,
    imports: [MatButtonModule, NgIf, MatIconModule, AsyncPipe]
})
export class ExpandControlsCellComponent<Data extends Record<string, any>> {

  @Input({
    required: true,
    alias: 'rxap-expand-controls-cell',
  })
  public element!: Data;

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

}
<button type="button" mat-icon-button>
  <mat-icon *ngIf="expandCell.isExpanded$(element) | async; else notExpanded">expand_more</mat-icon>
  <ng-template #notExpanded>
    <mat-icon>keyboard_arrow_right</mat-icon>
  </ng-template>
</button>

./expand-controls-cell.component.scss

Legend
Html element
Component
Html element with directive

results matching ""

    No results matching ""