### File

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

### Metadata

changeDetection | `ChangeDetectionStrategy.OnPush`
selector | `td[rxap-link-cell]`
imports | `NgIf` `MatTooltipModule` `NgSwitch` `NgSwitchCase` `MatIconModule` `NgSwitchDefault`
styleUrls | `./link-cell.component.scss`
templateUrl | `./link-cell.component.html`

### Index

###### Inputs
protocol rxap-link-cell short
###### Accessors
href

### Inputs

protocol
Type : `"tel" | "mailto"`
Defined in src/lib/cells/link-cell/link-cell.component.ts:36

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

short
Type : `boolean`
Default value : `true`
Defined in src/lib/cells/link-cell/link-cell.component.ts:39

### Accessors

href
get `href()`
Defined in src/lib/cells/link-cell/link-cell.component.ts:28

    import {
      ChangeDetectionStrategy,
      Component,
      Input,
    } from '@angular/core';
    import { MatIconModule } from '@angular/material/icon';
    import { MatTooltipModule } from '@angular/material/tooltip';
    import {
      NgIf,
      NgSwitch,
      NgSwitchCase,
      NgSwitchDefault,
    } from '@angular/common';

    @Component({
        // eslint-disable-next-line @angular-eslint/component-selector
        selector: 'td[rxap-link-cell]',
        templateUrl: './link-cell.component.html',
        styleUrls: ['./link-cell.component.scss'],
        changeDetection: ChangeDetectionStrategy.OnPush,
        imports: [NgIf, MatTooltipModule, NgSwitch, NgSwitchCase, MatIconModule, NgSwitchDefault]
    })
    export class LinkCellComponent {

      @Input('rxap-link-cell')
      public value: any;

      public get href(): string {
        if (this.protocol) {
          return [ this.protocol, this.value ].join(':');
        }
        return this.value;
      }

      @Input()
      public protocol?: 'tel' | 'mailto';

      @Input()
      public short = true;

    }

    <a *ngIf="value" [href]="href" [matTooltip]="value" class="link" target="_blank">
      <span class="flex flex-row items-center gap-2">
        <span *ngIf="short" class="content grow-0" i18n>Open</span>
        <ng-container [ngSwitch]="protocol">
          <mat-icon *ngSwitchCase="'tel'" class="grow-0">call</mat-icon>
          <mat-icon *ngSwitchCase="'mailto'" class="grow-0">email</mat-icon>
          <mat-icon *ngSwitchDefault class="grow-0">launch</mat-icon>
        </ng-container>
        <span *ngIf="!short" class="content grow-0">{{value}}</span>
      </span>
    </a>
    <ng-content></ng-content>

`./link-cell.component.scss`

    .link {
      text-decoration: none;
      color: inherit;

      .content {
        max-width: 160px;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
      }
    }

Legend
Html element
Component
Html element with directive

# results matching ""

# No results matching ""