File

src/ui/language-picker/smart-language-picker.component.ts

Extends

AbstractSmartComponent

Implements

OnInit AfterViewInit

Metadata

selector smart-language-picker
styleUrls ./smart-language-picker.component.css
templateUrl ./smart-language-picker.component.html

Index

Properties
Methods
Inputs
Outputs
Accessors

Constructor

constructor(sessionManager: SmartSessionManagerService, languageManager: SmartLanguageMangagerService, smartErrorHandler: SmartErrorHandlerService, serviceAdapter: SmartServiceAdapter, elementRef: ElementRef)
Parameters :
Name Type Optional
sessionManager SmartSessionManagerService No
languageManager SmartLanguageMangagerService No
smartErrorHandler SmartErrorHandlerService No
serviceAdapter SmartServiceAdapter No
elementRef ElementRef No

Inputs

language-picker-allow-filter
Type : boolean

Outputs

languageSelected
Type : EventEmitter<ILanguage>

Methods

Public onBlur
onBlur()
Returns : void
Public onComboSelectionChange
onComboSelectionChange(value)
Parameters :
Name Optional
value No
Returns : void

Properties

Public availableLanguages
Type : ILanguage[]
languageCombo
Type : ComboBoxComponent
Decorators :
@ViewChild('languageCombo', {static: true})
languageDropdown
Type : DropDownListComponent
Decorators :
@ViewChild('languageCombo', {static: true})
Public selectedFlagImage
Type : string

Accessors

selectedLanguage
getselectedLanguage()
Returns : ILanguage
setselectedLanguage(value)
Parameters :
Name Optional
value No
Returns : void
imageURLBase
getimageURLBase()
Returns : string
combo
getcombo()
Returns : ComboBoxComponent
setcombo(value)
Parameters :
Name Optional
value No
Returns : void
dropdown
getdropdown()
Returns : DropDownListComponent
setdropdown(value)
Parameters :
Name Optional
value No
Returns : void
<img id="language-flag" *ngIf="allowFiltering !== false" [src]="selectedFlagImage" />

<kendo-combobox 
*ngIf="allowFiltering !== false"
    #languageCombo
    (blur)="onBlur()" 
    [clearButton]="false" 
    [data]="availableLanguages" 
    [allowCustom]="false" 
    [textField]="'LanguageName'" 
    [valueField]="'LanguageIsoCode'"
    [ngModel]="selectedLanguage"
    (valueChange)="onComboSelectionChange($event)">
        <ng-template kendoComboBoxItemTemplate let-dataItem>
            <span class="template">
                <img [src]="imageURLBase + dataItem.LanguageImage">
            </span>
            &nbsp;&nbsp;
            {{dataItem.LanguageName}}
        </ng-template>
</kendo-combobox>

<kendo-dropdownlist 
    *ngIf="allowFiltering === false"
    #languageDropdown 
    (blur)="onBlur()" 
    [data]="availableLanguages"
    [ngModel]="selectedLanguage"
    [valuePrimitive]="false" 
    [textField]="'LanguageName'" 
    [valueField]="'LanguageIsoCode'"
    (valueChange)="onComboSelectionChange($event)">
        <ng-template kendoDropDownListItemTemplate let-dataItem>
            <span class="template">
                <img [src]="imageURLBase + dataItem.LanguageImage">
            </span>
            &nbsp;&nbsp;
            {{dataItem.LanguageName}}
        </ng-template>
        <ng-template kendoDropDownListValueTemplate let-dataItem>
            <span class="template">
                <img *ngIf="dataItem" [src]="imageURLBase + dataItem.LanguageImage">
            </span>
            &nbsp;&nbsp;
            {{dataItem?.LanguageName}}
        </ng-template>
</kendo-dropdownlist>

./smart-language-picker.component.css

#language-flag {
    height: 20px;
    padding-right: 10px;
}
Legend
Html element
Component
Html element with directive

result-matching ""

    No results matching ""