title: How to load data into a modal from another component in Angular 4?
body: <p>I'm using Angular 4. I have 2 components, they are customer-list and customer-detail.</p>
  
  <p>customer-list displays a list of customers. In this component, </p>
  
  <ul>
  <li>When clicking "Create customer", customer-detail popup will show and user can create new customer.</li>
  <li>When clicking the link of customer id, customer-detail popup will show and load customer info into this popup, and user can update this customer.</li>
  </ul>
  
  <p>In customer-detail component, how to know when "create customer" is clicked, when customer id is clicked so that I can create or update customer correctly?</p>
  
  <p>In customer-detail component, how to get customer id from customer-list component when user clicks customer id?</p>
  
  <p>Thank you very much.</p>
  
  <p>Here are my codes. Please take a look.</p>
  
  <p><a href="https://i.stack.imgur.com/YP1VT.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/YP1VT.png" alt="enter image description here"></a></p>
  
  <p>click create customer
  <a href="https://i.stack.imgur.com/XPNzw.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/XPNzw.png" alt="enter image description here"></a></p>
  
  <p>click customer id
  <a href="https://i.stack.imgur.com/QpMZ2.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/QpMZ2.png" alt="enter image description here"></a></p>
  
  <p>app.component.html</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;header&gt;   
  &lt;/header&gt;
  &lt;main&gt;
      &lt;div class="main-content"&gt;
          &lt;h3 class="page-heading"&gt;Customers&lt;/h3&gt;
          &lt;customer-list&gt;&lt;/customer-list&gt;
      &lt;/div&gt;
      &lt;customer-detail&gt;&lt;/customer-detail&gt;
  &lt;/main&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>customer-list.component.html</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="row"&gt;
      &lt;div class="col-md-6"&gt;
          &lt;button class="btn btn-primary" data-toggle="modal" data-target="#customer-detail"&gt;&lt;i class="fa fa-plus"&gt;&lt;/i&gt; Create customer&lt;/button&gt;
      &lt;/div&gt;
      &lt;div class="col-md-6"&gt;
          &lt;form class="form-inline pull-right"&gt;
              &lt;div class="form-group"&gt;
                  &lt;div class="input-group"&gt;
                      &lt;input type="text" class="form-control" name="searchTerm" [(ngModel)]="searchTerm" placeholder="Search customer"&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;button type="submit" class="btn btn-primary" (click)="onSearchClicked()"&gt;&lt;i class="fa fa-search"&gt;&lt;/i&gt; Search&lt;/button&gt;
          &lt;/form&gt;
  
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;table class="table"&gt;
      &lt;thead&gt;
          &lt;tr&gt;
              &lt;th&gt;Id&lt;/th&gt;
              &lt;th&gt;Reference&lt;/th&gt;
              &lt;th&gt;Last Name&lt;/th&gt;
              &lt;th&gt;Middle Name&lt;/th&gt;
              &lt;th&gt;First Name&lt;/th&gt;            
          &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
          &lt;tr *ngFor="let customer of customers"&gt;
              &lt;td&gt;&lt;a href="#" data-toggle="modal" data-target="#customer-detail" &gt;{{ customer.id }}&lt;/a&gt;&lt;/td&gt;
              &lt;td&gt;{{ customer.reference }}&lt;/td&gt;
              &lt;td&gt;{{ customer.lastName }}&lt;/td&gt;
              &lt;td&gt;{{ customer.middleName }}&lt;/td&gt;
              &lt;td&gt;{{ customer.firstName }}&lt;/td&gt;
          &lt;/tr&gt;
      &lt;/tbody&gt;
  &lt;/table&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>customer-list.component.ts</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import { Component } from '@angular/core';
  import { Http } from '@angular/http';
  import { Customer } from './customer';
  import { CustomerService } from './customer.service';
  
  @Component({
      selector: 'customer-list',
      templateUrl: './customer-list.component.html',
      providers: [CustomerService]
  })
  export class CustomerListComponent {
      public customers: Customer[] = [];
      public searchTerm: string;
  
      constructor(private customerService: CustomerService) {       
      }
  
      onSearchClicked(): void {
          this.customerService.searchSimilarCustomers(this.searchTerm)
              .subscribe(customers =&gt; {
                  this.customers = customers;
              });
      }
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>customer-detail.component.html</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="modal fade" role="dialog" tabindex="-1" id="customer-detail"&gt;
      &lt;div class="modal-dialog modal-lg"&gt;
          &lt;div class="modal-content"&gt;
              &lt;div class="modal-header"&gt;
                  &lt;button type="button" class="close" data-dismiss="modal" aria-label="Close"&gt;
                      &lt;span aria-hidden="true"&gt;×&lt;/span&gt;
                  &lt;/button&gt;
                  &lt;h4 class="modal-title"&gt;Create PL customer&lt;/h4&gt;
              &lt;/div&gt;
              &lt;div class="modal-body"&gt;
                  &lt;div class="row"&gt;
                      &lt;div class="col-md-3"&gt;
                          &lt;div class="form-group"&gt;
                              &lt;label for="lastName"&gt;Last name&lt;/label&gt;
                              &lt;input type="text" class="form-control" name="lastName" [(ngModel)]="lastName" placeholder="Last name"&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div class="col-md-3"&gt;
                          &lt;div class="form-group"&gt;
                              &lt;label for="middleName"&gt;Middle name&lt;/label&gt;
                              &lt;input type="text" class="form-control" name="middleName" [(ngModel)]="middleName" placeholder="Midddle name"&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div class="col-md-3"&gt;
                          &lt;div class="form-group"&gt;
                              &lt;label for="firstName"&gt;First name&lt;/label&gt;
                              &lt;input type="text" class="form-control" name="firstName" [(ngModel)]="firstName" placeholder="Last name"&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;                    
                  &lt;/div&gt;                
              &lt;/div&gt;
              &lt;div class="modal-footer"&gt;
                  &lt;button type="button" class="btn btn-default" data-dismiss="modal"&gt;Close&lt;/button&gt;
                  &lt;button type="button" class="btn btn-primary" (click)="saveCustomer()" data-dismiss="modal"&gt;Create&lt;/button&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>customer-detail.component.ts</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import { Component, Input, OnInit } from '@angular/core';
  import { UUID } from 'angular2-uuid';
  
  import { CustomerResource } from './customer';
  import { ResourceData } from './customer';
  import { CustomerService } from './customer.service';
  
  @Component({
      selector: 'customer-detail',
      templateUrl: './customer-detail.component.html',
      providers: [CustomerService]
  })
  export class CustomerDetailComponent implements OnInit {
      modalTitle: string;    
      customerId: string;
      reference: string;
      lastName: string;
      middleName: string;
      firstName: string;
      
      constructor(private customerService: CustomerService) {        
      }
  
      ngOnInit() {        
      }
  
      registerCustomer() {
          let customerId = UUID.UUID();
          this.saveCustomer(customerId);
      }
  
      editCustomer() {
          this.saveCustomer(this.customerId);
      }
  
      saveCustomer(customerId: string) {
          let customerResource = this.mapToCustomerResource(customerId);
          this.customerService.registerCustomer(customerResource);
      }
  
      private mapToCustomerResource(id: string): CustomerResource {
          return {            
     //map customer
          };
      }   
  }</code></pre>
  </div>
  </div>
  </p>