I need to display all the names I have written in the table in the Angular field - asp.net

Question

I need to display all the names I have written in the table in the Angular field.
I have DB:
CREATE TABLE [dbo].[Sellers](
[Id] [int] IDENTITY(1,1) PRIMARY KEY NOT NULL,
[Login] [varchar](50) NOT NULL,
[Password] [varchar](50) NOT NULL,
[Name] [nchar](50) NOT NULL,
[Address] [nchar](50) NOT NULL,
[Email] [varchar](50) NOT NULL,
[RegistrationDate] [datetime] NOT NULL,
)
GO
I am requesting ASP web API to bring all the names from the table:
public class SellersController : ApiController
{
[HttpGet]
public async Task<IHttpActionResult> GetNames(string name)
{
using (var dataBaseContext = new DataBaseContext())
{
var query = from seller in dataBaseContext.Sellers
where
seller.Name == name
select seller;
return Ok(await query.ToListAsync());
}
}
}
I'll bring it to the angular. But it is not displayed and generally cries out the code:
import { Sellers } from './sellers.model';
import { Injectable } from '#angular/core';
#Injectable({
providedIn: 'root'
})
export class SellersService {
formData : Sellers;
constructor() { }
}
________________
<div class="p-3 px-md-4 mb-3 bg-white">
<input name="Sellers" #Sellers="ngModel"[(ngModel)] = "service.formData" class="form-control">
</div>
Nothing is displayed and the last line of the code issues an error
Can't bind to 'ngModel' since it isn't a known property of 'input'.Angular
UPD:
import { SellersService } from './shared/sellers.service';
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { RouterModule, Routes } from '#angular/router';
import { HttpModule } from '#angular/http';
import { FormsModule } from '#angular/forms';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { TopRegionComponent } from './components/top-region/top-region.component';
import { LeftRegionComponent } from './components/left-region/left-region.component';
import { BottomRegionComponent } from './components/bottom-region/bottom-region.component';
import { CenterRegionComponent } from './components/center-region/center-region.component';
import { UserComponent } from './components/user/user.component';
const appRoutes: Routes = [
{path: '', component: AppComponent},
{path: 'user', component: UserComponent},
{path: 'left-region', component: LeftRegionComponent},
{path: 'top-region', component: TopRegionComponent},
{path: 'bottom-region', component: BottomRegionComponent},
{path: 'center-region', component: CenterRegionComponent},
]
#NgModule({
declarations: [
AppComponent,
TopRegionComponent,
LeftRegionComponent,
BottomRegionComponent,
CenterRegionComponent,
UserComponent,
],
imports: [
BrowserModule,
AppRoutingModule,
RouterModule.forRoot(appRoutes),
HttpModule,
FormsModule
],
providers: [SellersService],
bootstrap: [AppComponent]
})
export class AppModule { }
UPD2:
import { SellersService } from './../../shared/sellers.service';
import { Component, OnInit } from '#angular/core';
import {Http} from '#angular/http';
import { FormsModule } from '#angular/forms';
#Component({
selector: 'left-region',
templateUrl: './left-region.component.html',
styleUrls: ['./left-region.component.css']
})
export class LeftRegionComponent implements OnInit {
constructor(private service : SellersService)
{
}
ngOnInit() {
}
}

Answer 1

I have given an example for your query kindly look into it.
import { Sellers } from './sellers.model';
import { Injectable } from '#angular/core';
#Injectable({
providedIn: 'root'
})
export class SellersService {
formData : Sellers;
seller : Sellers = new Sellers();
constructor() { }
}
HTML
<div class="p-3 px-md-4 mb-3 bg-white">
<input name="Sellers" #Sellers="ngModel" [(ngModel)]= "seller.Name" class="form-control">
</div>