I am currently developing an application using Angular 2. In my specific situation, I have three main components:
- SearchComponent: This component is responsible for calling a web service and injecting the results into SearchResultComponent.
- SearchResultComponent: Here, the data is displayed in a table format.
- EditComponent: This component allows for editing of the data.
Here is the code for SearchComponent:
<form>
... Input fields for the form.
</form>
<!-- The result property is within the SearchComponent class -->
<search-result [(value)]="result"></search-result>
Below is the code for SearchResultComponent:
<div>
<table>
... Table content here
... Edit component for each row
<tr>
<td>data</td>
<td>
<edit></edit>
</td>
</tr>
</table>
</div>
Next, we have the code for EditComponent:
<form>
... Edit inputs go here...
</form>
<button label="Save" (click)="edit()"></button>
<edit [(documentId)]="id"></edit>
The ultimate goal is to reload the results when the save button is clicked.
How can this goal be achieved?
Thank you!