Starting in Angular version 17.3, we now have a new output API. Note that the new output is NOT a signal. So why did the Angular team define a new output API as part of its signal-ification of Angular?<\/p>\n\n\n\n
import { Component, EventEmitter, Output, effect, output, signal } from '@angular\/core';\nimport { FormsModule } from '@angular\/forms';\n\n@Component({\n selector: 'app-filter',\n standalone: true,\n imports: [FormsModule],\n template: `\n <div class='card'>\n <div class='card-body'>\n <div class='row'>\n <div class='col-sm-2'>Filter by:<\/div>\n <div class='col-sm-5'><input type='text' [(ngModel)]='filter' \/><\/div>\n <\/div>\n <\/div>\n <\/div>\n `\n})\nexport class FilterComponent {\n filter = signal('');\n \/\/ @Output() processFilter = new EventEmitter<string>();\n processFilter = output<string>({\n alias: 'filterChange'\n });\n\n filterEff = effect(() => this.processFilter.emit(this.filter()));\n}\n<\/code><\/pre>\n\n\n\nNow our parent snacks component HTML<\/p>\n\n\n\n
<div class=\"card border-secondary\">\n <div class=\"card-header text-secondary fw-bold\">\n {{ pageTitle }}\n <\/div>\n\n <div class=\"card-body\">\n <app-filter (filterChange)=\"filterList($event)\"\/>\n <div class=\"row\">\n <div class=\"col-md-4 col-sm-4 fw-bold\">Name<\/div>\n <div class=\"col-md-4 col-sm-4 fw-bold text-center\">Price<\/div>\n <\/div>\n\n @for (snackItem of filteredSnacks(); track snackItem) {\n <div>\n <div>\n <div class=\"row mb-2\">\n <div class=\"col-md-4 col-sm-4\">\n {{ snackItem.name }}\n <\/div>\n <div class=\"col-md-4 col-sm-4 text-center\">\n {{ snackItem.price | currency }}\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n } @empty { No snacks available that match the filter }\n <\/div>\n<\/div>\n<\/code><\/pre>\n\n\n\nTs code<\/p>\n\n\n\n
import { Component, computed, inject, signal } from '@angular\/core';\nimport { FilterComponent } from '..\/filter\/filter.component';\nimport { SnackService } from '.\/snack.service';\nimport { CurrencyPipe } from '@angular\/common';\n\n@Component({\n selector: 'app-snack',\n standalone: true,\n imports: [ FilterComponent, CurrencyPipe],\n templateUrl: '.\/snack.component.html'\n})\nexport class SnackComponent {\n pageTitle = 'Snacks';\n listFilter = signal('');\n\n snackService = inject(SnackService);\n\n snacks = this.snackService.snacks;\n filteredSnacks = computed(() =>\n this.snacks().filter(s => s.name.includes(this.listFilter())));\n\n filterList(filterText: string) {\n this.listFilter.set(filterText);\n }\n}\n<\/code><\/pre>\n\n\n\n