I have an ASP.NET Web API with Angular 7 material design client side. I want to assign a role to a current user,
I have a user that I'm trying to assign a role to. I've got the .Net part working, but I can not figure out how to implement it on the angular side. I'm not sure if I'm getting the select dropdown correctly implemented. 
In my console.log(), the role is coming up as 'undefined'. Any help is appreciated.

The below is the current code.

> 
> ASP.NET Web API
> 
> 
> 

```
     [HttpPost]
    public async Task<IActionResult> Role(Roles role)
    {
        if (!ModelState.IsValid)
        {
            return BadRequest(ModelState);
        }

        try
        {
            var assignRole = await _contextFile.AddRoles(role.Email, role.UserRoles);
        }
        catch (Exception ex)
        {
            throw ex;
        }
        return Ok();
    }

```

> 
> Angular 7
> 
> 
> 
> > 
> > Service
> > 
> > 
> > 
> 
> 
> 

```
userRole(email: string, role: string){
  return this.http.post(this.Url +  {email, role});
}

populateDropdownRoles(){
  return this.http.get(this.roleUrl);
}

```

> 
> 
> > 
> > .ts file
> > 
> > 
> > 
> 
> 
> 

```
assignRole() {
 this.roleService.userRole(this.user.email, this.role);
}
dropdownRole() {
this.roleService.populateDropdownRoles();
}

```

> 
> .html file
> 
> 
> 

```
<form (ngSubmit)="assignRole()">
  <mat-form-field>
    <input
      matInput
      placeholder="Email"
      name="email"
      value="{{ user.email}}"  
    />
  </mat-form-field>
    <mat-form-field>
    <mat-select placeholder="Role">
      <mat-option *ngFor="let role of roles" name ="rolename" [(ngModel)]="role.rolename" value="{{role.rolename}}">
        {{role.rolename}}
      </mat-option>
    </mat-select>
  </mat-form-field>
    <button
      mat-raised-button
      type="submit"
    >
      Assign
    </button>
</form>

```