Hello, I am looking to transfer data from a parent component to a child component in Angular 6. Here is my code for the child.ts file:
this.rest.sendRequest('GET', 'station', null).subscribe(
value => {
this.data = value['Station'];
this.source.load(this.data);
console.log(this.data);
},
);
And here is my code for the parent.ts file:
addStation() {
this.rest.sendRequest( 'POST', 'station', this.station).subscribe();
}
For the child.html file:
<nb-card>
<nb-card-header>
List of Stations
</nb-card-header>
<nb-card-body>
<ng2-smart-table [getValueFromParent]="value" [settings]="settings" [source]="source" (deleteConfirm)="onDeleteConfirm($event)" (editConfirm)="onEditConfirm($event)">
</ng2-smart-table>
</nb-card-body>
</nb-card>
And for the parent.html file:
<nb-card>
<nb-card-header>
Station
</nb-card-header>
<nb-card-body>
<div class="row">
<div class="col-md-4">
<nb-card>
<nb-card-header>
<p>Add New Station</p>
</nb-card-header>
<br>
<nb-card-body>
<h3>Add Station</h3>
<form (ngSubmit)="addStation()" #form="ngForm" autocomplete="on" >
<div class="form-control">
<div>
<label for="title">
Title
</label>
<input class="form-control" id="title" name="title" nbInput [(ngModel)]="station.title" placeholder="Title">
</div>
<div>
<button nbButton type="submit" >Add Station</button>
</div>
</div>
</div>
</form>
</nb-card-body>
</nb-card>
</div>
<div class="col-md-8">
<ngx-smart-table></ngx-smart-table>
</div>
</div>
I would like the table to update automatically when the form is submitted. How can I achieve that?
Note: My "this.station" is an object and "this.data" is an array. Additionally, I am using ng2-smart-table.