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
import { Component, VERSION } from '@angular/core';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent {
name = 'Angular ' + VERSION.major;
projects = [];
favProjects = [];
constructor(){
// get this data from API
// After getting the data from API make fav property false if it is not in the API response
// Ideally if you are mainting it on backend level it should be the in the object.
this.projects = [
{name: 'Abhinav', age: 15, fav:false, id:1}, // id for unique identifier
{name: 'Ravi', age: 23, fav:false, id:2},
{name: 'Kalam', age: 35, fav:false, id:3},
{name: 'Sunny', age: 25, fav:false, id:4},
];
// check if from API is any favriout project is there add it to the favriout table
this.initFavProject();
}
// load the fav project if user saved it earlier in the db
initFavProject(){
for(let i = 0 ; i < this.projects.length; i++){
if(this.projects[i].fav){
this.favProjects.push(Object.assign({},this.projects[i]));
}
}
}
addItemToFav(e){
this.projects = this.projects.filter((item)=> item.id !== e.id);
e.fav = true;
// make an API all and send the upadte for row 'e', so next time user
// reload the webpage, its fav property will be true and it will automatically go to the favriout table.
// Either save each time one object or all the favProjects array at once based on the click
this.favProjects.push(Object.assign({},e));
}
saveFavTODB(){
// access the this.favProjects and send it to the database to save a new one or update the exhisting one.
}
}
app.component.html
<h3>Project Table</h3>
<app-table [tableData]="projects" [allowFavrout]="true" (favEvent)="addItemToFav($event)"></app-table>
<h3>Favrout Project</h3>
<app-table [tableData]="favProjects"></app-table>
table.component.html
<table border="1" *ngIf="tableData && tableData.length > 0">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th *ngIf="allowFavrout">Action</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let item of tableData">
<td>{{item.name}}</td>
<td>{{item.age}}</td>
<td *ngIf="allowFavrout"><button (click)="addToFav(item)">Add To Favriout</button></td>
</tr>
</tbody>
</table>
table.component.ts
import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
@Component({
selector: 'app-table',
templateUrl: './table.component.html',
styleUrls: ['./table.component.css']
})
export class TableComponent implements OnInit {
@Input() tableData : Array<any> = [];
@Input() allowFavrout = false;
@Output() favEvent: EventEmitter<any> = new EventEmitter(false);
constructor() { }
ngOnInit() {
}
addToFav(item){
this.favEvent.emit(item)
}
}