src/app/components/user-item/user-item.component.ts
This component displays a user.
| selector | app-user-item |
| styleUrls | ./user-item.component.scss |
| templateUrl | ./user-item.component.html |
Inputs |
| noDisplay | |
Type : boolean
|
|
Default value : false
|
|
|
Hides the display name. |
|
| short | |
Type : boolean
|
|
Default value : false
|
|
|
Will show only the display name or username. |
|
| user | |
Type : User
|
|
|
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;
}
}