<div nxLayout="grid">
    <div nxRow>
        <div nxCol="12,12,6">
            <form>
                <nx-formfield label="Car brand">
                    <nx-dropdown
                        #ngModelDropdown
                        name="test"
                        [(ngModel)]="ngModelBinding"
                    >
                        <nx-dropdown-item value="BMW"></nx-dropdown-item>
                        <nx-dropdown-item value="Audi"></nx-dropdown-item>
                        <nx-dropdown-item value="Volvo"></nx-dropdown-item>
                        <nx-dropdown-item value="Mini"></nx-dropdown-item>
                    </nx-dropdown>
                </nx-formfield>
            </form>
            <p class="nx-margin-y-0">
                Current Value: {{ ngModelDropdown.value }}
            </p>
            <p class="nx-margin-y-0">Model: {{ ngModelBinding | json }}</p>
        </div>
    </div>

    <div nxRow>
        <div nxCol="12">
            <p class="nx-margin-top-0 nx-margin-bottom-xs">
                Try to set the value to BMW, Audi, Volvo or Mini.
            </p>
            <div class="update-container">
                <input #templateInput type="text" />
                <button
                    nxButton="primary small"
                    class="nx-margin-bottom-0"
                    (click)="ngModelBinding = templateInput.value"
                    type="button"
                >
                    Update
                </button>
            </div>
        </div>
    </div>
</div>
