Angular Favourite Row with checkboxes in star form for adding projects to a different table

Question

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);
    }

Answer 1

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)
  }
}