How to pass selected value to other component angular 2

Question

I am trying to pass value selected from one of the options. I used ngModel to save the value but I can't figure out how to pass it to other component.

Component1.ts

  <select [(ngModel)]="selectedElement.id">
    <option *ngFor="let type of types" [ngValue]="type.id"> {{type.Name}}</option>
  </select>
  @Input() selectedElement:any= {id:2,Name:'abdfsdgsc'};
  types:any[]=[
    {id:1,Name:'abc'},
    {id:2,Name:'abdfsdgsc'}
];

component2.ts

constructor() {
  if(this.selectedElement.id==1){
     themeConfig.config();
  }else {
     themeConfig.theme();
  }
}

What is the relationship between those two components? Is one the parent of the other? Are they siblings? Completely unrelated? Here's the documentation on component interactions: https://angular.io/guide/component-interaction. Have you read it? — JB Nizet, Nov 01 '17 at 09:26
Possible duplicate of [How to pass data between two components in Angular 2](https://stackoverflow.com/questions/39325503/how-to-pass-data-between-two-components-in-angular-2). Possible duplicate of [How do I share data between components in Angular 2?](https://stackoverflow.com/questions/31026886) — Igor, Nov 01 '17 at 09:31

score 0 · Answer 1 · answered Nov 01 '17 at 09:22

0

You need output value by eventemitter, and in the second components input

answered Nov 01 '17 at 09:22

Aleksey Bichuk

26
3

score 0 · Answer 2 · answered Nov 01 '17 at 09:32

Just include the value you want to provide as an input in Component 2 and do the check on the ngOnInit life-cycle method

HTML

<component2 [selectedID]="selectedElement.id"></component2>

TS

@Input() selectedID:number;

ngOnInit() {
  if(this.selectedID === 1){
     themeConfig.config();
  }else {
     themeConfig.theme();
  }
}

How to pass selected value to other component angular 2

2 Answers2