How do I bind a card to a button in Angular when there are multiple cards fetching data from databas-CodePudding

I am making a blogpost app using Angular and REST service. I need to have an edit and delete functionality in the application and this is what I have done for it

Component Code :

export class EditblogsComponent implements OnInit {
    allBlogs: any;
    constructor(private http: HttpClient) {}

    ngOnInit(): void {
        this.http.get('http://localhost:3000/blogPosts').subscribe(
            (data) => {
                this.allBlogs = data as string[];
            },
            (err: HttpErrorResponse) => {
                console.log(err.message);
            }
        );
    }

    editBlog() {}
    deleteBlog() {}
}

HTML code

<div >
    <div >
        <div >

            <div  *ngFor="let blog of allBlogs">
                <div >
                    <div >
                        <h1>
                            {{blog.blogTitle}}
                        </h1>
                    </div>
                    <div >
                        {{blog.blogContent}}
                    </div>
                </div>

                <footer >
                    <blockquote >
                        Written by : {{blog.blogUser}}
                    </blockquote>
                </footer>

                <div >
                    <div >
                        <button  (click)="editBlog()">Edit
                            blog</button>
                    </div>
                    <div >
                        <button  (click)="deleteBlog()">Delete
                            blog</button>
                    </div>
                </div>
            </div>
            <br>
        </div>
        <br>
    </div>
    <br>
</div>

JSON Server for the blog section:

"blogPosts": [
    {
        "blogUser": "usera",
        "blogTitle": "Title for first blogppost",
        "blogContent": "Content of first blogpost",
        "id": 1
    },
    {
        "blogUser": "usera",
        "blogTitle": "Title for second blogppost",
        "blogContent": "Content of second blogpost",
        "id": 2
    }
],

I want to know how I can bind the edit and delete buttons so that they work on the specific blog that renders in the cards.

CodePudding user response：

Provide the blog or it's id as an argument to the functions.

html

<div >
                    <div >
                        <button  (click)="editBlog(blog)">Edit
                            blog</button>
                    </div>
                    <div >
                        <button  (click)="deleteBlog(blog.id)">Delete
                            blog</button>
                    </div>
                </div>

component

editBlog(blog: Blog) {}
    deleteBlog(blogId: number) {}

CodePudding user response：

Send the specific 'blog' object as an argument to the edit and delete methods like so:

HTML:

 <div >
                    <div >
                        <button  (click)="editBlog(blog)">Edit
                            blog</button>
                    </div>
                    <div >
                        <button  (click)="deleteBlog(blog)">Delete
                            blog</button>
                    </div>
</div>

TS:

editBlog(blog:any) 
{
}
deleteBlog(blog:any) 
{
}