How to change button onclick?-CodePudding

When a user clicks on the Add button under the photo, that particular photo should be added to the table next to the list and the add button should change into a REMOVE button.

eg.

Current state

Expected outcome

Template

<div class="row">
    <div class="container col-6">
        <h1>List</h1>
        <div class="row">

            <div class="col-3" *ngFor="let a of data">
                <div class="row"><img src="{{a.url}}" style="height: 100px; padding: 10px;"> </div>
                <div class="row" style=" padding: 10px;"><button class="btn btn-primary" (click)="onclick(a)">Add</button></div>
            </div>
        </div>
    </div>
    <div class="container col-6">
        <h1>Table</h1>
        <table class="table">
            <thead>
                <tr>
                    <th scope="col">Photo</th>
                    <th scope="col">Id</th>
                    <th scope="col">URL</th>
                    <th scope="col">Title</th>
                </tr>
            </thead>
            <tbody *ngFor="let s of array">
                <tr (click)="DeleteItem(s.id)">
                    <th scope="col"><img src="{{s.url}}" style="height: 30px; padding: 10px;"></th>
                    <th scope="col">{{s.id}}</th>
                    <th scope="col">{{s.url}}</th>
                    <th scope="col">{{s.title}}</th>
                </tr>

            </tbody>
        </table>
    </div>
</div>

Component logic

data: any = [{
        "albumId": 1,
        "id": 1,
        "title": "accusamus beatae ad facilis cum similique qui sunt",
        "url": "https://via.placeholder.com/600/92c952",
        "thumbnailUrl": "https://via.placeholder.com/150/92c952"
    },
    {
        "albumId": 1,
        "id": 2,
        "title": "reprehenderit est deserunt velit ipsam",
        "url": "https://via.placeholder.com/600/771796",
        "thumbnailUrl": "https://via.placeholder.com/150/771796"
    },
    {
        "albumId": 1,
        "id": 3,
        "title": "officia porro iure quia iusto qui ipsa ut modi",
        "url": "https://via.placeholder.com/600/24f355",
        "thumbnailUrl": "https://via.placeholder.com/150/24f355"
    },
    {
        "albumId": 1,
        "id": 4,
        "title": "culpa odio esse rerum omnis laboriosam voluptate repudiandae",
        "url": "https://via.placeholder.com/600/d32776",
        "thumbnailUrl": "https://via.placeholder.com/150/d32776"
    },
    {
        "albumId": 1,
        "id": 5,
        "title": "natus nisi omnis corporis facere molestiae rerum in",
        "url": "https://via.placeholder.com/600/f66b97",
        "thumbnailUrl": "https://via.placeholder.com/150/f66b97"
    },
    {
        "albumId": 1,
        "id": 6,
        "title": "accusamus ea aliquid et amet sequi nemo",
        "url": "https://via.placeholder.com/600/56a8c2",
        "thumbnailUrl": "https://via.placeholder.com/150/56a8c2"
    },
    {
        "albumId": 1,
        "id": 7,
        "title": "officia delectus consequatur vero aut veniam explicabo molestias",
        "url": "https://via.placeholder.com/600/b0f7cc",
        "thumbnailUrl": "https://via.placeholder.com/150/b0f7cc"
    },
    {
        "albumId": 1,
        "id": 8,
        "title": "aut porro officiis laborum odit ea laudantium corporis",
        "url": "https://via.placeholder.com/600/54176f",
        "thumbnailUrl": "https://via.placeholder.com/150/54176f"
    },
    {
        "albumId": 1,
        "id": 9,
        "title": "qui eius qui autem sed",
        "url": "https://via.placeholder.com/600/51aa97",
        "thumbnailUrl": "https://via.placeholder.com/150/51aa97"
    },
    {
        "albumId": 1,
        "id": 10,
        "title": "beatae et provident et ut vel",
        "url": "https://via.placeholder.com/600/810b14",
        "thumbnailUrl": "https://via.placeholder.com/150/810b14"
    },
    {
        "albumId": 1,
        "id": 11,
        "title": "nihil at amet non hic quia qui",
        "url": "https://via.placeholder.com/600/1ee8a4",
        "thumbnailUrl": "https://via.placeholder.com/150/1ee8a4"
    },
    {
        "albumId": 1,
        "id": 12,
        "title": "mollitia soluta ut rerum eos aliquam consequatur perspiciatis maiores",
        "url": "https://via.placeholder.com/600/66b7d2",
        "thumbnailUrl": "https://via.placeholder.com/150/66b7d2"
    },
    {
        "albumId": 1,
        "id": 13,
        "title": "repudiandae iusto deleniti rerum",
        "url": "https://via.placeholder.com/600/197d29",
        "thumbnailUrl": "https://via.placeholder.com/150/197d29"
    },
    {
        "albumId": 1,
        "id": 14,
        "title": "est necessitatibus architecto ut laborum",
        "url": "https://via.placeholder.com/600/61a65",
        "thumbnailUrl": "https://via.placeholder.com/150/61a65"
    },
    {
        "albumId": 1,
        "id": 15,
        "title": "harum dicta similique quis dolore earum ex qui",
        "url": "https://via.placeholder.com/600/f9cee5",
        "thumbnailUrl": "https://via.placeholder.com/150/f9cee5"
    },
];
array: any = []
comaprebnt: boolean = false;
removebnt: boolean = true

constructor() {}

