### File

`projects/commons/src/lib/elements/lang-picker/components/lang-picker.component.ts`

### Implements

`OnInit`

### Metadata

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

### Index

###### Properties
Public langs Public value
###### Methods
Public ngOnInit Public onSelect

### Methods

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

Public onSelect
`onSelect(lang: ILangPicker)`
Defined in projects/commons/src/lib/elements/lang-picker/components/lang-picker.component.ts:23
Parameters :
Name | Type | Optional
lang | `ILangPicker` | No
Returns : `void`

### Properties

Public langs
Type : `ILangPicker[]`
Default value : `[ {id: 'en', label: 'english'}, {id: 'es', label: 'spanish', isActive: true}, ]`
Defined in projects/commons/src/lib/elements/lang-picker/components/lang-picker.component.ts:14

Public value
Type : `string`
Defined in projects/commons/src/lib/elements/lang-picker/components/lang-picker.component.ts:13

    import { Component, OnInit } from '@angular/core';
    import { TranslateService } from '@ngx-translate/core';

    import { ILangPicker } from '../interfaces';

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

    export class LangPickerComponent implements OnInit {
        public value: string;
        public langs: ILangPicker[] = [
            {id: 'en', label: 'english'},
            {id: 'es', label: 'spanish', isActive: true},
        ];

        public ngOnInit(): void {
            this.value = this.langs.find((lang) => lang.isActive).id;
        }

        public onSelect(lang: ILangPicker) {
            this.value = lang.id;
        }
    }

    <cmn-dropdown [label]="value"
                  [hasBorder]="false">
        <ng-container *ngFor="let lang of langs">
            <a class="dropdown-item"
               (click)="onSelect(lang)">
                {{ lang.id }}
            </a>
        </ng-container>
    </cmn-dropdown>

`./lang-picker.component.scss`

    ::ng-deep {
        .dropdown-trigger {
            .button {
                border: none;
            }
        }
    }

Legend
Html element
Component
Html element with directive

# result-matching ""

# No results matching ""