[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: rendering a data table and creating a user page.” content_max_width=”640px” _builder_version=”4.27.6″ 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%” 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”][\/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.6″ 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.6″ 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 continue building our first Angular application. In the previous lesson<\/a> we added a data table with mock data. In this lesson we will use real data and create a user page. [\/et_pb_text][et_pb_video src=”https:\/\/youtu.be\/bs1c5JX9AHU” _builder_version=”4.27.6″ global_colors_info=”{}”][\/et_pb_video][et_pb_dmb_code_snippet title=”users.html” code=”QGxldCB1c2VycyA9IHVzZXJzJCB8IGFzeW5jOwoKQGlmICh1c2VycykgewogIDx0YWJsZSBtYXQtdGFibGUgW2RhdGFTb3VyY2VdPSJ1c2VycyI+CgogICAgPG5nLWNvbnRhaW5lciBtYXRDb2x1bW5EZWY9Im5hbWUiPgogICAgICAgICAgPHRoIG1hdC1oZWFkZXItY2VsbCAqbWF0SGVhZGVyQ2VsbERlZj5Vc2VyIG5hbWU8L3RoPgogICAgICAgICAgPHRkIG1hdC1jZWxsICptYXRDZWxsRGVmPSJsZXQgZWxlbWVudCI+CiAgICAgICAgICAgIDxhIFtyb3V0ZXJMaW5rXT0iWyd1c2VycycsIGVsZW1lbnQuaWRdIj57e2VsZW1lbnQubmFtZX19PC9hPgogICAgICAgICAgPC90ZD4KICAgIDwvbmctY29udGFpbmVyPgoKICAgIDxuZy1jb250YWluZXIgbWF0Q29sdW1uRGVmPSJlbWFpbCI+CiAgICAgICAgICA8dGggbWF0LWhlYWRlci1jZWxsICptYXRIZWFkZXJDZWxsRGVmPlVzZXIgZW1haWw8L3RoPgogICAgICAgICAgPHRkIG1hdC1jZWxsICptYXRDZWxsRGVmPSJsZXQgZWxlbWVudCI+e3tlbGVtZW50LmVtYWlsfX08L3RkPgogICAgPC9uZy1jb250YWluZXI+CgoKICAgIDxuZy1jb250YWluZXIgbWF0Q29sdW1uRGVmPSJwaG9uZSI+CiAgICAgICAgICA8dGggbWF0LWhlYWRlci1jZWxsICptYXRIZWFkZXJDZWxsRGVmPlVzZXIgcGhvbmU8L3RoPgogICAgICAgICAgPHRkIG1hdC1jZWxsICptYXRDZWxsRGVmPSJsZXQgZWxlbWVudCI+e3tlbGVtZW50LnBob25lfX08L3RkPgogICAgPC9uZy1jb250YWluZXI+CgoKICAgIDx0ciBtYXQtaGVhZGVyLXJvdyAqbWF0SGVhZGVyUm93RGVmPSJkaXNwbGF5ZWRDb2x1bW5zIj48L3RyPgogICAgPHRyIG1hdC1yb3cgKm1hdFJvd0RlZj0ibGV0IHJvdzsgY29sdW1uczogZGlzcGxheWVkQ29sdW1uczsiPjwvdHI+CiAgPC90YWJsZT4KfQo=” copy_button=”on” copy_button_tooltip=”Copy code” _builder_version=”4.27.6″ _module_preset=”default” global_colors_info=”{}”][\/et_pb_dmb_code_snippet][et_pb_dmb_code_snippet title=”user.ts” code=”aW1wb3J0IHtDb21wb25lbnQsIGluamVjdCwgT25Jbml0fSBmcm9tICdAYW5ndWxhci9jb3JlJzsKaW1wb3J0IHtVc2Vyc1NlcnZpY2V9IGZyb20gJy4uLy4uL3NlcnZpY2VzL3VzZXJzLXNlcnZpY2UnOwppbXBvcnQge0FjdGl2YXRlZFJvdXRlfSBmcm9tICdAYW5ndWxhci9yb3V0ZXInOwoKQENvbXBvbmVudCh7CiAgc2VsZWN0b3I6ICdhcHAtdXNlcicsCiAgaW1wb3J0czogW10sCiAgdGVtcGxhdGVVcmw6ICcuL3VzZXIuaHRtbCcsCiAgc3R5bGVVcmw6ICcuL3VzZXIuc2NzcycsCn0pCmV4cG9ydCBjbGFzcyBVc2VyIGltcGxlbWVudHMgT25Jbml0ewoKICBwcml2YXRlIHVzZXJzID0gaW5qZWN0KFVzZXJzU2VydmljZSk7CiAgcHJpdmF0ZSByb3V0ZSA9IGluamVjdChBY3RpdmF0ZWRSb3V0ZSk7CgogIHB1YmxpYyBuZ09uSW5pdCgpIHsKICAgIGNvbnN0IHVzZXJJZCA9IHRoaXMucm91dGUuc25hcHNob3QucGFyYW1zWydpZCddOwogIH0KCn0K” copy_button=”on” copy_button_tooltip=”Copy code” _builder_version=”4.27.6″ _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 continue building our first Angular application. In the previous lesson we added a data table with mock data. In this lesson we will use real data and create a user page.As homework, try to explore Angular resolvers.<\/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-36696","post","type-post","status-publish","format-standard","hentry","category-javascript","category-tutorials"],"yoast_head":"\n
As homework, try to explore Angular resolvers<\/a>.<\/p>\n