{"id":36846,"date":"2026-05-03T19:45:21","date_gmt":"2026-05-03T16:45:21","guid":{"rendered":"https:\/\/kamil-abzalov.com\/?p=36846"},"modified":"2026-05-03T19:57:29","modified_gmt":"2026-05-03T16:57:29","slug":"signals-in-angular","status":"publish","type":"post","link":"https:\/\/kamil-abzalov.com\/en\/tutorials\/javascript\/signals-in-angular\/","title":{"rendered":"Signals in Angular"},"content":{"rendered":"<p>[et_pb_section fb_built=&#8221;1&#8243; fullwidth=&#8221;on&#8221; admin_label=&#8221;Header&#8221; _builder_version=&#8221;4.20.0&#8243; use_background_color_gradient=&#8221;on&#8221; background_color_gradient_direction=&#8221;163deg&#8221; background_color_gradient_stops=&#8221;rgba(0,0,0,0.02) 50%|#ffffff 50%&#8221; background_color_gradient_start=&#8221;rgba(0,0,0,0.02)&#8221; background_color_gradient_start_position=&#8221;50%&#8221; background_color_gradient_end=&#8221;#ffffff&#8221; background_color_gradient_end_position=&#8221;0%&#8221; background_image=&#8221;https:\/\/kamil-abzalov.com\/wp-content\/uploads\/2021\/12\/web-dev-03.png&#8221; parallax=&#8221;on&#8221; animation_style=&#8221;fade&#8221; collapsed=&#8221;off&#8221; global_colors_info=&#8221;{}&#8221;][et_pb_fullwidth_header title=&#8221;Signals in Angular&#8221; content_max_width=&#8221;640px&#8221; _builder_version=&#8221;4.27.6&#8243; title_font=&#8221;Roboto|700|||||||&#8221; title_line_height=&#8221;1.5em&#8221; content_font=&#8221;Roboto||||||||&#8221; content_font_size=&#8221;16px&#8221; content_line_height=&#8221;2em&#8221; subhead_font=&#8221;|700||on|||||&#8221; subhead_font_size=&#8221;14px&#8221; subhead_letter_spacing=&#8221;2px&#8221; subhead_line_height=&#8221;2em&#8221; background_color=&#8221;rgba(0,0,0,0)&#8221; custom_button_one=&#8221;on&#8221; button_one_text_size=&#8221;14px&#8221; button_one_text_color=&#8221;#ffffff&#8221; button_one_bg_color=&#8221;#0054ff&#8221; button_one_border_width=&#8221;14px&#8221; button_one_border_color=&#8221;rgba(0,0,0,0)&#8221; button_one_border_radius=&#8221;0px&#8221; button_one_letter_spacing=&#8221;2px&#8221; button_one_font=&#8221;|600||on|||||&#8221; button_one_icon=&#8221;&#x39;||divi||400&#8243; button_one_on_hover=&#8221;off&#8221; custom_button_two=&#8221;on&#8221; button_two_text_size=&#8221;14px&#8221; button_two_text_color=&#8221;#0054ff&#8221; button_two_bg_color=&#8221;rgba(255,255,255,0)&#8221; button_two_border_width=&#8221;12px&#8221; button_two_border_color=&#8221;rgba(0,0,0,0)&#8221; button_two_border_radius=&#8221;0px&#8221; button_two_letter_spacing=&#8221;2px&#8221; button_two_font=&#8221;|600||on|||||&#8221; button_two_icon=&#8221;&#x39;||divi||400&#8243; button_two_on_hover=&#8221;off&#8221; background_layout=&#8221;light&#8221; custom_margin=&#8221;|||&#8221; custom_padding=&#8221;6vw||6vw||false|false&#8221; animation_style=&#8221;zoom&#8221; animation_intensity_zoom=&#8221;-5%&#8221; title_font_size_tablet=&#8221;&#8221; title_font_size_phone=&#8221;25px&#8221; title_font_size_last_edited=&#8221;on|desktop&#8221; box_shadow_style_button_two=&#8221;preset1&#8243; box_shadow_vertical_button_two=&#8221;0px&#8221; box_shadow_blur_button_two=&#8221;0px&#8221; box_shadow_spread_button_two=&#8221;2px&#8221; box_shadow_color_button_two=&#8221;#0054ff&#8221; button_one_letter_spacing_hover=&#8221;2px&#8221; button_two_letter_spacing_hover=&#8221;2px&#8221; global_colors_info=&#8221;{}&#8221; button_one_text_size__hover_enabled=&#8221;off&#8221; button_two_text_size__hover_enabled=&#8221;off&#8221; button_one_text_color__hover_enabled=&#8221;off&#8221; button_two_text_color__hover_enabled=&#8221;off&#8221; button_one_border_width__hover_enabled=&#8221;off&#8221; button_two_border_width__hover_enabled=&#8221;off&#8221; button_one_border_color__hover_enabled=&#8221;off&#8221; button_two_border_color__hover_enabled=&#8221;off&#8221; button_one_border_radius__hover_enabled=&#8221;off&#8221; button_two_border_radius__hover_enabled=&#8221;off&#8221; button_one_letter_spacing__hover_enabled=&#8221;on&#8221; button_one_letter_spacing__hover=&#8221;2px&#8221; button_two_letter_spacing__hover_enabled=&#8221;on&#8221; button_two_letter_spacing__hover=&#8221;2px&#8221; button_one_bg_color__hover_enabled=&#8221;off&#8221; button_two_bg_color__hover_enabled=&#8221;off&#8221;][\/et_pb_fullwidth_header][\/et_pb_section][et_pb_section fb_built=&#8221;1&#8243; _builder_version=&#8221;4.21.2&#8243; _module_preset=&#8221;default&#8221; collapsed=&#8221;off&#8221; global_colors_info=&#8221;{}&#8221;][et_pb_row _builder_version=&#8221;4.21.2&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;][et_pb_column type=&#8221;4_4&#8243; _builder_version=&#8221;4.21.2&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;][et_pb_dcsbcm_divi_breadcrumbs_module homebreadcrumbtext=&#8221;Home&#8221; hide_currentbreadcrumb=&#8221;off&#8221; _builder_version=&#8221;4.27.6&#8243; fontsbreadcrumbs_font_size_tablet=&#8221;51&#8243; fontsbreadcrumbs_line_height_tablet=&#8221;2&#8243; fontsseperator_font_size_tablet=&#8221;51&#8243; fontsseperator_line_height_tablet=&#8221;2&#8243; fontsbreadcrumblinks_font_size_tablet=&#8221;51&#8243; fontsbreadcrumblinks_line_height_tablet=&#8221;2&#8243; z_index_tablet=&#8221;500&#8243; fontsbreadcrumbs_text_shadow_horizontal_length_tablet=&#8221;0px&#8221; fontsbreadcrumbs_text_shadow_vertical_length_tablet=&#8221;0px&#8221; fontsbreadcrumbs_text_shadow_blur_strength_tablet=&#8221;1px&#8221; fontsseperator_text_shadow_horizontal_length_tablet=&#8221;0px&#8221; fontsseperator_text_shadow_vertical_length_tablet=&#8221;0px&#8221; fontsseperator_text_shadow_blur_strength_tablet=&#8221;1px&#8221; fontsbreadcrumblinks_text_shadow_horizontal_length_tablet=&#8221;0px&#8221; fontsbreadcrumblinks_text_shadow_vertical_length_tablet=&#8221;0px&#8221; fontsbreadcrumblinks_text_shadow_blur_strength_tablet=&#8221;1px&#8221; box_shadow_horizontal_tablet=&#8221;0px&#8221; box_shadow_vertical_tablet=&#8221;0px&#8221; box_shadow_blur_tablet=&#8221;40px&#8221; box_shadow_spread_tablet=&#8221;0px&#8221; global_colors_info=&#8221;{}&#8221;][\/et_pb_dcsbcm_divi_breadcrumbs_module][et_pb_text _builder_version=&#8221;4.27.6&#8243; z_index_tablet=&#8221;500&#8243; text_text_shadow_horizontal_length_tablet=&#8221;0px&#8221; text_text_shadow_vertical_length_tablet=&#8221;0px&#8221; text_text_shadow_blur_strength_tablet=&#8221;1px&#8221; link_text_shadow_horizontal_length_tablet=&#8221;0px&#8221; link_text_shadow_vertical_length_tablet=&#8221;0px&#8221; link_text_shadow_blur_strength_tablet=&#8221;1px&#8221; ul_text_shadow_horizontal_length_tablet=&#8221;0px&#8221; ul_text_shadow_vertical_length_tablet=&#8221;0px&#8221; ul_text_shadow_blur_strength_tablet=&#8221;1px&#8221; ol_text_shadow_horizontal_length_tablet=&#8221;0px&#8221; ol_text_shadow_vertical_length_tablet=&#8221;0px&#8221; ol_text_shadow_blur_strength_tablet=&#8221;1px&#8221; quote_text_shadow_horizontal_length_tablet=&#8221;0px&#8221; quote_text_shadow_vertical_length_tablet=&#8221;0px&#8221; quote_text_shadow_blur_strength_tablet=&#8221;1px&#8221; header_text_shadow_horizontal_length_tablet=&#8221;0px&#8221; header_text_shadow_vertical_length_tablet=&#8221;0px&#8221; header_text_shadow_blur_strength_tablet=&#8221;1px&#8221; header_2_text_shadow_horizontal_length_tablet=&#8221;0px&#8221; header_2_text_shadow_vertical_length_tablet=&#8221;0px&#8221; header_2_text_shadow_blur_strength_tablet=&#8221;1px&#8221; header_3_text_shadow_horizontal_length_tablet=&#8221;0px&#8221; header_3_text_shadow_vertical_length_tablet=&#8221;0px&#8221; header_3_text_shadow_blur_strength_tablet=&#8221;1px&#8221; header_4_text_shadow_horizontal_length_tablet=&#8221;0px&#8221; header_4_text_shadow_vertical_length_tablet=&#8221;0px&#8221; header_4_text_shadow_blur_strength_tablet=&#8221;1px&#8221; header_5_text_shadow_horizontal_length_tablet=&#8221;0px&#8221; header_5_text_shadow_vertical_length_tablet=&#8221;0px&#8221; header_5_text_shadow_blur_strength_tablet=&#8221;1px&#8221; header_6_text_shadow_horizontal_length_tablet=&#8221;0px&#8221; header_6_text_shadow_vertical_length_tablet=&#8221;0px&#8221; header_6_text_shadow_blur_strength_tablet=&#8221;1px&#8221; box_shadow_horizontal_tablet=&#8221;0px&#8221; box_shadow_vertical_tablet=&#8221;0px&#8221; box_shadow_blur_tablet=&#8221;40px&#8221; box_shadow_spread_tablet=&#8221;0px&#8221; global_colors_info=&#8221;{}&#8221;]In this video, we\u2019ll explore Angular signals. They\u2019re a major update to Angular\u2019s reactivity model that makes it easier to track changes in components and improves overall application performance[\/et_pb_text][et_pb_video src=&#8221;https:\/\/youtu.be\/FF90x3CK-Tk&#8221; disabled_on=&#8221;off|off|off&#8221; _builder_version=&#8221;4.27.6&#8243; global_colors_info=&#8221;{}&#8221;][\/et_pb_video][et_pb_text _builder_version=&#8221;4.27.6&#8243; z_index_tablet=&#8221;500&#8243; text_text_shadow_horizontal_length_tablet=&#8221;0px&#8221; text_text_shadow_vertical_length_tablet=&#8221;0px&#8221; text_text_shadow_blur_strength_tablet=&#8221;1px&#8221; link_text_shadow_horizontal_length_tablet=&#8221;0px&#8221; link_text_shadow_vertical_length_tablet=&#8221;0px&#8221; link_text_shadow_blur_strength_tablet=&#8221;1px&#8221; ul_text_shadow_horizontal_length_tablet=&#8221;0px&#8221; ul_text_shadow_vertical_length_tablet=&#8221;0px&#8221; ul_text_shadow_blur_strength_tablet=&#8221;1px&#8221; ol_text_shadow_horizontal_length_tablet=&#8221;0px&#8221; ol_text_shadow_vertical_length_tablet=&#8221;0px&#8221; ol_text_shadow_blur_strength_tablet=&#8221;1px&#8221; quote_text_shadow_horizontal_length_tablet=&#8221;0px&#8221; quote_text_shadow_vertical_length_tablet=&#8221;0px&#8221; quote_text_shadow_blur_strength_tablet=&#8221;1px&#8221; header_text_shadow_horizontal_length_tablet=&#8221;0px&#8221; header_text_shadow_vertical_length_tablet=&#8221;0px&#8221; header_text_shadow_blur_strength_tablet=&#8221;1px&#8221; header_2_text_shadow_horizontal_length_tablet=&#8221;0px&#8221; header_2_text_shadow_vertical_length_tablet=&#8221;0px&#8221; header_2_text_shadow_blur_strength_tablet=&#8221;1px&#8221; header_3_text_shadow_horizontal_length_tablet=&#8221;0px&#8221; header_3_text_shadow_vertical_length_tablet=&#8221;0px&#8221; header_3_text_shadow_blur_strength_tablet=&#8221;1px&#8221; header_4_text_shadow_horizontal_length_tablet=&#8221;0px&#8221; header_4_text_shadow_vertical_length_tablet=&#8221;0px&#8221; header_4_text_shadow_blur_strength_tablet=&#8221;1px&#8221; header_5_text_shadow_horizontal_length_tablet=&#8221;0px&#8221; header_5_text_shadow_vertical_length_tablet=&#8221;0px&#8221; header_5_text_shadow_blur_strength_tablet=&#8221;1px&#8221; header_6_text_shadow_horizontal_length_tablet=&#8221;0px&#8221; header_6_text_shadow_vertical_length_tablet=&#8221;0px&#8221; header_6_text_shadow_blur_strength_tablet=&#8221;1px&#8221; box_shadow_horizontal_tablet=&#8221;0px&#8221; box_shadow_vertical_tablet=&#8221;0px&#8221; box_shadow_blur_tablet=&#8221;40px&#8221; box_shadow_spread_tablet=&#8221;0px&#8221; global_colors_info=&#8221;{}&#8221;]A signal is just a wrapper around a value. Creating a signal is straightforward (see the code example below). To get the signal\u2019s value in a template, you simply call it like a function.<\/p>\n<p>Types of signals in Angular:<\/p>\n<ul>\n<li>writable signal \u2013 a signal whose value can be changed using the set() and update() methods.<\/li>\n<li>computed signal \u2013 a signal whose value is derived from other signals and recalculated when its dependencies change. Its value cannot be changed directly.<\/li>\n<li>linked signal \u2013 a combination of writable and computed signals: its value depends on other signals, but it can also be updated manually using set() and update().<\/li>\n<\/ul>\n<p>We\u2019ll also look at the toSignal() method and effects. toSignal() converts an observable into a signal. Effects are similar to computed signals, but Angular does not recommend using them to update signal values. Instead, they are useful for interacting with external systems such as the DOM or localStorage.<\/p>\n<p>Signals also affect existing Angular features. For example, we\u2019ll look at input signals as a replacement for the @Input decorator. Signal-based forms and httpResource are currently in experimental mode[\/et_pb_text][et_pb_dmb_code_snippet title=&#8221;app.ts&#8221; code=&#8221;aW1wb3J0IHsKICBDb21wb25lbnQsCiAgY29tcHV0ZWQsCiAgaW5qZWN0LAogIEluamVjdG9yLAogIGxpbmtlZFNpZ25hbCwKICBPbkluaXQsCiAgU2lnbmFsLAogIHNpZ25hbCwKICBXcml0YWJsZVNpZ25hbCwKfSBmcm9tICdAYW5ndWxhci9jb3JlJzsKaW1wb3J0IHsgTWF0VG9vbGJhciB9IGZyb20gJ0Bhbmd1bGFyL21hdGVyaWFsL3Rvb2xiYXInOwppbXBvcnQgeyBVc2Vyc1NlcnZpY2UgfSBmcm9tICcuL2ZlYXR1cmVzL3VzZXJzL3NlcnZpY2VzL3VzZXJzLXNlcnZpY2UnOwppbXBvcnQgeyBVc2VyRHRvIH0gZnJvbSAnLi9jb3JlL21vZGVscy9Vc2VyJzsKaW1wb3J0IHsgQXN5bmNQaXBlLCBKc29uUGlwZSB9IGZyb20gJ0Bhbmd1bGFyL2NvbW1vbic7CmltcG9ydCB7IHRvU2lnbmFsIH0gZnJvbSAnQGFuZ3VsYXIvY29yZS9yeGpzLWludGVyb3AnOwppbXBvcnQgeyBVc2VyQ2FyZCB9IGZyb20gJy4vdXNlci1jYXJkL3VzZXItY2FyZCc7CgpAQ29tcG9uZW50KHsKICBzZWxlY3RvcjogJ2FwcC1yb290JywKICBpbXBvcnRzOiBbTWF0VG9vbGJhciwgSnNvblBpcGUsIFVzZXJDYXJkXSwKICB0ZW1wbGF0ZVVybDogJy4vYXBwLmh0bWwnLAogIHN0eWxlVXJsOiAnLi9hcHAuc2NzcycsCn0pCmV4cG9ydCBjbGFzcyBBcHAgaW1wbGVtZW50cyBPbkluaXQgewogIHByb3RlY3RlZCB0aXRsZSA9ICdhbmd1bGFyLW1hdGVyaWFsLWFwcCc7CgogIHByb3RlY3RlZCBteUFnZTogV3JpdGFibGVTaWduYWw8bnVtYmVyPiA9IHNpZ25hbCgzNSk7CgogIHByb3RlY3RlZCBwZXJzb25hbEluZm86IFNpZ25hbDxzdHJpbmc+ID0gY29tcHV0ZWQoKCkgPT4gYE15IGFnZSBpcyAke3RoaXMubXlBZ2UoKX1gKTsKCiAgcHJpdmF0ZSB1c2VyU2VydmljZSA9IGluamVjdChVc2Vyc1NlcnZpY2UpOwoKICBzaGlwcGluZ09wdGlvbnMgPSBzaWduYWw8YW55W10+KFsKICAgIHsgaWQ6IDAsIG5hbWU6ICdHcm91bmQnIH0sCiAgICB7IGlkOiAxLCBuYW1lOiAnQWlyJyB9LAogICAgeyBpZDogMiwgbmFtZTogJ1NlYScgfSwKICBdKTsKICBzZWxlY3RlZE9wdGlvbiA9IGxpbmtlZFNpZ25hbDxhbnlbXSwgYW55Pih7CiAgICAvLyBgc2VsZWN0ZWRPcHRpb25gIGlzIHNldCB0byB0aGUgYGNvbXB1dGF0aW9uYCByZXN1bHQgd2hlbmV2ZXIgdGhpcyBgc291cmNlYCBjaGFuZ2VzLgogICAgc291cmNlOiB0aGlzLnNoaXBwaW5nT3B0aW9ucywKICAgIGNvbXB1dGF0aW9uOiAobmV3T3B0aW9ucywgcHJldmlvdXMpID0+IHsKICAgICAgLy8gSWYgdGhlIG5ld09wdGlvbnMgY29udGFpbiB0aGUgcHJldmlvdXNseSBzZWxlY3RlZCBvcHRpb24sIHByZXNlcnZlIHRoYXQgc2VsZWN0aW9uLgogICAgICAvLyBPdGhlcndpc2UsIGRlZmF1bHQgdG8gdGhlIGZpcnN0IG9wdGlvbi4KICAgICAgY29uc29sZS5sb2cobmV3T3B0aW9ucywgcHJldmlvdXMpOwogICAgICByZXR1cm4gbmV3T3B0aW9ucy5maW5kKChvcHQpID0+IG9wdC5pZCA9PT0gcHJldmlvdXM\/LnZhbHVlLmlkKSA\/PyBuZXdPcHRpb25zWzBdOwogICAgfSwKICB9KTsKICBwcm90ZWN0ZWQgdXNlcnM6IFNpZ25hbDxVc2VyRHRvW10+ID0gc2lnbmFsKFtdKTsKICBwcml2YXRlIGluamVjdG9yID0gaW5qZWN0KEluamVjdG9yKTsKCiAgcHVibGljIG5nT25Jbml0KCkgewogICAgdGhpcy51c2VycyA9IHRvU2lnbmFsKHRoaXMudXNlclNlcnZpY2UuZ2V0VXNlcnMoKSwgewogICAgICBpbml0aWFsVmFsdWU6IFtdLAogICAgICBpbmplY3RvcjogdGhpcy5pbmplY3RvciwKICAgIH0pOwogIH0KCiAgcHJvdGVjdGVkIGNoYW5nZURhdGEoKSB7CiAgICAvLyB0aGlzLm15QWdlLnNldCgzNik7CiAgICB0aGlzLm15QWdlLnVwZGF0ZSgoYWdlKSA9PiBhZ2UgKyAxKTsKCiAgICB0aGlzLnNlbGVjdGVkT3B0aW9uLnNldCh7IGlkOiAxLCBuYW1lOiAnUGlkZ2luJyB9KTsKICB9Cn0K&#8221; copy_button=&#8221;on&#8221; copy_button_tooltip=&#8221;Copy code&#8221; _builder_version=&#8221;4.27.6&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;][\/et_pb_dmb_code_snippet][et_pb_dmb_code_snippet title=&#8221;app.html&#8221; code=&#8221;PGhlYWRlcj4KICA8bWF0LXRvb2xiYXIgY29sb3I9InByaW1hcnkiPgogICAgPHNwYW4+TXkgQXBwPC9zcGFuPgogIDwvbWF0LXRvb2xiYXI+CjwvaGVhZGVyPgoKPHA+QXBwIHRpdGxlOiB7e3RpdGxlfX08L3A+Cgo8cD5NeSBhZ2U6IHt7bXlBZ2UoKX19PC9wPgoKPHA+UGVyc29uYWwgaW5mbyB7e3BlcnNvbmFsSW5mbygpfX08L3A+Cgo8cD5TZWxlY3RlZCBza2lsbDoge3tzZWxlY3RlZE9wdGlvbigpLm5hbWV9fTwvcD4KCjwhLS08cD57e3VzZXJzKCkgfCBqc29ufX08L3A+LS0+CgoKPHA+CiAgPGJ1dHRvbiAoY2xpY2spPSJjaGFuZ2VEYXRhKCkiPkNoYW5nZTwvYnV0dG9uPgo8L3A+CgoKPGFwcC11c2VyLWNhcmQgW2FnZV09Im15QWdlKCkiPjwvYXBwLXVzZXItY2FyZD4K&#8221; copy_button=&#8221;on&#8221; copy_button_tooltip=&#8221;Copy code&#8221; _builder_version=&#8221;4.27.6&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;][\/et_pb_dmb_code_snippet][et_pb_dmb_code_snippet title=&#8221;user-card.ts&#8221; code=&#8221;aW1wb3J0IHsgQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3ksIENvbXBvbmVudCwgaW5wdXQsIElucHV0LCBJbnB1dFNpZ25hbCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnOwoKQENvbXBvbmVudCh7CiAgc2VsZWN0b3I6ICdhcHAtdXNlci1jYXJkJywKICBpbXBvcnRzOiBbXSwKICB0ZW1wbGF0ZVVybDogJy4vdXNlci1jYXJkLmh0bWwnLAogIHN0eWxlVXJsOiAnLi91c2VyLWNhcmQuc2NzcycsCiAgY2hhbmdlRGV0ZWN0aW9uOiBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneS5PblB1c2gsCn0pCmV4cG9ydCBjbGFzcyBVc2VyQ2FyZCB7CgogIHB1YmxpYyBhZ2U6IElucHV0U2lnbmFsPG51bWJlcj4gPSBpbnB1dDxudW1iZXI+KDApOwoKCn0K&#8221; copy_button=&#8221;on&#8221; copy_button_tooltip=&#8221;Copy code&#8221; _builder_version=&#8221;4.27.6&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;][\/et_pb_dmb_code_snippet][et_pb_dmb_code_snippet title=&#8221;user-card.html&#8221; code=&#8221;PHA+aW5wdXQgYWdlOiB7e2FnZSgpfX08L3A+Cg==&#8221; copy_button=&#8221;on&#8221; copy_button_tooltip=&#8221;Copy code&#8221; _builder_version=&#8221;4.27.6&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;][\/et_pb_dmb_code_snippet][et_pb_comments _builder_version=&#8221;4.21.2&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;][\/et_pb_comments][\/et_pb_column][\/et_pb_row][\/et_pb_section]<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In this video, we\u2019ll explore Angular signals. They\u2019re a major update to Angular\u2019s reactivity model that makes it easier to track changes in components and improves overall application performanceA signal is just a wrapper around a value. Creating a signal is straightforward (see the code example below). To get the signal\u2019s value in a template, [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_et_pb_use_builder":"on","_et_pb_old_content":"","_et_gb_content_width":"","footnotes":""},"categories":[256,219],"tags":[],"class_list":["post-36846","post","type-post","status-publish","format-standard","hentry","category-javascript","category-tutorials"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.5 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Signals in Angular - Kamil Abzalov&#039;s site<\/title>\n<meta name=\"description\" content=\"Angular Signals are a new approach to reactivity. In this article, we\u2019ll explore how they work and why you should start using them in your projects today.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kamil-abzalov.com\/en\/tutorials\/javascript\/signals-in-angular\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Signals in Angular\" \/>\n<meta property=\"og:description\" content=\"Angular Signals are a new approach to reactivity. In this article, we\u2019ll explore how they work and why you should start using them in your projects today.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kamil-abzalov.com\/en\/tutorials\/javascript\/signals-in-angular\/\" \/>\n<meta property=\"og:site_name\" content=\"\u0441\u0430\u0439\u0442 \u041a\u0430\u043c\u0438\u043b\u044f \u0410\u0431\u0437\u0430\u043b\u043e\u0432\u0430\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/kamabzalov\" \/>\n<meta property=\"article:published_time\" content=\"2026-05-03T16:45:21+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-05-03T16:57:29+00:00\" \/>\n<meta name=\"author\" content=\"Kamil&#039; Abzalov\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@kamabzalov\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Kamil&#039; Abzalov\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/kamil-abzalov.com\\\/en\\\/tutorials\\\/javascript\\\/signals-in-angular\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/kamil-abzalov.com\\\/en\\\/tutorials\\\/javascript\\\/signals-in-angular\\\/\"},\"author\":{\"name\":\"Kamil' Abzalov\",\"@id\":\"https:\\\/\\\/kamil-abzalov.com\\\/#\\\/schema\\\/person\\\/9c53360f21b83306ba40c2231573c600\"},\"headline\":\"Signals in Angular\",\"datePublished\":\"2026-05-03T16:45:21+00:00\",\"dateModified\":\"2026-05-03T16:57:29+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/kamil-abzalov.com\\\/en\\\/tutorials\\\/javascript\\\/signals-in-angular\\\/\"},\"wordCount\":1921,\"commentCount\":0,\"articleSection\":[\"JavaScript\",\"Tutorials\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/kamil-abzalov.com\\\/en\\\/tutorials\\\/javascript\\\/signals-in-angular\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/kamil-abzalov.com\\\/en\\\/tutorials\\\/javascript\\\/signals-in-angular\\\/\",\"url\":\"https:\\\/\\\/kamil-abzalov.com\\\/en\\\/tutorials\\\/javascript\\\/signals-in-angular\\\/\",\"name\":\"Signals in Angular - Kamil Abzalov's site\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/kamil-abzalov.com\\\/#website\"},\"datePublished\":\"2026-05-03T16:45:21+00:00\",\"dateModified\":\"2026-05-03T16:57:29+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/kamil-abzalov.com\\\/#\\\/schema\\\/person\\\/9c53360f21b83306ba40c2231573c600\"},\"description\":\"Angular Signals are a new approach to reactivity. In this article, we\u2019ll explore how they work and why you should start using them in your projects today.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/kamil-abzalov.com\\\/en\\\/tutorials\\\/javascript\\\/signals-in-angular\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/kamil-abzalov.com\\\/en\\\/tutorials\\\/javascript\\\/signals-in-angular\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/kamil-abzalov.com\\\/en\\\/tutorials\\\/javascript\\\/signals-in-angular\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"\u0413\u043b\u0430\u0432\u043d\u0430\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430\",\"item\":\"https:\\\/\\\/kamil-abzalov.com\\\/en\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Signals in Angular\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/kamil-abzalov.com\\\/#website\",\"url\":\"https:\\\/\\\/kamil-abzalov.com\\\/\",\"name\":\"\u0441\u0430\u0439\u0442 \u041a\u0430\u043c\u0438\u043b\u044f \u0410\u0431\u0437\u0430\u043b\u043e\u0432\u0430\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/kamil-abzalov.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/kamil-abzalov.com\\\/#\\\/schema\\\/person\\\/9c53360f21b83306ba40c2231573c600\",\"name\":\"Kamil' Abzalov\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/3ad2daebcb3a4d03f8573b49054a003cd26a151ecc58ccfccc75b823131d1ead?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/3ad2daebcb3a4d03f8573b49054a003cd26a151ecc58ccfccc75b823131d1ead?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/3ad2daebcb3a4d03f8573b49054a003cd26a151ecc58ccfccc75b823131d1ead?s=96&d=mm&r=g\",\"caption\":\"Kamil' Abzalov\"},\"sameAs\":[\"https:\\\/\\\/kamil-abzalov.com\\\/\",\"https:\\\/\\\/www.facebook.com\\\/kamabzalov\",\"https:\\\/\\\/www.linkedin.com\\\/in\\\/kamabzalov\",\"https:\\\/\\\/x.com\\\/kamabzalov\",\"https:\\\/\\\/www.youtube.com\\\/user\\\/kamabzalov\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Signals in Angular - Kamil Abzalov's site","description":"Angular Signals are a new approach to reactivity. In this article, we\u2019ll explore how they work and why you should start using them in your projects today.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/kamil-abzalov.com\/en\/tutorials\/javascript\/signals-in-angular\/","og_locale":"en_US","og_type":"article","og_title":"Signals in Angular","og_description":"Angular Signals are a new approach to reactivity. In this article, we\u2019ll explore how they work and why you should start using them in your projects today.","og_url":"https:\/\/kamil-abzalov.com\/en\/tutorials\/javascript\/signals-in-angular\/","og_site_name":"\u0441\u0430\u0439\u0442 \u041a\u0430\u043c\u0438\u043b\u044f \u0410\u0431\u0437\u0430\u043b\u043e\u0432\u0430","article_author":"https:\/\/www.facebook.com\/kamabzalov","article_published_time":"2026-05-03T16:45:21+00:00","article_modified_time":"2026-05-03T16:57:29+00:00","author":"Kamil' Abzalov","twitter_card":"summary_large_image","twitter_creator":"@kamabzalov","twitter_misc":{"Written by":"Kamil' Abzalov","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kamil-abzalov.com\/en\/tutorials\/javascript\/signals-in-angular\/#article","isPartOf":{"@id":"https:\/\/kamil-abzalov.com\/en\/tutorials\/javascript\/signals-in-angular\/"},"author":{"name":"Kamil' Abzalov","@id":"https:\/\/kamil-abzalov.com\/#\/schema\/person\/9c53360f21b83306ba40c2231573c600"},"headline":"Signals in Angular","datePublished":"2026-05-03T16:45:21+00:00","dateModified":"2026-05-03T16:57:29+00:00","mainEntityOfPage":{"@id":"https:\/\/kamil-abzalov.com\/en\/tutorials\/javascript\/signals-in-angular\/"},"wordCount":1921,"commentCount":0,"articleSection":["JavaScript","Tutorials"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kamil-abzalov.com\/en\/tutorials\/javascript\/signals-in-angular\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kamil-abzalov.com\/en\/tutorials\/javascript\/signals-in-angular\/","url":"https:\/\/kamil-abzalov.com\/en\/tutorials\/javascript\/signals-in-angular\/","name":"Signals in Angular - Kamil Abzalov's site","isPartOf":{"@id":"https:\/\/kamil-abzalov.com\/#website"},"datePublished":"2026-05-03T16:45:21+00:00","dateModified":"2026-05-03T16:57:29+00:00","author":{"@id":"https:\/\/kamil-abzalov.com\/#\/schema\/person\/9c53360f21b83306ba40c2231573c600"},"description":"Angular Signals are a new approach to reactivity. In this article, we\u2019ll explore how they work and why you should start using them in your projects today.","breadcrumb":{"@id":"https:\/\/kamil-abzalov.com\/en\/tutorials\/javascript\/signals-in-angular\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kamil-abzalov.com\/en\/tutorials\/javascript\/signals-in-angular\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/kamil-abzalov.com\/en\/tutorials\/javascript\/signals-in-angular\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"\u0413\u043b\u0430\u0432\u043d\u0430\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430","item":"https:\/\/kamil-abzalov.com\/en\/"},{"@type":"ListItem","position":2,"name":"Signals in Angular"}]},{"@type":"WebSite","@id":"https:\/\/kamil-abzalov.com\/#website","url":"https:\/\/kamil-abzalov.com\/","name":"\u0441\u0430\u0439\u0442 \u041a\u0430\u043c\u0438\u043b\u044f \u0410\u0431\u0437\u0430\u043b\u043e\u0432\u0430","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kamil-abzalov.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/kamil-abzalov.com\/#\/schema\/person\/9c53360f21b83306ba40c2231573c600","name":"Kamil' Abzalov","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/3ad2daebcb3a4d03f8573b49054a003cd26a151ecc58ccfccc75b823131d1ead?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/3ad2daebcb3a4d03f8573b49054a003cd26a151ecc58ccfccc75b823131d1ead?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/3ad2daebcb3a4d03f8573b49054a003cd26a151ecc58ccfccc75b823131d1ead?s=96&d=mm&r=g","caption":"Kamil' Abzalov"},"sameAs":["https:\/\/kamil-abzalov.com\/","https:\/\/www.facebook.com\/kamabzalov","https:\/\/www.linkedin.com\/in\/kamabzalov","https:\/\/x.com\/kamabzalov","https:\/\/www.youtube.com\/user\/kamabzalov"]}]}},"_links":{"self":[{"href":"https:\/\/kamil-abzalov.com\/en\/wp-json\/wp\/v2\/posts\/36846","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kamil-abzalov.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kamil-abzalov.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kamil-abzalov.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/kamil-abzalov.com\/en\/wp-json\/wp\/v2\/comments?post=36846"}],"version-history":[{"count":7,"href":"https:\/\/kamil-abzalov.com\/en\/wp-json\/wp\/v2\/posts\/36846\/revisions"}],"predecessor-version":[{"id":36865,"href":"https:\/\/kamil-abzalov.com\/en\/wp-json\/wp\/v2\/posts\/36846\/revisions\/36865"}],"wp:attachment":[{"href":"https:\/\/kamil-abzalov.com\/en\/wp-json\/wp\/v2\/media?parent=36846"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kamil-abzalov.com\/en\/wp-json\/wp\/v2\/categories?post=36846"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kamil-abzalov.com\/en\/wp-json\/wp\/v2\/tags?post=36846"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}