[et_pb_section fb_built=”1″ fullwidth=”on” admin_label=”Header” _builder_version=”4.20.0″ use_background_color_gradient=”on” background_color_gradient_direction=”163deg” background_color_gradient_stops=”rgba(0,0,0,0.02) 50%|#ffffff 50%” background_color_gradient_start=”rgba(0,0,0,0.02)” background_color_gradient_start_position=”50%” background_color_gradient_end=”#ffffff” background_color_gradient_end_position=”0%” background_image=”https:\/\/kamil-abzalov.com\/wp-content\/uploads\/2021\/12\/web-dev-03.png” parallax=”on” animation_style=”fade” collapsed=”off” global_colors_info=”{}”][et_pb_fullwidth_header title=”Creating your first angular application: getting data from a backend and displaying it in an angular material table” content_max_width=”640px” _builder_version=”4.27.5″ title_font=”Roboto|700|||||||” title_line_height=”1.5em” content_font=”Roboto||||||||” content_font_size=”16px” content_line_height=”2em” subhead_font=”|700||on|||||” subhead_font_size=”14px” subhead_letter_spacing=”2px” subhead_line_height=”2em” background_color=”rgba(0,0,0,0)” custom_button_one=”on” button_one_text_size=”14px” button_one_text_color=”#ffffff” button_one_bg_color=”#0054ff” button_one_border_width=”14px” button_one_border_color=”rgba(0,0,0,0)” button_one_border_radius=”0px” button_one_letter_spacing=”2px” button_one_font=”|600||on|||||” button_one_icon=”9||divi||400″ button_one_on_hover=”off” custom_button_two=”on” button_two_text_size=”14px” button_two_text_color=”#0054ff” button_two_bg_color=”rgba(255,255,255,0)” button_two_border_width=”12px” button_two_border_color=”rgba(0,0,0,0)” button_two_border_radius=”0px” button_two_letter_spacing=”2px” button_two_font=”|600||on|||||” button_two_icon=”9||divi||400″ button_two_on_hover=”off” background_layout=”light” custom_margin=”|||” custom_padding=”6vw||6vw||false|false” animation_style=”zoom” animation_intensity_zoom=”-5%” hover_enabled=”0″ title_font_size_tablet=”” title_font_size_phone=”25px” title_font_size_last_edited=”on|desktop” box_shadow_style_button_two=”preset1″ box_shadow_vertical_button_two=”0px” box_shadow_blur_button_two=”0px” box_shadow_spread_button_two=”2px” box_shadow_color_button_two=”#0054ff” button_one_letter_spacing_hover=”2px” button_two_letter_spacing_hover=”2px” global_colors_info=”{}” button_one_text_size__hover_enabled=”off” button_two_text_size__hover_enabled=”off” button_one_text_color__hover_enabled=”off” button_two_text_color__hover_enabled=”off” button_one_border_width__hover_enabled=”off” button_two_border_width__hover_enabled=”off” button_one_border_color__hover_enabled=”off” button_two_border_color__hover_enabled=”off” button_one_border_radius__hover_enabled=”off” button_two_border_radius__hover_enabled=”off” button_one_letter_spacing__hover_enabled=”on” button_one_letter_spacing__hover=”2px” button_two_letter_spacing__hover_enabled=”on” button_two_letter_spacing__hover=”2px” button_one_bg_color__hover_enabled=”off” button_two_bg_color__hover_enabled=”off” sticky_enabled=”0″][\/et_pb_fullwidth_header][\/et_pb_section][et_pb_section fb_built=”1″ _builder_version=”4.21.2″ _module_preset=”default” collapsed=”off” global_colors_info=”{}”][et_pb_row _builder_version=”4.21.2″ _module_preset=”default” global_colors_info=”{}”][et_pb_column type=”4_4″ _builder_version=”4.21.2″ _module_preset=”default” global_colors_info=”{}”][et_pb_dcsbcm_divi_breadcrumbs_module homebreadcrumbtext=”Home” hide_currentbreadcrumb=”off” _builder_version=”4.27.5″ fontsbreadcrumbs_font_size_tablet=”51″ fontsbreadcrumbs_line_height_tablet=”2″ fontsseperator_font_size_tablet=”51″ fontsseperator_line_height_tablet=”2″ fontsbreadcrumblinks_font_size_tablet=”51″ fontsbreadcrumblinks_line_height_tablet=”2″ z_index_tablet=”500″ fontsbreadcrumbs_text_shadow_horizontal_length_tablet=”0px” fontsbreadcrumbs_text_shadow_vertical_length_tablet=”0px” fontsbreadcrumbs_text_shadow_blur_strength_tablet=”1px” fontsseperator_text_shadow_horizontal_length_tablet=”0px” fontsseperator_text_shadow_vertical_length_tablet=”0px” fontsseperator_text_shadow_blur_strength_tablet=”1px” fontsbreadcrumblinks_text_shadow_horizontal_length_tablet=”0px” fontsbreadcrumblinks_text_shadow_vertical_length_tablet=”0px” fontsbreadcrumblinks_text_shadow_blur_strength_tablet=”1px” box_shadow_horizontal_tablet=”0px” box_shadow_vertical_tablet=”0px” box_shadow_blur_tablet=”40px” box_shadow_spread_tablet=”0px” global_colors_info=”{}”][\/et_pb_dcsbcm_divi_breadcrumbs_module][et_pb_text _builder_version=”4.27.5″ z_index_tablet=”500″ text_text_shadow_horizontal_length_tablet=”0px” text_text_shadow_vertical_length_tablet=”0px” text_text_shadow_blur_strength_tablet=”1px” link_text_shadow_horizontal_length_tablet=”0px” link_text_shadow_vertical_length_tablet=”0px” link_text_shadow_blur_strength_tablet=”1px” ul_text_shadow_horizontal_length_tablet=”0px” ul_text_shadow_vertical_length_tablet=”0px” ul_text_shadow_blur_strength_tablet=”1px” ol_text_shadow_horizontal_length_tablet=”0px” ol_text_shadow_vertical_length_tablet=”0px” ol_text_shadow_blur_strength_tablet=”1px” quote_text_shadow_horizontal_length_tablet=”0px” quote_text_shadow_vertical_length_tablet=”0px” quote_text_shadow_blur_strength_tablet=”1px” header_text_shadow_horizontal_length_tablet=”0px” header_text_shadow_vertical_length_tablet=”0px” header_text_shadow_blur_strength_tablet=”1px” header_2_text_shadow_horizontal_length_tablet=”0px” header_2_text_shadow_vertical_length_tablet=”0px” header_2_text_shadow_blur_strength_tablet=”1px” header_3_text_shadow_horizontal_length_tablet=”0px” header_3_text_shadow_vertical_length_tablet=”0px” header_3_text_shadow_blur_strength_tablet=”1px” header_4_text_shadow_horizontal_length_tablet=”0px” header_4_text_shadow_vertical_length_tablet=”0px” header_4_text_shadow_blur_strength_tablet=”1px” header_5_text_shadow_horizontal_length_tablet=”0px” header_5_text_shadow_vertical_length_tablet=”0px” header_5_text_shadow_blur_strength_tablet=”1px” header_6_text_shadow_horizontal_length_tablet=”0px” header_6_text_shadow_vertical_length_tablet=”0px” header_6_text_shadow_blur_strength_tablet=”1px” box_shadow_horizontal_tablet=”0px” box_shadow_vertical_tablet=”0px” box_shadow_blur_tablet=”40px” box_shadow_spread_tablet=”0px” global_colors_info=”{}”]<\/p>\n
We\u2019re continuing to develop our first Angular application. In this tutorial, we will fetch data from a backend (https:\/\/jsonplaceholder.typicode.com<\/a>) [\/et_pb_text][et_pb_video src=”https:\/\/www.youtube.com\/watch?v=LCwwyMtzE1U” _builder_version=”4.27.5″ hover_enabled=”0″ global_colors_info=”{}” sticky_enabled=”0″][\/et_pb_video][et_pb_dmb_code_snippet title=”users-service.ts” code=”aW1wb3J0IHsgSW5qZWN0YWJsZSB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnOwppbXBvcnQge0h0dHBDbGllbnR9IGZyb20gJ0Bhbmd1bGFyL2NvbW1vbi9odHRwJzsKaW1wb3J0IHtPYnNlcnZhYmxlfSBmcm9tICdyeGpzJzsKaW1wb3J0IHtVc2VyfSBmcm9tICcuLi8uLi9jb3JlL21vZGVscy9Vc2VyJzsKCkBJbmplY3RhYmxlKHsKICBwcm92aWRlZEluOiAncm9vdCcsCn0pCmV4cG9ydCBjbGFzcyBVc2Vyc1NlcnZpY2UgewoKICBwcml2YXRlIHJlYWRvbmx5IGFwaSA9ICdodHRwczovL2pzb25wbGFjZWhvbGRlci50eXBpY29kZS5jb20vJwoKICBjb25zdHJ1Y3Rvcihwcml2YXRlIGh0dHA6IEh0dHBDbGllbnQpIHsKICB9CgogIGdldFVzZXJzKCk6IE9ic2VydmFibGU8VXNlcltdPiB7CiAgICAgIHJldHVybiB0aGlzLmh0dHAuZ2V0PFVzZXJbXT4oYCR7dGhpcy5hcGl9L3VzZXJzYCk7CiAgfQoKfQo=” copy_button=”on” copy_button_tooltip=”Copy code” _builder_version=”4.27.5″ _module_preset=”default” global_colors_info=”{}”][\/et_pb_dmb_code_snippet][et_pb_dmb_code_snippet title=”users.ts” code=”aW1wb3J0IHtDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneSwgQ29tcG9uZW50LCBpbmplY3QsIE9uSW5pdH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7CmltcG9ydCB7VXNlcnNTZXJ2aWNlfSBmcm9tICcuLi8uLi9zZXJ2aWNlcy91c2Vycy1zZXJ2aWNlJzsKaW1wb3J0IHtPYnNlcnZhYmxlLCBvZn0gZnJvbSAncnhqcyc7CmltcG9ydCB7QXN5bmNQaXBlLCBKc29uUGlwZX0gZnJvbSAnQGFuZ3VsYXIvY29tbW9uJzsKaW1wb3J0IHsKICBNYXRDZWxsLAogIE1hdENlbGxEZWYsCiAgTWF0Q29sdW1uRGVmLAogIE1hdEhlYWRlckNlbGwsCiAgTWF0SGVhZGVyQ2VsbERlZiwgTWF0SGVhZGVyUm93LAogIE1hdEhlYWRlclJvd0RlZiwgTWF0Um93LCBNYXRSb3dEZWYsCiAgTWF0VGFibGUKfSBmcm9tICdAYW5ndWxhci9tYXRlcmlhbC90YWJsZSc7CmltcG9ydCB7VXNlcn0gZnJvbSAnLi4vLi4vLi4vY29yZS9tb2RlbHMvVXNlcic7Cgpjb25zdCBFTEVNRU5UX0RBVEEgPSBbCiAge3Bvc2l0aW9uOiAxLCBuYW1lOiAnSHlkcm9nZW4nLCB3ZWlnaHQ6IDEuMDA3OSwgc3ltYm9sOiAnSCd9LAogIHtwb3NpdGlvbjogMiwgbmFtZTogJ0hlbGl1bScsIHdlaWdodDogNC4wMDI2LCBzeW1ib2w6ICdIZSd9LAogIHtwb3NpdGlvbjogMywgbmFtZTogJ0xpdGhpdW0nLCB3ZWlnaHQ6IDYuOTQxLCBzeW1ib2w6ICdMaSd9LAogIHtwb3NpdGlvbjogNCwgbmFtZTogJ0JlcnlsbGl1bScsIHdlaWdodDogOS4wMTIyLCBzeW1ib2w6ICdCZSd9LAogIHtwb3NpdGlvbjogNSwgbmFtZTogJ0Jvcm9uJywgd2VpZ2h0OiAxMC44MTEsIHN5bWJvbDogJ0InfSwKICB7cG9zaXRpb246IDYsIG5hbWU6ICdDYXJib24nLCB3ZWlnaHQ6IDEyLjAxMDcsIHN5bWJvbDogJ0MnfSwKICB7cG9zaXRpb246IDcsIG5hbWU6ICdOaXRyb2dlbicsIHdlaWdodDogMTQuMDA2Nywgc3ltYm9sOiAnTid9LAogIHtwb3NpdGlvbjogOCwgbmFtZTogJ094eWdlbicsIHdlaWdodDogMTUuOTk5NCwgc3ltYm9sOiAnTyd9LAogIHtwb3NpdGlvbjogOSwgbmFtZTogJ0ZsdW9yaW5lJywgd2VpZ2h0OiAxOC45OTg0LCBzeW1ib2w6ICdGJ30sCiAge3Bvc2l0aW9uOiAxMCwgbmFtZTogJ05lb24nLCB3ZWlnaHQ6IDIwLjE3OTcsIHN5bWJvbDogJ05lJ30sCl07CgpAQ29tcG9uZW50KHsKICBzZWxlY3RvcjogJ2FwcC11c2VycycsCiAgdGVtcGxhdGVVcmw6ICcuL3VzZXJzLmh0bWwnLAogIHN0eWxlVXJsOiAnLi91c2Vycy5zY3NzJywKICBpbXBvcnRzOiBbQXN5bmNQaXBlLCBKc29uUGlwZSwgTWF0SGVhZGVyUm93RGVmLCBNYXRUYWJsZSwgTWF0SGVhZGVyQ2VsbCwgTWF0SGVhZGVyQ2VsbERlZiwgTWF0SGVhZGVyQ2VsbERlZiwgTWF0Q29sdW1uRGVmLCBNYXRDZWxsRGVmLCBNYXRDZWxsLCBNYXRIZWFkZXJSb3csIE1hdFJvd0RlZiwgTWF0Um93XQp9KQpleHBvcnQgY2xhc3MgVXNlcnMgaW1wbGVtZW50cyBPbkluaXR7CgogIHByb3RlY3RlZCB1c2VycyQ6IE9ic2VydmFibGU8VXNlcltdPiA9IG9mKFtdKTsKCiAgcHJpdmF0ZSB1c2VycyA9IGluamVjdChVc2Vyc1NlcnZpY2UpOwoKICBwcm90ZWN0ZWQgZGlzcGxheWVkQ29sdW1uczogc3RyaW5nW10gPSBbJ25hbWUnLCAnZW1haWwnLCAncGhvbmUnXTsKICBkYXRhU291cmNlID0gRUxFTUVOVF9EQVRBOwoKICBuZ09uSW5pdCgpOiB2b2lkIHsKICAgIHRoaXMudXNlcnMkID0gdGhpcy51c2Vycy5nZXRVc2VycygpOwogIH0KfQo=” copy_button=”on” copy_button_tooltip=”Copy code” _builder_version=”4.27.5″ _module_preset=”default” global_colors_info=”{}”][\/et_pb_dmb_code_snippet][et_pb_comments _builder_version=”4.21.2″ _module_preset=”default” global_colors_info=”{}”][\/et_pb_comments][\/et_pb_column][\/et_pb_row][\/et_pb_section]<\/p>\n","protected":false},"excerpt":{"rendered":" We\u2019re continuing to develop our first Angular application. In this tutorial, we will fetch data from a backend (https:\/\/jsonplaceholder.typicode.com)\u00a0and display it in an Angular Material table.<\/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-36670","post","type-post","status-publish","format-standard","hentry","category-javascript","category-tutorials"],"yoast_head":"\n
\u00a0and display it in an Angular Material table<\/a>.<\/p>\n