How do I extract individual fields from the payload and bind them with HTML on a page? I am trying to retrieve the alphacode and countryname in Angular 8.
This is my Component:
this.table$ = this.productService.get(id)
.map(actions => {
const id = actions.payload.key;
const data = actions.payload.val();
return{id, data};
})
.subscribe(res =>{
this.table$ = JSON.stringify(res)
console.log("Value from Firebase "+this.table$)
return this.table$;
})
I am able to see the output in the console, but I want to display the data separately on the HTML page
{"id":"-MBMklQEALG_eIP2qF1T","data":{"alphacode":"200","countryname":"America","currencyname":"Dollar","numericcode":9111}}
I would like to bind the data to fields [(ngModel)]
<form #f="ngForm" (ngSubmit)="save(f.value)">
<div class="form-group">
<label for="countryname">Country Name</label>
<input #countryname="ngModel" [(ngModel)]="table$.countryname" name="countryname" id="countryname" type="text" class="form-control" required >
<div class="alert alert-danger" *ngIf="countryname.touched && countryname.invalid">
Country Name is required..!
</div>
</div>
<div class="form-group">
<label for="currencyname">Currency Name</label>
<input #currencyname="ngModel" [(ngModel)]="table$.currencyname" name="currencyname" id="currencyname" type="text" class="form-control" required >
<div class="alert alert-danger" *ngIf="currencyname.touched && currencyname.invalid">
Currency Name is Required
</div>
</div>
<div class="form-group">
<label for="alphacode">Alpha Code</label>
<input #alphacode="ngModel" ngModel name="alphacode" id="alphacode" type="text" class="form-control" required >
<div class="alert alert-danger" *ngIf="alphacode.touched && alphacode.invalid">
Alpha Code is required..!
</div>
</div>
<div class="form-group">
<label for="numericcode">Numeric Code</label>
<div class="input-group">
<span class="input-group-text">$</span>
<input #numericcode="ngModel" ngModel name="numericcode" id="numericcode" type="number" class="form-control" required>
</div>
<div class="alert alert-danger" *ngIf="numericcode.touched && numericcode.invalid">Price Required</div>
</div>
<div class="form-group">
<mat-radio-group aria-label="Select an option">
<mat-radio-button value="1">Active</mat-radio-button>
<mat-radio-button value="2">In-Active</mat-radio-button>
</mat-radio-group>
</div>
<button class="btn btn-primary">Save</button>
</form>