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 ?

Answer 1

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.