how to emit value and receive value in component angular 2?

Question

i'm trying select box value i need to send child component to grand parent component using in Injectable when i change select option depend upon value need to load theme config method

<select  (change)="changedvalue($event)"  class="selectionbox" [(ngModel)]="selectedValue" required>
            <option value="1">red</option>
            <option value="2">blue</option>
            <option value="3">green</option>
            <option value="4">Teaching</option>
            <option value="5">Marketing</option>
        </select>

changedvalue(key){
      console.log(this.selectedValue);
      this.formeService.testdata(this.selectedValue);
    }

FormeService.ts

import {Injectable, Component, Directive, EventEmitter, Output} from '@angular/core';
  @Injectable()
  export class FormeService {
    @Output() change = new EventEmitter<any>();
    testdata(value) {
      this.change.emit(value)
    }

Grand parent component.ts

  ngOnInit(): void {
    this.formeService.change.subscribe((value)=> {
      console.log(value);
      if (value === 1) {
        this.themeConfig.config();
      } else if (value === 2) {
        this.themeConfig.config2();
      }
    });
  }

You are just complicating the thing. I think that you don't need to make a service for this. Just add the code on your subscribe method in your component changedvalue method. — Mehdi Benmoha, Nov 08 '17 at 09:48
in fact since you're using a service, you should lick both of your component to this service, and use getter and setter. If you want to use `eventEmiter` you should lick both component directly by this event emiter — Flow, Nov 08 '17 at 10:01

score 0 · Answer 1 · answered Nov 08 '17 at 10:10

Here's an example on how to track select changes, you probably don't even need to use a service for that: How can I get new selection in "select" in Angular 2?

So in your example, you juste have to do this:

    <select (change)="changedvalue($event.target.value)" class="selectionbox" [(ngModel)]="selectedValue" required>
  <option value="1">red</option>
  <option value="2">blue</option>
  <option value="3">green</option>
  <option value="4">Teaching</option>
  <option value="5">Marketing</option>
</select>

changedvalue(value){
      if (value === 1) {
    this.themeConfig.config();
  } else if (value === 2) {
    this.themeConfig.config2();
  }
    }

PS: Don't forget to import the FormsModule from @angular/forms in your module like this:

import { FormsModule } from '@angular/forms';

and add it to the imports list in your module :

@NgModule({
  imports: [
    FormsModule,
    // etc...

if (value === 1) { this.themeConfig.config(); } else if (value === 2) { this.themeConfig.config2(); } i need this condition initial load component . nested component — sridharan, Nov 08 '17 at 10:25
Then you have to declare your @Output event emitter in your child component. And subscribe to that event in your parent component. Please choose some other names for your components and events because select and change are already predefined html and angular selector and event. if your child event selector if theme-selector for exemple, and your Output variable name is themeChanged your have to do this in your parent component: — Mehdi Benmoha, Nov 08 '17 at 10:31

how to emit value and receive value in component angular 2?

1 Answers1