ngOnInit() {

}
onclick(a) {
    console.log(a)
    this.array.push(a)
}

When the user clicks on REMOVE button over the photo on the photo listing page, that photo should be removed from the table.

CodePudding user response：

public objArray = [
  {
   value:"item1",
   isAdded: false
  },
  {
   value:"item2",
   isAdded: false
  }
]

public addRemoveElement(index: number){
   objArray.forEach(elem:any, ind:number)=>{
     if(ind === index) elem.isAdded = !elem.isAdded;
   })
}    

-----------------------------------------
.redbg{ 
  background: red;
}

<div *ngFor="let obj in objArray; let ind=index">
   <div [class.redbg]="obj.isAdded" (click)="addRemoveElemen(ind)">{{ item.isAdded ? 'Remove' : 'Add' }}</div>
</div>

CodePudding user response：

You have to set an array like this I added one key type you whatever type and set any key-value as I set

data: any = [{
  "albumId": 1,
  "id": 1,
  "title": "accusamus beatae ad facilis cum similique qui sunt",
  "url": "https://via.placeholder.com/600/92c952",
  "thumbnailUrl": "https://via.placeholder.com/150/92c952",
  "type": "add"
},
{
  "albumId": 1,
  "id": 2,
  "title": "reprehenderit est deserunt velit ipsam",
  "url": "https://via.placeholder.com/600/771796",
  "thumbnailUrl": "https://via.placeholder.com/150/771796",
  "type": "delete"
},
{
  "albumId": 1,
  "id": 3,
  "title": "officia porro iure quia iusto qui ipsa ut modi",
  "url": "https://via.placeholder.com/600/24f355",
  "thumbnailUrl": "https://via.placeholder.com/150/24f355",
  "type": "add"
},
{
  "albumId": 1,
  "id": 4,
  "title": "culpa odio esse rerum omnis laboriosam voluptate repudiandae",
  "url": "https://via.placeholder.com/600/d32776",
  "thumbnailUrl": "https://via.placeholder.com/150/d32776",
  "type": "delete"
},
{
  "albumId": 1,
  "id": 5,
  "title": "natus nisi omnis corporis facere molestiae rerum in",
  "url": "https://via.placeholder.com/600/f66b97",
  "thumbnailUrl": "https://via.placeholder.com/150/f66b97",
  "type": "add"
},
{
  "albumId": 1,
  "id": 6,
  "title": "accusamus ea aliquid et amet sequi nemo",
  "url": "https://via.placeholder.com/600/56a8c2",
  "thumbnailUrl": "https://via.placeholder.com/150/56a8c2",
  "type": "add"
},
{
  "albumId": 1,
  "id": 7,
  "title": "officia delectus consequatur vero aut veniam explicabo molestias",
  "url": "https://via.placeholder.com/600/b0f7cc",
  "thumbnailUrl": "https://via.placeholder.com/150/b0f7cc",
  "type": "add"
},
{
  "albumId": 1,
  "id": 8,
  "title": "aut porro officiis laborum odit ea laudantium corporis",
  "url": "https://via.placeholder.com/600/54176f",
  "thumbnailUrl": "https://via.placeholder.com/150/54176f",
  "type": "add"
},
{
  "albumId": 1,
  "id": 9,
  "title": "qui eius qui autem sed",
  "url": "https://via.placeholder.com/600/51aa97",
  "thumbnailUrl": "https://via.placeholder.com/150/51aa97",
  "type": "add"
},
{
  "albumId": 1,
  "id": 10,
  "title": "beatae et provident et ut vel",
  "url": "https://via.placeholder.com/600/810b14",
  "thumbnailUrl": "https://via.placeholder.com/150/810b14",
  "type": "add"
},
{
  "albumId": 1,
  "id": 11,
  "title": "nihil at amet non hic quia qui",
  "url": "https://via.placeholder.com/600/1ee8a4",
  "thumbnailUrl": "https://via.placeholder.com/150/1ee8a4",
  "type": "add"
},
{
  "albumId": 1,
  "id": 12,
  "title": "mollitia soluta ut rerum eos aliquam consequatur perspiciatis maiores",
  "url": "https://via.placeholder.com/600/66b7d2",
  "thumbnailUrl": "https://via.placeholder.com/150/66b7d2",
  "type": "add"
},
{
  "albumId": 1,
  "id": 13,
  "title": "repudiandae iusto deleniti rerum",
  "url": "https://via.placeholder.com/600/197d29",
  "thumbnailUrl": "https://via.placeholder.com/150/197d29",
  "type": "add"
},
{
  "albumId": 1,
  "id": 14,
  "title": "est necessitatibus architecto ut laborum",
  "url": "https://via.placeholder.com/600/61a65",
  "thumbnailUrl": "https://via.placeholder.com/150/61a65",
  "type": "add"
},
{
  "albumId": 1,
  "id": 15,
  "title": "harum dicta similique quis dolore earum ex qui",
  "url": "https://via.placeholder.com/600/f9cee5",
  "thumbnailUrl": "https://via.placeholder.com/150/f9cee5",
  "type": "add"
},
];

then on the HTML side set condition and add one line for the delete button

<div  style=" padding: 10px;"><button  *ngIf="a.type == 'add'" (click)="onclick(a)">Add</button></div>
<div  style=" padding: 10px;"><button  *ngIf="a.type == 'delete'" (click)="onclick(a)">Remove</button></div>