| Angular EventEmitter
|
Showing posts with label EventEmitter. Show all posts
Showing posts with label EventEmitter. Show all posts
Tuesday, August 25, 2020
Using EventEmitter with @Output
In the previous post, we saw what EventEmitters
are and how they are used in combination with @Output decorator to handle communicate from Child component to the
Parent component. In this post, we shall see a full example of how this is
implemented.
In the example, we have a ParentComponent and a ChildComponent, the child component has a button and a @Output decorator. In the buttons click event, we will trigger the emit event of the EventEmitter associated with the @Output parameter, we will also send a payload along with the emit.
In the example, we have a ParentComponent and a ChildComponent, the child component has a button and a @Output decorator. In the buttons click event, we will trigger the emit event of the EventEmitter associated with the @Output parameter, we will also send a payload along with the emit.
What are EventEmitters?
Angular applications are made using Components, most often
we will have to arrange the components in a hierarchy (parent/child components).
We will have to pass values from the parent to child components and from the
child to parent component to make the App functional.
To pass values from a parent component to a child component we use the @Input property/decorator.
To pass values from a child component to a parent component we need to emit an event using @Output and EventEmitter. Both are parts of the @angular/core.
To pass values from a parent component to a child component we use the @Input property/decorator.
To pass values from a child component to a parent component we need to emit an event using @Output and EventEmitter. Both are parts of the @angular/core.
Subscribe to:
Posts (Atom)
