Angular 2 MVC 5 Razor - How does one create an @Ht

Question

I wish to create something like this:

<select class="form-control" ([ngModel])="selectedWorkout" (ngModelChange)="updateWorkout($event)" #selectList="ngModel">
   <option value="44">Pick me!</option>
</select>

Using Html.DropDownFor in razor. How can I do that? Specifically, how do I add in ([ngModel]), (ngModelChange), and #selectList?

My dropdownfor is like:

@Html.DropDownListFor(m => m.itemId, Model.itemList, new { @class = "form-control" })

Answer 1

You need to make sure you're hooked up for angular.  You would have to create your model ('Model.itemList') inside of a controller to inject into your HTML.  Like below, $scope.names would be your collection.  Inject it into your view/HTML and loop through it in a select element and should be all set. 

Reference: https://www.w3schools.com/angular/angular_select.asp 
<div ng-app="myApp" ng-controller="myCtrl">

<select ng-model="selectedName" ng-options="x for x in names">
</select>

</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.names = ["Emil", "Tobias", "Linus"];
});
</script>

Answer 2

I ended up finding this out. One of the overloads uses a dictionary for the html attributes rather than an object. I use this dictionary to add the required elements.

@Html.DropDownListFor(m => m.itemId, Model.itemList, new Dictionary<string, object>()
    {
        { "class", "form-control" },
        { "required", String.Empty },
        { "maxlength", "4" },
        { "minlength", "2" },
        { "[(ngModel)]", "dataForm.itemId" }
    })