How to pass value from one component to another component in Angular2?

I am trying to pass a value from one component to another in Angular2. So for example, I am trying to implement a component and set a data and title in that component and pass that data and title to another component which is embedded in it?

Here is the code to better explain.

<cst-multiselect [title]="Countries" [data] = ['one', 'two', three']></cst-multiselect>

I am trying to pass the values 'title' and 'data' to another component:

<div ngbDropdown class="d-inline-block" [autoClose]="false"> 
         <button class="btn btn-outline-primary" id="dropdownMenu1" ngbDropdownToggle>Selected Countries 
</button> 
            <div class="dropdown-menu" aria-labelledby="dropdownMenu1"> 
                   <cst-checkbox></cst-checkbox> 
            </div> 
</div>

I would like to display the data I passed from cst-multiselect on cst-checkbox(which is a dropdownbox). I would like to set the value and also the data in this dropdownbox. Any help would really be appreciated as I have been trying out multiple methods but to no avail. Thank you!


ANSWERS:


@Component({
  selector: 'cst-multiselect',
  template: '<cst-checkbox [title]="title" [data]="data"'
  ...
})
class CstMultiSelect {
  @Input() title:string;
  @Input() data:string[];
}

@Component({
  selector: 'cst-checkbox',
  ...
})
class CstCheckbox {
  @Input() title:string;
  @Input() data:string[];
}


 MORE:


 ? How to call method from another component angular2
 ? Angular2: Hide current view when routing to other view
 ? Angular2: Hide current view when routing to other view
 ? Angular2: Hide current view when routing to other view
 ? Angular2: Hide current view when routing to other view
 ? Track Angular2 Current Route
 ? Angular2 Router 3.0 beta 1 ( Child routes via Routerlink failed)
 ? Pass data between Angular2 routes similar to modal dialog
 ? Set a load indicator on page change in Angular2
 ? Set a load indicator on page change in Angular2