ccims documentation
  1. Components
  2. UserItemComponent

File

src/app/components/user-item/user-item.component.ts

Description

This component displays a user.

Metadata

selector app-user-item
styleUrls ./user-item.component.scss
templateUrl ./user-item.component.html

Index

Inputs

Inputs

noDisplay
Type : boolean
Default value : false
Defined in src/app/components/user-item/user-item.component.ts:16

Hides the display name.
short
Type : boolean
Default value : false
Defined in src/app/components/user-item/user-item.component.ts:14

Will show only the display name or username.
user
Type : User
Defined in src/app/components/user-item/user-item.component.ts:12

The user data.

 
import {Component, Input} from '@angular/core';
import {User} from 'src/generated/graphql-dgql';

/** This component displays a user. */
@Component({
  selector: 'app-user-item',
  templateUrl: './user-item.component.html',
  styleUrls: ['./user-item.component.scss']
})
export class UserItemComponent {
  /** The user data. */
  @Input() user: User;
  /** Will show only the display name or username. */
  @Input() short = false;
  /** Hides the display name. */
  @Input() noDisplay = false;
}

<ng-container *ngIf="user">
  <span class="display-name" *ngIf="!noDisplay && user.displayName && user.displayName !== user.username"> {{ user.displayName }} </span>
  <span
    *ngIf="!short || !user.displayName"
    [ngClass]="
      !noDisplay && user.displayName && user.displayName !== user.username
        ? 'username has-display-name'
        : 'username'
    "
  >
    {{ user.username }}
  </span>
</ng-container>

./user-item.component.scss 

.display-name {
  font-weight: 500;
}
.username {
  &.has-display-name {
    opacity: 0.7;
  }
  &:not(.has-display-name) {
    font-weight: 500;
  }
}
Legend
Html element
Component
Html element with directive

results matching ""

    No results matching ""