Angular 4 Passing data/parameters to a modal (using ngfor)

Question

i'm new to angular 4 and i'm displaying data inside an array using ngFor.Each addon has a number of users and list of these users(id,role,etc) that i managed to get from the backend(spring boot project).what i'm trying to do is display the number of these users,when the user clicks on the button displaying the number,a modal pops up and display the details of these users. So the problem i'm getting is how to pass the {{addon.something}} to the modal.

       <tbody>
            <tr *ngFor="let addon of addons">
                <td>{{addon.name}}</td>
                <td>{{addon.url}}</td>
                <td>{{addon.location}}</td>
               <td>
                 <button class="btn btn-outline-primary" (click)="open(content,addon)" >{{addon.users.length}}</button>
                 <!--{{addon.users.length}}-->
                </td>

                <td>
                    <a routerLink="/assign_user_to_addon/{{addon.id}}">Add user</a>
                </td>
            </tr>
        </tbody>

I tried to pass it into the (click)="open(content,addon)" ,but it's not working.

Typescript code for handling the modal :

 open(content:any,addon:any) {
    this.modalService.open(content).result.then((result) => {

      this.closeResult = `Closed with: ${result}`;
    }, (reason) => {
      this.closeResult = `Dismissed ${this.getDismissReason(reason)}`;
    });
  }

  private getDismissReason(reason: any): string {
    if (reason === ModalDismissReasons.ESC) {
      return 'by pressing ESC';
    } else if (reason === ModalDismissReasons.BACKDROP_CLICK) {
      return 'by clicking on a backdrop';
    } else {
      return  `with: ${reason}`;
    }
  }

What could be the best way to pass data/parameters to a modal ?

Transfiguration

what is the intent for "content" in your case? did you try to remove it and only have "addon" (open(addon)) - this normally should pass the item from your array. – Airway

Did my answer work for you or are you still looking for a solution? – Slit

@SergeyRudenko i'm not sure because i copied the code from this link ng-bootstrap.github.io/#/components/modal/examples but it does look like its specific to the modal itself... – Transfiguration

@vincecampanale it's still not working,removing the content from the (click)="open(xxx)" function or this.modalService.open() gives an error... – Transfiguration

What is the new code you are trying and what is the new error? – Slit

@vincecampanale i actually managed to display the data when replacing the content variable by data(so what you wrote is actually correct),but now i'm still struggling with displaying an object inside the body of the modal.when passing a simple value like (click)="open(addon.name)" , it only shows that value without the body of the modal,but when i try to go through an array it show this error "No component factory found for [object Object]" No component factory found for [object Object] – Transfiguration

I would need to see the code to troubleshoot the new error, and it is outside the scope of this question. I'd be happy to take a look at a new question if you are still having an issue and want to open one up. I'm glad I could help with your issue -- please accept / upvote the answer if you found it helpful or if it answered your question (so other people know your issue has been resolved). Welcome to SO :) – Slit

@vincecampanale I managed to make it work with an unoptimized way. the mistake is using the (click)="open(xx)" to pass data into the body of the modal and access it this way {{user.userId}} (with ngfor or whatever).so now i created a global variable called "usersInfo" ,and i'm using it to pass the data to the modal body.i'm well aware that this is an unoptimized way to make it work,and i will appreciate it if you can propose something better. here's the code : paste.ofcode.org/sYhU6JHHkmbK3aum86tYWF – Transfiguration

@Transfiguration The comments section is not the right place to ask another question since it doesn't give me enough context to read your issue and craft a response (I only get 500 characters!). Please open a new question with your new issue and I'd be happy to take a look. – Slit

Answer 1

You're not passing the addon parameter to the modalService.open method. If you want to pass the data from addon to the modal, it looks like you just need to pass that (instead of the content parameter). From this example: https://ng-bootstrap.github.io/#/components/modal/examples, I would assume that if you remove the content parameter and just pass in addon like so:

html

(click)="open(addon)"

ts

open(content) {
  this.modalService.open(content)...
}

---

To test this, leave everything in your current implementation and just change the argument to this.modalService.open like this:

this.modalService.open(addon)...

Slit

how to pass multiple params – Balthasar

Answer 2

I Know it's very old question,but I struggled a lot to achieve this. So writing here that might help someone. Note that this answer is for Angular 6.

So If you want to pass any data (that can be any object like Person) to child this can be done like this.

In child component you need to declare that variable with @Input() annotation like :

  //Required imports
  export class ChildComponent implements OnInit {

  @Input() dataToTakeAsInput: any;

  ngOnInit() {
  }
  constructor() { }
}

Now to pass this dataToTakeAsInput from parent component, you can use componentInstance as show in below code :

//Required imports
export class ParentComponent implements OnInit {

  dataPassToChild: any = null;

  constructor(private modalService: NgbModal) { }

  ngOnInit() {

  }
openChilldComponentModel(){

    const modalRef = this.modalService.open(ChildComponent, { size: 'lg',backdrop:false});

    (<ChildComponent>modalRef.componentInstance).dataToTakeAsInput = dataPassToChild;

    modalRef.result.then((result) => {
      console.log(result);
    }).catch( (result) => {
      console.log(result);
    });
  }
}

Like this you can pass multiple objects.

Kinnard