### File

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

### Metadata

changeDetection | `ChangeDetectionStrategy.OnPush`
selector | `td[rxap-image-cell]`
standalone | `true`
imports | `NgIf` `NgClass` `BackgroundImageDirective`
styleUrls | `./image-cell.component.scss`
templateUrl | `./image-cell.component.html`

### Index

###### Inputs

- position
- preset
- repeat
- rxap-image-cell
- size

### Inputs

position
Type : `BackgroundPosition`
Default value : `BackgroundPositionOptions.CENTER_CENTER`
Defined in src/lib/cells/image-cell/image-cell.component.ts:41

preset
Type : `string`
Defined in src/lib/cells/image-cell/image-cell.component.ts:32

repeat
Type : `BackgroundRepeat`
Default value : `BackgroundRepeatOptions.NO_REPEAT`
Defined in src/lib/cells/image-cell/image-cell.component.ts:38

rxap-image-cell
Type : `string | null`
Default value : `null`
Defined in src/lib/cells/image-cell/image-cell.component.ts:44

size
Type : `BackgroundSize`
Default value : `BackgroundSizeOptions.COVER`
Defined in src/lib/cells/image-cell/image-cell.component.ts:35

    import {
      ChangeDetectionStrategy,
      Component,
      Input,
    } from '@angular/core';
    import {
      BackgroundImageDirective,
      BackgroundPosition,
      BackgroundPositionOptions,
      BackgroundRepeat,
      BackgroundRepeatOptions,
      BackgroundSize,
      BackgroundSizeOptions,
    } from '@rxap/directives';
    import {
      NgClass,
      NgIf,
    } from '@angular/common';

    @Component({
      // eslint-disable-next-line @angular-eslint/component-selector
      selector: 'td[rxap-image-cell]',
      templateUrl: './image-cell.component.html',
      styleUrls: [ './image-cell.component.scss' ],
      changeDetection: ChangeDetectionStrategy.OnPush,
      standalone: true,
      imports: [ NgIf, NgClass, BackgroundImageDirective ],
    })
    export class ImageCellComponent {

      @Input()
      public preset?: string;

      @Input()
      public size: BackgroundSize = BackgroundSizeOptions.COVER;

      @Input()
      public repeat: BackgroundRepeat = BackgroundRepeatOptions.NO_REPEAT;

      @Input()
      public position: BackgroundPosition = BackgroundPositionOptions.CENTER_CENTER;

      @Input('rxap-image-cell')
      public value: string | null = null;

    }

    <div
      *ngIf="value"
      [ngClass]="[preset]"
      [position]="position"
      [repeat]="repeat"
      [rxapBackgroundImage]="value"
      [size]="size"
      class="image">
    </div>
    <ng-content></ng-content>

`./image-cell.component.scss`

    .image {
      width: 40px;
      height: 40px;

      &.circle {
        border-radius: 24px;
      }

      &.rounded {
        border-radius: 8px;
      }

    }

Legend
Html element
Component
Html element with directive

# results matching ""

# No results matching ""