title: How can I get the id of user in Angular
body: <p>I faced an issue on my project I'm trying to add a bill in my project. I have a Bill form to complete so for input &quot;name&quot; I searched about users name in DB and I selected one of them so I don't know how can I get the id of the user that I selected can someone help me to solve this issue please by the way I'm using angular 10 this is my first project or just upvote my question</p>
  <p><strong>AddFacture.component</strong></p>
  <pre><code> export class AddFacture1Component implements OnInit {
      
        @ViewChild('sample')
        public AutoCompleteObj: AutoCompleteComponent;
      
       
        isSuccessful = false;
        errorMessage = '';
        userList: UserInfo[] = [];
        status: Status[] = [
          {value: 'unpaid', viewValue: 'Unpaid'},
          {value: 'paid', viewValue: 'Paid'}
        ];
      
       
      
       form: FactureInfo = {};
        constructor(private factureService: FactureService, private userService : UserService) { }
      
        ngOnInit(): void {
          this.getUsersData();
        }
       onSubmit() {
       
            this.factureService.addFacture(this.form).subscribe(
              data =&gt; {
                console.log(data);
                this.isSuccessful = true;
               
              },
              err =&gt; {
                this.errorMessage = err.error.message;
              }
            );
      
          }
      
        
          getUsersData() {
            this.userService.getPublicContent().subscribe(
              data =&gt;  {
      
                this.userList = data;
                
               console.log(data);
              },
              err =&gt; {
                console.log(&quot;An error has occured !&quot;)
              }
            );
          }
          
          public fields: Object = { value: 'nom' };
          public value: string = '';
          public fields1: Object = { value: 'prenom' };
          public value1: string = '';
          // set the placeholder to AutoComplete input
          public waterMark: string = 'e.g. Last name';
          public waterMark1: string = 'e.g. First name';
          // set the height of the popup element
          public height: string = '250px';
          // bind the change event
          public onChange(args: any): void {
              let valueEle: HTMLInputElement = document.getElementsByClassName('e-input')[0] as HTMLInputElement;
              // make empty the input value when typed characters is 'null' in input element
              if (this.AutoCompleteObj.value === &quot;null&quot; || this.AutoCompleteObj.value === null || this.AutoCompleteObj.value === &quot;&quot;) {
                  valueEle.value = '';
              }
          }
      
      }
  </code></pre>
  <p><strong>AddFacture.html</strong></p>
  <pre><code>&lt;div class=&quot;container p-5&quot;&gt;
      &lt;div class=&quot;row&quot;&gt;
        &lt;div class=&quot;col-md-6 m-auto&quot;&gt;
          &lt;h1 class=&quot;activities-title text-center mb-5&quot;&gt;
            Add a new bill
          &lt;/h1&gt;
  
          &lt;form class=&quot;activites&quot;
          form name=&quot;form&quot; *ngIf=&quot;!isSuccessful&quot;
          name=&quot;form&quot;
          (ngSubmit)=&quot;f.form.valid &amp;&amp; onSubmit()&quot;
          #f=&quot;ngForm&quot;
          novalidate&gt;
            &lt;div class=&quot;form-group position-relative my-4&quot;&gt;
              &lt;input type=&quot;text&quot; class=&quot;input&quot; required=&quot;required&quot; name=&quot;num facture&quot;  [(ngModel)]=&quot;form.num_facture&quot;
              #num_facture=&quot;ngModel&quot;/&gt;
              &lt;span class=&quot;highlight&quot; &gt;&lt;/span&gt;
              &lt;span class=&quot;bar&quot;&gt;&lt;/span&gt;
              &lt;label&gt;N bill&lt;/label&gt;
            &lt;/div&gt;
            &lt;div class=&quot;form-group position-relative my-4&quot;&gt;
              &lt;input type=&quot;text&quot; class=&quot;input&quot; required=&quot;required&quot; name=&quot;prix&quot;  [(ngModel)]=&quot;form.prix&quot;
              #prix=&quot;ngModel&quot;/&gt;
              &lt;span class=&quot;highlight&quot; &gt;&lt;/span&gt;
              &lt;span class=&quot;bar&quot;&gt;&lt;/span&gt;
              &lt;label&gt;Price&lt;/label&gt;
            &lt;/div&gt;
            &lt;div class=&quot;form-group position-relative my-4&quot;&gt;
              &lt;input type=&quot;date&quot; class=&quot;input&quot; required=&quot;required&quot; name=&quot;date_facture&quot;  [(ngModel)]=&quot;form.date_facture&quot;
              #date_facture=&quot;ngModel&quot;/&gt;
              &lt;span class=&quot;highlight&quot; &gt;&lt;/span&gt;
              &lt;span class=&quot;bar&quot;&gt;&lt;/span&gt;
              
            &lt;/div&gt;
  
            &lt;div class=&quot;form-group position-relative my-4&quot;&gt;
                      &lt;ejs-autocomplete  #sample [dataSource]='userList' [(value)]='value'
                          [placeholder]='waterMark' [fields]='fields' (change)='onChange($event)'
                          name=&quot;nom&quot; [(ngModel)]=&quot;form.nom&quot; required #nom=&quot;ngModel&quot;&gt;&lt;/ejs-autocomplete&gt;
               
            &lt;/div&gt;
            &lt;div class=&quot;form-group position-relative my-4&quot;&gt;
                    &lt;ejs-autocomplete id='games' #sample [dataSource]='userList' [(value)]='value1'
                        [placeholder]='waterMark1' [fields]='fields1' (change)='onChange($event)'
                        name=&quot;prenom&quot; [(ngModel)]=&quot;form.prenom&quot; required #prenom=&quot;ngModel&quot;&gt;&lt;/ejs-autocomplete&gt;
           &lt;/div&gt;
          
          
     
            
      
            &lt;div class=&quot;btn-box&quot;&gt;
              &lt;button class=&quot;btn btn-submit&quot; type=&quot;submit&quot; name=&quot;submit-form&quot;&gt;Add to store&lt;/button&gt;
            &lt;/div&gt;
          &lt;/form&gt;
          &lt;div class=&quot;alert alert-success&quot; *ngIf=&quot;isSuccessful&quot;&gt;
             The bill has been added correctly!
             &lt;div class=&quot;btn-box&quot;&gt;
              &lt;button class=&quot;btn btn-submit&quot;  name=&quot;submit-form&quot; [routerLink]=&quot;['../list-medicine']&quot;&gt;Return to the store&lt;/button&gt;
            &lt;/div&gt;
            &lt;/div&gt; 
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  </code></pre>