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 the data and header in that component and pass that data and header to another component that is embedded in it?
Here is the code that is better explained.
<cst-multiselect [title]="Countries" [data] = ['one', 'two', three']></cst-multiselect>
I am trying to pass title values 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 data that I have passed from cst-multiselect to cst-checkbox (which is a dropdownbox). I would like to set the value as well as the data in this dropdown. Any help would be really appreciated as I am trying multiple methods to no avail. Thank!
0
source to share
1 answer
@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[];
}
0
source to share