DEV Community

Benjamin RICHARD
Benjamin RICHARD

Posted on

Yet another Angular article, part 5 : output

Image description

In communication between component you have to define inputs, describes in previous articles, and outputs.

If inputs are the solution to give information from parent, to children, then outputs allows children to send information to their parents.

With Angular, outputs are declared in chilren using a signal like this :

public myOutput = output<string>();
public setMyOutput = (myOutput: string) => this.myOutput.emit(myOutput)
Enter fullscreen mode Exit fullscreen mode

And parent component can listen to output with this syntax :

@Component({
  ...
  template: `<childrenComponent (myOutput)="setUsername($event)"/>`
})
export class ParentComponent {
  setUsername(username: string) {
    ...
  }
}
Enter fullscreen mode Exit fullscreen mode

So, output MUST be public. And to listen to output, you MUST use parenthesis, AND use the standard $event variable that is the keyword used everytime in template to bind event.

That’s all !

But…

You can do something else. Here you have to manually ‘emit’ the new value. In fact, the previous output syntax (before v18) was really similar to EventEmitter. So, it was possible to use Observable as Output like this :

public @Output() myOutput$ = toObservable(this.myOutput);
Enter fullscreen mode Exit fullscreen mode

Each time the Observable changes, an event is emitted. The source of the Observable can be a Subject, or like in my sample, an Observable based on a signal, using toObservable operator.

That’s all for output parts.

Have a nice 🌧️ day

[note] all articles use command from Angular v19*

[demo] a sample project is available on StackBlitz

Image of Timescale

Timescale – the developer's data platform for modern apps, built on PostgreSQL

Timescale Cloud is PostgreSQL optimized for speed, scale, and performance. Over 3 million IoT, AI, crypto, and dev tool apps are powered by Timescale. Try it free today! No credit card required.

Try free

Top comments (0)

nextjs tutorial video

Youtube Tutorial Series

So you built a Next.js app, but you need a clear view of the entire operation flow to be able to identify performance bottlenecks before you launch. But how do you get started? Get the essentials on tracing for Next.js from @nikolovlazar in this video series 👀

Watch the Youtube series

👋 Kindness is contagious

Immerse yourself in a wealth of knowledge with this piece, supported by the inclusive DEV Community—every developer, no matter where they are in their journey, is invited to contribute to our collective wisdom.

A simple “thank you” goes a long way—express your gratitude below in the comments!

Gathering insights enriches our journey on DEV and fortifies our community ties. Did you find this article valuable? Taking a moment to thank the author can have a significant impact.

Okay