Meet Angular’s new output() API

Angular v17.3 introduces an improved API for declaring outputs, available as a developer preview. The new API simplifies the process of declaring outputs in directives and aligns with other function-based APIs like signal inputs. It also provides more correct types for emitting values, improving type safety and reducing the risk of subtle runtime errors. Developers can declare outputs using the output() function, which initializes a class field and allows values to be emitted by invoking the .emit function. For outputs based on observable streams, the outputFromObservable() function can be used. The new API is not a signal but an ergonomic improvement that reduces boilerplate code. It features automatic cleanup of outputs upon directive destruction and improved type safety for emitted values. All outputs implement the OutputRef interface, providing a consistent way for developers to listen to outputs programmatically. The RxJS interop package includes the outputToObservable function for listening to outputs in an RxJS-idiomatic way. The new output API is available in developer preview and Angular encourages feedback from the community. Developers can try the new APIs by installing the latest version of Angular with ng update. The improved output API in Angular v17.3 offers several benefits, including conceptual alignment with other function-based APIs, simplified syntax, automatic cleanup, improved type safety, and consistent programmatic listening. Developers are encouraged to provide feedback on the new output APIs through comments, GitHub discussions, or other channels. The feedback will be used to further refine and stabilize the APIs.