title: angular 2 - on div click, pass object to another component and another component uses that object to call rest service
body: <p>In parent (ParentComponent) loads all parent data onInit method. Now if I click on individual parent it triggers child view by passing parentId from ParentComponent to ParentDetailComponent and ParentDetailComponent calls ParentDetailService and gets IParent object. Now I tried with *ngIf to show ParentDetailComponent template but it doesnt trigger. how should I trigger child view?</p>
  
  <p>Child Template:</p>
  
  <pre><code>&lt;div *ngIf="DetailIsVisible" id="detailModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"&gt;
  &lt;div class="modal-dialog"&gt;
      &lt;div class="modal-content"&gt;
          &lt;div class="modal-header"&gt;
              &lt;button type="button" class="close" data-dismiss="modal" aria-hidden="true"&gt;&amp;times;  &lt;/button&gt;
              &lt;h4 class="modal-title" id="myModalLabel"&gt;Parent Detail&lt;/h4&gt;
          &lt;/div&gt;
          &lt;div class="modal-body"&gt;
              &lt;div *ngIf="parent"&gt;
                  &lt;h2&gt;{{parent.name}} details!&lt;/h2&gt;
                  &lt;div&gt;&lt;label&gt;id: &lt;/label&gt;{{parent.Id}}&lt;/div&gt;
                  &lt;div&gt;
                      &lt;label&gt;name: &lt;/label&gt;
                      &lt;label&gt;{{parent.name}}&lt;/label&gt;
                  &lt;/div&gt;
                  &lt;div&gt;
                      &lt;label&gt;Education: &lt;/label&gt;
                      &lt;label&gt;{{parent.education}}&lt;/label&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="modal-footer"&gt;
              &lt;button type="button" class="btn btn-default" (click)="hideDetail()"&gt;Close&lt;/button&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>Child Component:</p>
  
  <pre><code>@Component({
  selector: 'app-parent-detail',
  templateUrl: './child.component.html',
  providers: [ParentDetailService]
  })
  export class ParentDetailComponent{
  parentId: string;
  parent: IParent;
  public DetailIsVisible: boolean;
  
  constructor(private _parentDetailService: ParentDetailService) {
  }
  
  show(parentId: string) {
      this.serviceDetail = serviceId;
   this._parentDetailService.getParentServiceDetail(this.parentId).subscribe(parent =&gt; {
          this.parent = parent[0];
          console.log(this.parent);
      });
  
  }
  
  hideDetail() {
      this.DetailIsVisible = false;
  }
  </code></pre>
  
  <p>}</p>
  
  <p>Parent Template:</p>
  
  <pre><code>div class="container"&gt;
  &lt;div class="row"&gt;
      &lt;div class="col-sm-4" *ngFor="let parent of parents" (click)="selectedServiceDetail(parent.Id)" data-target="#detailModal"&gt;
          &lt;div class="panel panel-primary" &gt;
              &lt;div class="panel-heading"&gt;{{parent.Id}}&lt;/div&gt;
              &lt;div class="panel-body"&gt;&lt;img [src]="parent.thumbnailpath"
                                           class="img-responsive" style="width:100%; height: 200px" [title] = 'parent.name' alt="Image"&gt;&lt;/div&gt;
              &lt;div class="panel-footer"&gt;{{parent.name}}&lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><br>
  </p>
  
  <p>Parent Component:</p>
  
  <pre><code> @Component({
  selector: 'app-parent',
  templateUrl: './parent.component.html',
  providers: [ParentDetailService]
   })
   export class ParentComponent implements OnInit {
  /**all rest api and assign to array of catalog*/
  
       public parents: IParent[];
       public DetailIsVisible: boolean;
       @ViewChild(ParentDetailComponent) detailModal: ParentDetailComponent;
  
  constructor(private _parentService: ParentService) {
  }
  
  ngOnInit(): void {
      this._parentService.getParents()
          .subscribe(
              parents =&gt; this.parents = parents
          );
      this.detailModal.DetailIsVisible = false;
  }
  
      public selectedServiceDetail(parentId): void {
  
      this.detailModal.DetailIsVisible = true;
      this.detailModal.show(parentId); ---&gt; this triggers ChildComponent method to fetch parent detail service
  }
  </code></pre>