SLDS Select (UI Module)

Same like we did it for SLDS Input let's create SLDS Select UI component.

.../slds-select.component.html

<div class="slds-form-element">
    <label class="slds-form-element__label" [for]="idPrefix+'_select-id'">{{label}}</label>
    <div class="slds-form-element__control">
        <div class="slds-select_container">
            <select
                [ngModel]="value"
                (ngModelChange)="onValueChange($event)"
                [id]="idPrefix+'_select-id'"
                [name]="name"
                class="slds-select" >
                <option [ngValue]="null">-select-</option>
                <option *ngFor="let op of options" [ngValue]="op.value">{{op.label}}</option>
            </select>
        </div>
    </div>
</div>

.../slds-select.component.ts

import { Component, OnInit, Input, Output, EventEmitter, forwardRef } from '@angular/core';
import { getRandomString } from '../../utils';
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';


@Component({
    selector: 'slds-select',
    templateUrl: './slds-select.component.html',
    styleUrls: ['./slds-select.component.scss'],
    providers: [
        {
            provide: NG_VALUE_ACCESSOR,
            useExisting: forwardRef(() => SldsSelectComponent),
            multi: true
        }
    ]
})
export class SldsSelectComponent implements ControlValueAccessor {

    @Input() label = '<No label>';
    @Input() name: string;
    @Input() required = false;
    @Input() disabled = false;
    @Input() options: string[] = [];  // [{value: ..., label: ...}]
    @Output() valueChange = new EventEmitter();

    idPrefix = '';
    value: string;

    constructor() {
        this.idPrefix = getRandomString();
    }

    writeValue(value: any): void {
        this.value = value;
    }

    propagateChange = (_: any) => {};

    registerOnChange(fn: any): void {
        this.propagateChange = fn;
    }

    registerOnTouched(fn: any): void {

    }

    onValueChange(newValue: any) {
        this.value = newValue;
        this.propagateChange(this.value);
    }

}

Usage example:

<slds-modal
    *ngIf="showSFDCOrgTypeSelect"
    title="Salesforce OAuth Setup">
    <modal-content>
        <slds-select
            [(ngModel)]="orgType"
            [options]="orgTypeOptions"
            label="Salesforce Organization Type"
            required="true"></slds-select>
    </modal-content>
    <modal-actions>
        <button class="slds-button slds-button_neutral" (click)="showSFDCOrgTypeSelect = false;">Cancel</button>
        <button class="slds-button slds-button_brand" [disabled]="!orgType" (click)="setupSalesforceConnectionStep2()">Connect</button>
    </modal-actions>
</slds-modal>