angularlistrowfavorites

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


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

Solution

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