Search code examples
htmlasp.netangulartypescriptstring-interpolation

How to use angular material drop down to to see on each select an the "the company name" from the sql server


How to fix it so it will work, want to use angular angular material drop down to to see on each select an the "the company name" from the sql server I would like to bind the dropdown select and it will let me choose company name that i already imported

TS-https://prnt.sc/p2eg21

HTML-https://prnt.sc/p2eguq

Component:

    import { Component, OnInit } from '@angular/core';
    import {MatPaginator, MatTableDataSource,MatSort} from '@angular/material';
    import { User } from 'src/app/services/user.model';
    import { UserService } from 'src/app/services/user.service';



    @Component({
      selector: 'app-companyinteraction',
      templateUrl: './companyinteraction.component.html',
      styleUrls: ['./companyinteraction.component.css']
    })
    export class CompanyinteractionComponent implements OnInit {
      // displayedColumns: string[] = ['CompanyName'];
      // dataSource:MatTableDataSource<User>;

      public companiesNames:User[];
      constructor(private prodService:UserService) { }


      ngOnInit() {
        const ob = this.prodService.getUsers();
        ob.subscribe(users => {
          this.companiesNames = users;
          console.log(this.companiesNames);
          console.log('Test from CompanyInteraction'); 
        });
    //...
}

Template:

    <h4>Basic mat-select</h4>
      <mat-form-field>
        <mat-label>Favorite food</mat-label>
        <mat-select>
          <mat-option *ngFor="let User of companiesNames" [value]="companyName">
            {{companyName}}
          </mat-option>
        </mat-select>
      </mat-form-field>

Solution

  • <h4 class="valuePicker">Select Company</h4>
    <mat-form-field class="valuePicker">
      <mat-label>Select Company</mat-label>
      <mat-select>
        <mat-option *ngFor="let p of companies" [value]="p.CompanyName">
            {{p.CompanyName}}
        </mat-option>
      </mat-select>
    </mat-form-field>
    

    Thanks.... figured it out