Username
import { KbqUsernameModule } from '@koobiq/components/username';
Methods
transform
Builds a formatted name string from the user profile using the provided format and mapping.

Pipe to format a user profile into a name string using a format pattern and field mapping. Lowercase keys output initials; uppercase keys show full values.

Methods
transform
Builds a formatted name string from the user profile using the provided format and mapping.

Styles the primary part of the username (e.g. full name).

Selector: [kbqUsernamePrimary]

Exported as: kbqUsernamePrimary

Styles the secondary part.

Selector: [kbqUsernameSecondary]

Exported as: kbqUsernameSecondary

Styles a secondary hint.

Selector: [kbqUsernameSecondaryHint]

Exported as: kbqUsernameSecondaryHint

Custom content for `KbqUsername`, overrides default view.

Selector: kbq-username-custom-view, [kbq-username-custom-view]

Exported as: kbqUsernameCustomView

Displays a user's name based on profile data. Supports different display modes and visual styles. A custom view can be provided via `` for full control over the output. Accepts input profile data and optional formatting options.

Selector: kbq-username

Exported as: kbqUsername
Properties
Name Description
@Input()
fullNameFormat: InputSignal
Format string for rendering the user's full name.
@Input()
isCompact: InputSignalWithTransform
Enables compact display mode
@Input()
mode: InputSignal
Display mode of the username.
@Input()
type: InputSignal
Visual style of the username.
@Input()
userInfo: InputSignal
User profile data used for display.

Maps each format key to a property name in the user profile object. Allows flexible formatting regardless of profile field names.

type KbqFormatKeyToProfileMapping = {
    [key in Exclude<
        KbqUsernameFormatKey,
        KbqUsernameFormatKey.FirstNameFull | KbqUsernameFormatKey.MiddleNameFull | KbqUsernameFormatKey.LastNameFull
    >]: keyof T | undefined;
};

Maps each format key to a property name in the user profile object. Allows flexible formatting regardless of profile field names.

type KbqFormatKeyToProfileMappingExtended = {
    [key in KbqUsernameFormatKey]: keyof T | undefined;
};

Layout mode for displaying a username and applying text-ellipsis. - `stacked`: Elements shown vertically. - `inline`: Elements shown in one line. Text ellipsis is applied to both parts. - `text`: Plain text, no layout styling. No text-ellipsis.

type KbqUsernameMode = 'stacked' | 'inline' | 'text';

Visual style of the username. - `default`: standard styling with primary and secondary colors. - `error`: error colors (e.g., red). - `accented`: no color theming; emphasizes via typography only. - `inherit`: inherits parent styles, no theming. For example, useful when using inside links.

type KbqUsernameStyle = 'default' | 'error' | 'accented' | 'inherit';

Default name format: Last name full, first and middle as initials.

const kbqDefaultFullNameFormatCustom: string;

Default name format: Last name full, first and middle as initials.

const kbqDefaultFullNameFormat: string;

Injection token for providing a global username format-to-profile mapping.

const KBQ_PROFILE_MAPPING: InjectionToken<KbqFormatKeyToProfileMapping | KbqFormatKeyToProfileMappingExtended>;
Docs Feedback
If you have any questions or would like to contribute to writing the documentation, please create an issue in our GitHub repository.