Let us list out the most important changes and new features in the minor versions Angular 17.3<\/p>\n\n\n\n
output()<\/code> API<\/h4>\n\n\n\nAngular 17.3 introduced the new output()<\/code> API, for emitting output from a component. This API is designed to complement the input()<\/code> and model()<\/code> APIs, and it’s type safe.<\/p>\n\n\n\nOfficial docs: output<\/a><\/em><\/p>\n\n\n\n@Component({\n selector: 'app-output',\n standalone: true,\n template: `\n <button (click)=\"onClick.emit()\">Button<\/button>\n <input #in type=\"text\" (keyup)=\"onChange.emit(in.value)\" \/>\n `,\n})\nexport class OutputComponent {\n onClick = output(); \/\/ ? OutputEmitterRef<void>\n onChange = output<string>(); \/\/ ? OutputEmitterRef<string>\n}\n\n@Component({\n selector: 'app-output-wrapper',\n standalone: true,\n imports: [OutputComponent],\n template: ` <app-output (onClick)=\"log('onClick')\" (onChange)=\"log('onChange', $event)\" \/> `,\n})\nexport class OutputWrapperComponent {\n log(t1: string, t2: string = '') { console.log(t1, t2); }\n}\n\n\/\/ after you click on the button, then type 'test' into the input field, \n\/\/ the messages on the console are:\n\/\/ onClick \n\/\/ onChange t\n\/\/ onChange te\n\/\/ onChange tes\n\/\/ onChange test<\/code><\/pre>\n\n\n\n<\/div>\n\n\n\noutputFromObservable()<\/code> helper functions<\/h4>\n\n\n\nIn addition the new output()<\/code> API, Angular 17.3 also contains the outputFromObservable()<\/code> helper function for transforming an observable to a component’s output()<\/code>.<\/p>\n\n\n\nOfficial docs: outputFromObservable<\/a>,<\/em><\/p>\n\n\n\n@Component({\n selector: 'app-output2',\n standalone: true,\n template: `<button (click)=\"onClick$.next('click2')\">Button<\/button>`,\n})\nexport class Output2Component {\n onClick$ = new BehaviorSubject(''); \/\/ ? BehaviorSubject<string>\n onClick = outputFromObservable(this.onClick$); \/\/ ? OutputRef<string>\n}\n\n@Component({\n selector: 'app-output-wrapper2',\n standalone: true,\n imports: [Output2Component],\n template: `<app-output2 (onClick)=\"log('onClick', $event)\" \/>`,\n})\nexport class OutputWrapper2Component {\n log(t1: string, t2: string = '') { console.log(t1, t2); }\n}\n\n\/\/ after you click on the button, the message on the console is:\n\/\/ onClick click2<\/code><\/pre>\n\n\n\n<\/div>\n\n\n\noutputToObservable()<\/code> helper functions<\/h4>\n\n\n\nThere is also a new outputToObservable()<\/code> helper function for converting a component’s output to an observable.<\/p>\n\n\n\nOfficial docs: outputToObservable<\/a><\/em><\/p>\n\n\n\n@Component({\n selector: 'app-output3',\n standalone: true,\n template: `<button (click)=\"onClick.emit()\">Button<\/button>`,\n})\nexport class Output3Component {\n onClick = output(); \/\/ ? OutputEmitterRef<void>\n}\n\n@Component({\n selector: 'app-output-wrapper3',\n standalone: true,\n imports: [Output3Component],\n template: `<app-output3\/>`, \/\/ ? no (onClick)=\"...\" here!\n})\nexport class OutputWrapper3Component implements OnInit {\n childComponent = viewChild(Output3Component);\n destroyRef = inject(DestroyRef);\n\n ngOnInit(): void {\n const childComponent = this.childComponent();\n if (childComponent) {\n const onClick$ = outputToObservable(childComponent.onClick) \/\/ ? \n .pipe(takeUntilDestroyed(this.destroyRef));\n onClick$.subscribe(() => console.log('onClick'));\n }\n }\n}\n\n\/\/ after you click on the button, the message on the console is:\n\/\/ onClick<\/code><\/pre>\n\n\n\n<\/div>\n\n\n\nTypescript 5.4 support<\/h4>\n\n\n\n
Daniel Rosenwasser<\/a> highlighted the most interesting new features of Typescript 5.4 in his announcement<\/a>:<\/p>\n\n\n\n- Preserved Narrowing in Closures Following Last Assignments<\/li>
- The
NoInfer<\/code> Utility Type<\/li>Object.groupBy<\/code> and Map.groupBy<\/code><\/li>- Support for
require()<\/code> calls in --moduleResolution bundler<\/code> and --module preserve<\/code><\/li>- Checked Import Attributes and Assertions<\/li>
- Quick Fix for Adding Missing Parameters<\/li>
- Auto-Import Support for Subpath Imports<\/li><\/ul>\n\n\n\n