How to pass a parameter to a modal in Angular

Question

I'm making a small blog writing project in Angular for practice. I will show all article card on screen with delete button. When the user press on delete button a modal should open asking for confirmation. Here's the code:

articles.component.html



    
        
            
                {{article.title}}
                 Delete
            
            
                {{article.date}}
            
        
    




    Are you sure?

Here is the screenshot:

And here is my logic: article.component.ts

import { Component, OnInit } from '@angular/core';
...    
@Component({
  ...
})
export class ArticleComponent implements OnInit {
  
  articles = []; // contains title, date, articleid

  constructor(..., private _articleService: ArticleService) { }

  display: boolean = false;

  showDialog() {
      this.display = true;
  }   
 
  ngOnInit() {
    // logic to populate this.articles[] array 
  }

  onPress(id) {        
    this._articleService.deleteArticle(id)
    .subscribe (
      data => {
        console.log("deleted");
      }
    );
  }
}

But on pressing Yes, sure button I'm getting this error:

ERROR TypeError: _co.article is undefined

I know the reason. Actually (click)="display=false; onPress(article.articleid)" in modal have no idea about article.articleid.

How to pass articleid there. Please help me. Is my entire logic wrong?

user_10047959 · Answer

you can set a variable to store the clicked post's id. so while clicking delete assign the Id to that variable and on confirmation use this is to delete the post

article.component.html



    
        
            
                {{article.title}}
                 Delete
            
            
                {{article.date}}
            
        
    




    Are you sure?

article.component.ts

import { Component, OnInit } from '@angular/core';
...    
@Component({
  ...
})
export class ArticleComponent implements OnInit {
  
  articles = []; // contains title, date, articleid

  constructor(..., private _articleService: ArticleService) { }

  display: boolean = false;
  deletePostId:number;
  showDialog(id) {
      this.display = true;
      this.deletePostId=id
  }   
 
  ngOnInit() {
    // logic to populate this.articles[] array 
  }

  onPress(isDelete) { 
    if(isDelete && deletePostId)  {
    this._articleService.deleteArticle(this.deletePostId)
    .subscribe (
      data => {
        console.log("deleted");
      }
    );
 }else{
  this.deletePostId = null;
 }     

  }
}

user_11947191 · Answer

The simplest solution is to simply store the article object that triggers the modal.

In this case, re-using the display variable:

Change the type to any
Assign the clicked the entity to display

 Delete

display: any = undefined;
showDialog(selected: any) {
    this.display = selected;
}

Then you can use the display variable properties in your click listener.



    Are you sure?

user_9606851 · Answer

define a varible named articleId in your component :

articleId:number;

then pass your articleId to showDialog method HTML:

    Delete

Typescript:

 showDialog({articleid}) {
      this.display = true;
      this.articleId=articleid; // new 
  }

now , in yur onPress method you have to use articleId like the following :

  onPress() {        
    this._articleService.deleteArticle(this.articleId)
    .subscribe (
      data => {
        console.log("deleted");
        this.articleId=undefined;
      }
    );
  }

user_1926806 · Answer

The article from your Modal represented by *ngFor= "let article of articles" was out of scope so Ive moved it in the correct div. Ive added a *ngIf="article on the button just to make sure but you dont necessarily need it.



    
        
            
                {{article.title}}
                 Delete
            
            
                {{article.date}}
            
        
        
        
        
            Are you sure?

How to pass a parameter to a modal in Angular

4 Answers