### File

`projects/commons/src/lib/elements/avatar/components/avatar.component.ts`

### Implements

`OnInit`

### Metadata

selector | `cmn-avatar`
styleUrls | `./avatar.component.scss`
templateUrl | `./avatar.component.html`

### Index

###### Properties
Private getInitialUpperCase Private getTwoFirstLetters
###### Methods
Public ngOnInit
###### Inputs
badge image isCircle size text

### Inputs

badge
Type : `IBadge`
Defined in projects/commons/src/lib/elements/avatar/components/avatar.component.ts:14

image
Type : `string`
Defined in projects/commons/src/lib/elements/avatar/components/avatar.component.ts:15

isCircle
Type : `boolean`
Default value : `true`
Defined in projects/commons/src/lib/elements/avatar/components/avatar.component.ts:16

size
Type : `Sizes`
Default value : `sizeEnum.medium`
Defined in projects/commons/src/lib/elements/avatar/components/avatar.component.ts:17

text
Type : `string`
Defined in projects/commons/src/lib/elements/avatar/components/avatar.component.ts:13

### Methods

Public ngOnInit
`ngOnInit()`
Defined in projects/commons/src/lib/elements/avatar/components/avatar.component.ts:19
Returns : `void`

### Properties

Private getInitialUpperCase
Default value : `() => {...}`
Defined in projects/commons/src/lib/elements/avatar/components/avatar.component.ts:28

Private getTwoFirstLetters
Default value : `() => {...}`
Defined in projects/commons/src/lib/elements/avatar/components/avatar.component.ts:33

    import {Component, Input, OnInit} from '@angular/core';

    import { IBadge } from '../../badge/interfaces';
    import {sizeEnum, Sizes} from '../../../shared/enums';

    @Component ({
        selector: 'cmn-avatar',
        templateUrl: './avatar.component.html',
        styleUrls: [ './avatar.component.scss' ],
    })

    export class AvatarComponent implements OnInit {
        @Input() public text: string;
        @Input() public badge: IBadge;
        @Input() public readonly image: string;
        @Input() public readonly isCircle: boolean = true;
        @Input() public readonly size: Sizes = sizeEnum.medium;

        public ngOnInit(): void {
            if (!this.image && this.text) {
                const textArray: string[] = this.text.split(' ');
                this.text = textArray.length > 1 ?
                    this.getInitialUpperCase(textArray) :
                    this.getTwoFirstLetters(this.text);
            }
        }

        private getInitialUpperCase = (textArray: string[]): string => {
            return textArray[0][0].toUpperCase() +
                textArray[1][0].toUpperCase();
        }

        private getTwoFirstLetters = (text: string): string => {
            return text[0].toUpperCase() +
                text[1].toLowerCase();
        }
    }

    <div class="avatar has-background-grey-light has-text-centered {{ size }}"
         [cmnBadge]="badge?.label"
         [color]="badge?.color"
         [class.is-circle]="isCircle"
         [class.has-image]="image">
        <ng-container
            *ngIf="image; then showImage; else showText">
        </ng-container>

        <ng-template #showImage>
            <img [src]="image">
        </ng-template>
        <ng-template #showText>
            {{ text }}
        </ng-template>
    </div>

`./avatar.component.scss`

    $small: 40px;
    $medium: 64px;
    $large: 80px;

    :host {
        .avatar, img {
            color: azure;
            border-radius: 8px;

            &[data-badge] {
                &::after {
                    transform: translate(0%, 0%);
                }
            }

            &:not(.has-image) {
                &.is-small {
                    padding: 12px 0;
                    font-size: 10px;
                }

                &.is-medium {
                    padding: 15.5px 0;
                    font-size: 20px;
                }

                &.is-large {
                    padding: 17px 0;
                    font-size: 30px;
                }
            }

            &.is-small, &.is-small>img {
                width: $small;
                height: $small;
            }

            &.is-medium,
            &.is-medium>img {
                width: $medium;
                height: $medium;
            }

            &.is-large,
            &.is-large>img {
                width: $large;
                height: $large;
            }

            &.is-circle,
            &.is-circle>img {
                border-radius: 50px;
            }
        }
    }

Legend
Html element
Component
Html element with directive

# result-matching ""

# No results matching ""