I have an Angular4 project and a table with projects. Projects will have different columns like ID, Name, Costs, ...
now I want to add a Row with checkboxes in Star Form for adding projects in a favourite List. How can I do it in Angular4 (not Angular Material or AngularJS) like this?
Both tables should be shown in the same component "projects" The [x] will be a star and its filled yellow if star-icon will be clicked. Then the project will be putted in the favourite list.
Project Table:
|Favourite|ID|Name|Costs|...|
| [X] |1 |A |500 |...|
| [ ] |2 |B |600 |...|
| [X] |3 |C |750 |...|
| [ ] |4 |D |200 |...|
Favourite Table:
|ID|Name|Costs|...|
|1 |A |500 |...|
|3 |C |750 |...|
==UPDATE==
HTML-table row with checkboxes:
<tr *ngFor="let project of projects">
<td>
<input type="checkbox" [value]="project" (click)="favourite($event)"/>
</td>
</tr>
HTML-Favourite Table
<tbody>
<tr *ngFor="let f of favouriteProjects">
<td>
<span>
{{f.id}}
</span>
</td>
<td>
<span>
{{f.title}}
</span>
</td>
</tr>
</tbody>
TS:
...
private projects: Project[] = [];
private favouriteProjects: Project[] = [];
...
favourite(ev){
this.favouriteProjects.push(ev.target.defaultValue);
}
You need to make an API call, for each of the item that you are adding in the favorite array or once send the all array. I have create the code boilerplate, you can refer this and implement solution. Here is stackblitz link.
app.component.ts
app.component.html
table.component.html
table.component.ts