Dropdown menu in angular select not picking up data

Solution for Dropdown menu in angular select not picking up data
is Given Below:

error

core.js:6479 ERROR TypeError: Cannot read property 'category' of undefined
    at ProductManagementComponent.search (product-management.component.ts:53)
    at ProductManagementComponent_Template_select_ngModelChange_0_listener (product-management.component.html:2)
    at executeListenerWithErrorHandling (core.js:15307)
    at Object.wrapListenerIn_markDirtyAndPreventDefault [as next] (core.js:15351)
    at SafeSubscriber.__tryOrUnsub (Subscriber.js:183)
    at SafeSubscriber.next (Subscriber.js:122)
    at Subscriber._next (Subscriber.js:72)
    at Subscriber.next (Subscriber.js:49)
    at EventEmitter_.next (Subject.js:39)
    at EventEmitter_.emit (core.js:25968)

html = think i may have done something wrong here but cant find out why the data i select are not being sent

<select [(ngModel)]= "viewcat" name="pc.category" #pc.category ="ngModel" (ngModelChange)="search($event)">
        <option *ngFor = "let pc of productcategory" [ngValue] = "pc.category">
            {{pc.category|uppercase}}
        </option>
    </select>

viewcat = used to display data

public viewcat(){
    return this.httpclient.get("http://localhost:8094/api/ProductCategory");
  }
_____________________________________________________________
public viewcat(){
    this.productser.viewcat().subscribe((pc:{})=>{
      this.productcategory=pc;
      console.log(pc);
    });
  }

search = returns collection of the data being sent from html

 public search(form:NgForm){
    console.log("A");
    console.log(form.value.category);
    this.productser.search(form.value.category).subscribe((pc:{})=>{
      this.productcategory=pc;
      console.log(pc);
    });
  }
_____________________________________________________________
  public search(category:string){
    console.log(category);
    return this.httpclient.get(this.serverurl+"/"+category);
  }

You are binding your select with ngModel that’s mean you need to defined that variable in your component.

And after that in your model change event handler you can use that variable to get the select value and performed any action based on that.

<select [(ngModel)]= "category" name="category" (ngModelChange)="search($event)">
  <option *ngFor = "let pc of productCategory" [ngValue] = "pc.category">
      {{pc.category|uppercase}}
  </option>
</select>

Component Class Code:-

productCategory = [{
    category:'fruits'
  },
  {
    category:'animals'
}];
category: string;

search(event:any){
    console.log(this.category);
    //Rest of code
}

Working example:- https://stackblitz.com/edit/angular-ivy-fgaz8c?file=src%2Fapp%2Fapp.component.html