1. Components Communication

1.1. 1. Communicating with Child Components Using @Input (Parent pass data to child)

I want to create a address component as a child component. The parent component, events-list, will pass the event object to the child. To get this done:

• child component needs import Input from angular/core

• parent template uses the child selector, and [input parameter name] = "parent"

• child component: events-address.component.ts

  //child component, talk with parent events-list.component.ts
  import { Component, Input } from '@angular/core';
  
  @Component({
    selector: 'events-address',
    template: '<span>,,</span>',
  })
  export class EventsAddressComponent {
    @Input() address: any; //define address object
  }
  

• modify parent component template, [address] is child object name, "event.location" is parent data

  <div>
      <h1>Upcoming Angular 2 Events</h1>
      <div class="well hoverwell thumbnail">
          <h2>Event: </h2>
          <div>Price: $</div>
          <div>Date: </div>
          <div>Time: </div>
          <!-- <div>Address: , , </div> -->
          <events-address [address]="event.location"></events-address>
      </div>
  </div>
  

• import child component to app.module

  import { EventsAddressComponent } from './events/events-address.component'
  
  @NgModule({
      declarations: [AppComponent, EventsListComponent, EventsAddressComponent],
  })
  

1.2. 2. Communicating with Parent Components Using @Output and EventEmitter (child pass data to parent)

1. child component events-address.component.ts:

   • import Output, EventEmitter
   • define a variable accepting EventEmitter
   • define buttonClick
   • the EventEmitter variable emit any data from child component

   //child component, talk with parent events-list.component.ts
   import { Component, Output, EventEmitter } from '@angular/core';
   
   @Component({
     selector: 'events-address',
     template: '<button (click)="buttonClick()">Click me!</button>',
   })
   export class EventsAddressComponent {
     @Output() myClick = new EventEmitter();
   
     buttonClick() {
       this.myClick.emit('I am from child component, should pass data to parent component');
     }
   }
   

2. parent Component events-list.component.ts:

   • update template: (the EventEmitter variable name defined in child component) = "randomFuncInParent($event)"

   <events-address (myClick)="clickWithAnyName($event)"></events-address>
   

   • define random function in parent component class

   export class EventsListComponent {
     clickWithAnyName(dataFromChild) {
       alert(dataFromChild);
     }
   }
   

1.3. 3. Using Template Variables To Interact with Child Components (parent access to child data, easier than method 2)

1. child component events-address.component.ts define public property and method

   //child component, talk with parent events-list.component.ts
   @Component({
     selector: 'events-address',
     template: '',
   })
   export class EventsAddressComponent {
     //use template variable to interact with child public method/property: parent accesses child data
     author: string = 'Guanghui Wang'; //child public property
     getAuthor() {
       alert(this.author);
     }
   }
   

2. access child component data from parent component template's childPointer variable

   <events-address [address]="event.location" (myClick)="clickWithAnyName($event)" #childPointer></events-address>
   <button (click)="childPointer.getAuthor()" class="btn-primary btn">Test template variable</button>
   <h3></h3>