Let us list out the most important changes and new features in the minor versions Angular 17.2<\/p>\n\n\n\n
Signal Inputs arrived in Angular 17.1. They fulfill the same tasks as the A Signal Input is a simple function named The property is of type\u00a0 The second addition is the additional As we can see in the example above, the\u00a0 we can also use the signal as the source of an observable, to trigger an action when the input changes. For example, to fetch data from a server:<\/p>\n\n\n\n In the latest update of Angular 17.2, a new feature was introduced: model inputs. These inputs are built on writable signals and establish an input\/output pair that enables two-way bindings. <\/p>\n\n\n\n In the example provided below, the signals in both components always have the same value, and we can increase this value by pressing on of the buttons<\/p>\n\n\n\n We can also bind an input element’s value to a writable signal by two-way data binding, using the ‘banana in the box’ syntax With this improvement, we can query elements from the component’s template as signals: there are new PS: <\/strong>These are signal based versions of the Angular can clear the screen before each re-build. we can enable this feature in The PS:<\/strong> We can use these identifiers as an alternate to the environment files in the future.<\/em><\/p>\n\n\n\n@Input<\/code> decorator: Property Binding.<\/p>\n\n\n\ninput()<\/code>. The new Property Binding syntax looks like this:<\/p>\n\n\n\n\/\/ @Input-Style (old)\nclass HolidayComponent {\n @Input() username = '';\n @Input({required: true}) holiday: Holiday | undefined;\n}\n\n\/\/ Signal Input (new)\nclass HolidayComponent {\n username = input(''); \/\/ Signal<string>\n holiday = input<Holiday>(); \/\/ Signal<Holiday | undefined>\n} <\/code><\/pre>\n\n\n\nSignal<\/code>, which makes it reactive by nature. Instead of\u00a0ngOnChanges()<\/code>\u00a0and\u00a0ngOnInit()<\/code>, we can consume changes with\u00a0effect()<\/code>\u00a0or\u00a0computed()<\/code> .<\/p>\n\n\n\nrequired()<\/code> function. It fixes the issue with @Input({required: true})<\/code>, which always results in the union type including undefined<\/code> and the actual type:<\/p>\n\n\n\n\/\/ required input. \n\/\/ Here, We dont need the including \"undefined Type\" anymore, like with the old syntax\nclass HolidayComponent {\n username = input(''); \/\/ Signal<string>\n holiday = input.required<Holiday>(); \/\/ Signal<Holiday>\n} \n\n@Component({\n tempate: `<app-holiday [username]=\"username\" [holiday]=\"holiday\" \/>`\n})\nclass HolidayContainerComponent {\n username = 'Konrad Weber';\n holiday = createHoliday();\n}<\/code><\/pre>\n\n\n\ninput()<\/code>\u00a0function returns a signal, that can be used in the template or in computed values (which would be the modern equivalent of\u00a0ngOnChanges<\/code>).<\/p>\n\n\n\n@Component({\r\n standalone: true,\r\n selector: 'ns-pony',\r\n template: `\r\n @if (ponyModel(); as ponyModel) {\r\n <figure>\r\n <img [src]=\"imageUrl()\" [alt]=\"ponyModel.name\" \/>\r\n <figcaption><\/figcaption>\r\n <\/figure>\r\n }\r\n `\r\n})\r\nexport class PonyComponent {\r\n ponyModel = input<PonyModel>();\r\n imageUrl = computed(() => `assets\/pony-${this.ponyModel()!.color}.gif`);<\/code><\/pre>\n\n\n\nexport class PonyComponent {\r\n ponyService = inject(PonyService);\r\n ponyId = input.required<number>();\r\n \/\/ entity fetched from the server every time the ponyId changes\r\n ponyModel = toSignal(toObservable(this.ponyId)\r\n .pipe(switchMap(id => this.ponyService.get(id))));\n\r\n imageUrl = computed(() => `assets\/pony-${this.ponyModel()!.color}.gif`);<\/code><\/pre>\n\n\n\nModel signal inputs<\/h4>\n\n\n\n
\/\/ First Component\n@Component({\n selector: 'app-counter',\n standalone: true,\n template: `<button (click)=\"increase()\">Counter's button: {{ value() }}<\/button>`,\n})\nexport class CounterComponent {\n value = model.required<number>();\n increase() {\n this.value.update((x) => x + 1);\n }\n}\n\n\/\/ 2nd Component - Here we use the first component as the child-component\n@Component({\n selector: 'app-wrapper',\n standalone: true,\n imports: [CounterComponent],\n template: `<app-counter [(value)]=\"count\" \/>\n <button (click)=\"increase()\">Wrapper's button: {{ count() }}<\/button>`\n})\nexport class WrapperComponent {\n count = signal(0);\n increase() {\n this.count.update((x) => x + 1);\n }\n}<\/code><\/pre>\n\n\n\n[(ngModel)]<\/code>:<\/p>\n\n\n\n@Component({\n selector: 'app-root',\n standalone: true,\n imports: [\n FormsModule,\n ],\n template: `\n<textarea\n [(ngModel)]=\"promptValue\"\n><\/textarea>`\n})\nexport class AppComponent {\n promptValue = signal('');\n}<\/code><\/pre>\n\n\n\nView queries and component queries as signals<\/h4>\n\n\n\n
viewChild()<\/code>, viewChildren()<\/code>, contentChild()<\/code> and contentChildren()<\/code> functions that return Signals.<\/p>\n\n\n\n@viewChild<\/code>, @viewChildren<\/code>, @contentChild<\/code> and @contentChildren<\/code> decorators:<\/em><\/p>\n\n\n\n@Component({\n selector: 'app-vc-query-as-signal',\n standalone: true,\n template: `\n <button (click)=\"show()\">Show<\/button>\n @if(visible()) {\n <div #id1>Hi!<\/div>\n }`,\n})\nclass VcQueryAsSignalComponent {\n visible = signal(false);\n divEl = viewChild<ElementRef<HTMLDivElement>>('id1'); \/\/ ?\n effectRef = effect(() => {\n console.log(this.divEl());\n });\n show() {\n this.visible.set(true);\n }\n}\n\n\/\/ First message on the console: undefined\n\/\/ The user clicks on the button\n\/\/ Second message on the console: _ElementRef {nativeElement: div}\n<\/code><\/pre>\n\n\n\nAngular CLI: clearScreen option support<\/h4>\n\n\n\n
angular.json<\/code>, by setting the clearScreen<\/code> builder option to true<\/code> (it’s false<\/code> by default):<\/p>\n\n\n\n\/\/ angular.json\n\n{\n \"projects\": {\n \"ng172\": {\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit\/build-angular:application\",\n \"options\": {\n \/\/ ? clear the screen before each re-build\n \"clearScreen\": true,\n \/\/ ... <\/code><\/pre>\n\n\n\nAngular CLI: ‘define’ option for declaring global identifiers<\/h4>\n\n\n\n
application<\/code> builder supports the define<\/code> option for declaring global identifiers. As these identifiers declared in angular.json<\/code>, not in a .ts<\/code> support, we can declare it for typescript using a declare const<\/code> statement in src\/types.d.ts<\/code>.<\/p>\n\n\n\n\/\/ angular.json\n\n{\n \"projects\": {\n \"ng172\": {\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit\/build-angular:application\",\n \"options\": {\n \"define\": {\n \/\/ the value must have a valid JSON syntax ?\n \"CONSTANT_IN_ANGULAR_JSON\": \"{ 'text': 'This constant is defined in angular.json', 'number': 1 }\"\n },\n \/\/ ...<\/code><\/pre>\n\n\n\n\/\/ src\/types.d.ts\n\ndeclare const CONSTANT_IN_ANGULAR_JSON: { text: string; number: number };<\/code><\/pre>\n\n\n\n\/\/ component.ts\n\n@Component({\n template: `\n Text: {{ CONSTANT_IN_ANGULAR_JSON.text }}, \n Number:{{ CONSTANT_IN_ANGULAR_JSON.number }}`,\n})\nexport class GlobalIdentifierComponent {\n CONSTANT_IN_ANGULAR_JSON = CONSTANT_IN_ANGULAR_JSON;\n}\n<\/code><\/pre>\n\n\n\n