Regarding Angular 2 - Extract a Variable from An Array (related to front side: html and component.ts)

Question

Below this is my code. I have an array called 'mydmcanotice' and it has four attributes as shown in the {{}} brackets. For each dmca in mydmcanotice, I have a button. When I click on a button, I want dmca.nameofsong to appear in my textarea, but I'm not sure how to do this.

For example, the first element in the mydmcanotice array, it's nameofsong attribute is called "Victor". Therefore, when I click the button (Send DMCA notice) I want the name victor to appear in the textarea. Also, the showbody boolean becomes true when I click a button (sendNotice() makes it true upon clicking it).

I'm new to Angular 2 so if this is trivial please forgive me. I can add the code for component.ts file if necessary. Thanks!

dmca.component.html

<ul>
    <li *ngFor = "let dmca of mydmcanotice"> 
        {{dmca.nameofsong}} - {{dmca.nameofsonguploader}} - {{dmca.nameofpersonsending}} - {{dmca.content}}
        <br><button (click)="sendNotice()" >Send DMCA Notice!</button> 
    </li>
</ul><br>

<div *ngIf = "showbody == true">
    <textarea rows = "15" cols = "150" [(ngModel)] = "content">
    </textarea>
</div>

Answer 1

You need to make sure you pass a variable into sendNotice() that points to the appropriate song in your array, otherwise send notice won't know what data you want to fill the text area with.

Add the index of your array to sendNotice() using indexOf() on the array:

<button (click)="sendNotice(mydmcanotice.indexOf(dmca))" >Send DMCA Notice!</button>

Once the index is passed to sendNotice() , you can use the index to access your array:

sendNotice(index) {
    this.somebody = true;
    this.content = this.mydmcanotice[index].nameofsong;
}

Here is an example of a working version of the component:

import { Component } from '@angular/core';

@Component({
    selector: 'dmca-app',
    template: `
    <ul>
        <li *ngFor = "let dmca of mydmcanotice"> 
            {{dmca.nameofsong}} - {{dmca.nameofsonguploader}} - {{dmca.nameofpersonsending}} - {{dmca.content}}
            <br><button (click)="sendNotice(mydmcanotice.indexOf(dmca))" >Send DMCA Notice!</button> 
        </li>
    </ul><br>

    <div *ngIf="somebody">
        <textarea rows = "15" cols = "150" [(ngModel)]="content">
        </textarea>
    </div>`
})
export class DMCAComponent {

    // Mock Data
    mydmcanotice = [
        {
            nameofsong: "Heathens",
            nameofsonguploader: "Twenty One Pilots",
            nameofpersonsending: "Tyler",
            content: "I am content",
        },
        {
            nameofsong: "Style",
            nameofsonguploader: "Taylor Swift",
            nameofpersonsending: "Taylor",
            content: "I am also Content",
        }

    ];

    // Variables
    content = { };
    somebody = false;

    // Constructor
    constructor() { }

    // Functions
    sendNotice(index) {
        this.somebody = true;
        this.content = this.mydmcanotice[index].nameofsong;
    }

}

Additionally, here are some links on ngModel and indexOf:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/indexOf https://angular.io/docs/ts/latest/api/forms/index/NgModel-directive.html