CODEWITHSUNDEEP
angulardatabasetypescriptservicedrop-down-menu
Rizana Fazily
Rizana Fazily

Reputation: 51

How do I get data from database to a drop down list in Angular?

I have a post rest service which gets all the data from the database.I want to display a particular column of values from the database, example name column in a drop down list. How do I do this? I want to make the changes to the angular part only......

export class Service {

  constructor(protected httpClient: HttpClient) {

  }

  public getTemplateData(start:number,limit:number):Observable<any>{
    return this.httpClient.post('/p-services/atomic-services/TemplateData',{
      startIndex:start,
      pageLimit:limit
    });
  }
      

export class ConfigManagerComponent {

  productData:any;
  totalRecords: number = 0;
  pageSize: number = 5;
  startIndex: number = 0;
  pageIndex: number;
  
  constructor(private Service: Service, private _formBuilder: FormBuilder,  private dialog: MatDialog) { }

  ngOnInit() {

  CodeNextBtn() {
          this.Service.getTemplateData(0,this.pageSize).subscribe(
            (templateResponse) =>{
              this.productData=         //binding database values to productData
  templateResponse.productData;
              this.totalRecords=templateResponse.totalRecords;
              this.referenceShowProgressBar
              this.DROPDOWN_LIST = templateResponse.productData;

            },
             (error) => {
              console.error(error);
              this.referenceShowProgressBar = false;
            }
            
          );

        } 
getState(){
console.log("selected");
}
}

export class templateData{
  name?: string;
  type?:string;
access_type?:string;
 
}


<mat-form-field appearance="fill">
  <mat-label>Favorite food</mat-label>
  <mat-select  (change)="getState()">
    <mat-option *ngFor="let DROPDOWN_LIST of DROPDOWN_LIST">
      {{DROPDOWN_LIST.name}}
    </mat-option>
  </mat-select>
</mat-form-field>

Upvotes: 2

Views: 8275

Answers (1)

Karimov
Karimov

Reputation: 359

your.component.ts

DROPDOWN_LIST: templateData[]; 


CodeNextBtn() {
          this.Service.getTemplateData(0,this.pageSize).subscribe(
            (templateResponse) =>{
              this.productData=         //binding database values to productData
  templateResponse.productData;
              this.totalRecords=templateResponse.totalRecords;
              this.referenceShowProgressBar

              // if templateResponse.productData return type is templateData 
              this.DROPDOWN_LIST = templateResponse.productData;

            },
             (error) => {
              console.error(error);
              this.referenceShowProgressBar = false;
            }
            
          );

}

your.component.html Angular Material

<mat-form-field appearance="fill">
  <mat-label>Favorite food</mat-label>
  <mat-select>
    <mat-option *ngFor="let DROPDOWN_LIST of DROPDOWN_LIST">
      {{DROPDOWN_LIST.name}}
    </mat-option>
  </mat-select>
</mat-form-field>

Upvotes: 1

Related Questions