CODEWITHSUNDEEP
angularmodal-dialog
Ali Ghassan
Ali Ghassan

Reputation: 1180

Angular Dialog return value from list

l have local data json api . l want to return value from dialog component when user click on any item list . Error i have is Error: No value accessor for form control with unspecified name attribute also when l close dialog l return data: undefined.

Code

export class WeatherStationsNameComponent implements OnInit {
  items: any
  cities:any

constructor(
    public dialogRef: MatDialogRef<WeatherStationsNameComponent>,
    @Optional() @Inject(MAT_DIALOG_DATA) public data: any) 

  ngOnInit() {
  }

  closeDialog(){ 
    this.dialogRef.close({event:'close',data:this.cities}); 
  }
}

html

<ul class="list-group" *ngFor="let station of items.data; let i=index " style="
direction: ltr;color: black;text-align: right">

    <li class="list-group-item" (click)="closeDialog()"
     [(ngModel)]="cities" [value]="station.city.coords">
     {{ station.city.cityname.id}}
</li>

</ul>

Upvotes: 0

Views: 264

Answers (1)

Ravin Singh D
Ravin Singh D

Reputation: 893

You can do this

export class WeatherStationsNameComponent implements OnInit {
  items: any
  cities:any

constructor(
    public dialogRef: MatDialogRef<WeatherStationsNameComponent>,
    @Optional() @Inject(MAT_DIALOG_DATA) public data: any) 

  ngOnInit() {
  }

  closeDialog(dataItem){ 
    this.dialogRef.close({event:'close',data:dataItem}); 
  }
}

html

<ul class="list-group" *ngFor="let station of items.data; let i=index " style="
direction: ltr;color: black;text-align: right">

    <li class="list-group-item" (click)="closeDialog(station.city.coords)">
     {{ station.city.cityname.id}}
</li>

</ul>

Upvotes: 1

Related Questions