CODEWITHSUNDEEP
angulartypescript
Kevin Malone
Kevin Malone

Reputation: 65

How can I get the value of an output using EventEmitter?

I have a component that emit a simple string when clicking on it

The HTML of my component:

<div (click)="emitSomething($event)"></div>

The TypeScript of my component: 

@Output() someString: EventEmitter<string> = new EventEmitter();

emitSomething(event: string) {
  this.someString.emit(event)
}

Now, I want to pass this simple string to another component so I can use it in my other component, how do I do that?

What I tried in the second component: 

<component-one (someString)="variable"></component-one>

The TypeScript of my second component: 

@Output() someString: EventEmitter<string> = new EventEmitter();

variable: string; // This variable should have the string value of my first component

EDIT: Here is what the console outputs when I do this

Can't bind to 'someString' since it isn't a known property of 'component-one'.

Upvotes: 3

Views: 9317

Answers (3)

Bhavin Hirpara
Bhavin Hirpara

Reputation: 356

you can assign emitted value directly to some variable of parent component from child component like below

<component-one (someString)="variable = $event"></component-one>

Upvotes: 6

XardasLord
XardasLord

Reputation: 1937

Your 'another compoment' has to be the parent of this component where you emit the value using EventEmmiter. In your parent component do this:

<child-component (someString)="someStringFunction($event)"></child-component>

Then you can have a function in your parent component:

public someStringFunction(eventValue: string){
    this.variable = eventValue;
}

Upvotes: 1

Tim
Tim

Reputation: 4274

Use a function that assigns the string in your parent component:

public assignString(input: string){
    this.variable = input;
}

and use it like that:

<component-one (someString)="assignString($event)"></component-one>

Upvotes: 5

Related Questions