{"id":142321,"date":"2021-03-19T10:38:57","date_gmt":"2021-03-19T10:38:57","guid":{"rendered":"https:\/\/devdays.lt\/?page_id=142321"},"modified":"2021-03-23T15:15:17","modified_gmt":"2021-03-23T15:15:17","slug":"ngrx-state-management-in-angular","status":"publish","type":"page","link":"https:\/\/devdays.lt\/ngrx-state-management-in-angular\/","title":{"rendered":"NgRxState Management in Angular"},"content":{"rendered":"

[et_pb_section fb_built=”1″ _builder_version=”4.9.0″ _module_preset=”default” custom_padding=”0px||0px||true|” global_module=”142342″][et_pb_row module_id=”sticky” _builder_version=”4.9.0″ _module_preset=”default” background_color=”#fc5a1b” width=”100%” max_width=”2560px” custom_padding=”16px||16px||true|”][et_pb_column type=”4_4″ _builder_version=”4.9.0″ _module_preset=”default”][et_pb_text _builder_version=”4.9.0″ _module_preset=”default” link_font=”|600|||||||” link_text_color=”#FFFFFF” link_font_size=”20px” link_font_size__hover_enabled=”on|hover” link_font_size__hover=”21px”]<\/p>\n

Easter Offer: Get 3 For 2 tickets here!<\/a><\/p>\n

[\/et_pb_text][\/et_pb_column][\/et_pb_row][\/et_pb_section][et_pb_section fb_built=”1″ fullwidth=”on” disabled_on=”on|on|off” admin_label=”Home” module_id=”Home” _builder_version=”4.0.6″ background_enable_color=”off” use_background_color_gradient=”on” background_color_gradient_start=”rgba(10,30,96,0.5)” background_color_gradient_end=”rgba(10,30,96,0.5)” background_color_gradient_overlays_image=”on” background_image=”https:\/\/devdays.lt\/wp-content\/uploads\/2020\/01\/devd-201-1368×855-1.jpg” custom_margin=”0px|0px|0px|0px” bottom_divider_style=”arrow2″ bottom_divider_color=”#ffffff” bottom_divider_height=”50px” bottom_divider_flip=”vertical” global_module=”137943″][et_pb_fullwidth_header text_orientation=”center” background_overlay_color=”rgba(0,43,94,0.63)” _builder_version=”4.4.2″ title_font=”|700|||||||” title_text_color=”#ffffff” title_font_size=”55px” background_color=”rgba(255, 255, 255, 0)” custom_button_one=”on” button_one_text_color=”#509af5″ button_one_bg_color=”#ffffff” button_one_border_color=”#ffffff” button_one_font=”|600|||||||” button_one_use_icon=”off” custom_button_two=”on” button_two_text_color=”#509af5″ button_two_border_color=”#509af5″ button_two_font=”|600|||||||” button_two_icon_color=”#509af5″ background_layout=”light” custom_margin=”|||” custom_padding=”50px||60px||false|false” button_one_border_color_hover=”#509af5″ 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=”on” button_one_border_color__hover=”#509af5″ 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=”off” button_two_letter_spacing__hover_enabled=”off” button_one_bg_color__hover_enabled=”off” button_two_bg_color__hover_enabled=”off”]<\/p>\n

DevDays Europe 2021<\/span><\/h1>\n
\n
\n

\"date\"<\/p>\n

June 8-10<\/p>\n<\/div>\n

\n

\"venue\"<\/p>\n

Vilnius and Online<\/p>\n<\/div>\n<\/div>\n

[\/et_pb_fullwidth_header][\/et_pb_section][et_pb_section fb_built=”1″ custom_padding_last_edited=”on|tablet” _builder_version=”4.0.6″ background_enable_color=”off” custom_padding=”30px|||||” custom_padding_tablet=”30px||||false|false” custom_padding_phone=”0px||||false|false”][et_pb_row column_structure=”2_5,3_5″ _builder_version=”4.4.2″ background_color=”#ffffff” use_background_color_gradient=”on” background_color_gradient_start=”#c6c6c6″ background_color_gradient_end=”#ffffff” background_color_gradient_start_position=”19%” width_tablet=”100%” width_phone=”” width_last_edited=”on|phone” max_width=”850px” custom_margin=”||15px||false|false” custom_padding=”10px|0px|10px|0px|true|true” border_radii=”off|3px|3px||” border_radii_tablet=”off|0px|0px||” border_radii_phone=”” border_radii_last_edited=”on|desktop” box_shadow_style=”preset1″ locked=”off”][et_pb_column type=”2_5″ _builder_version=”3.29.3″][et_pb_image src=”https:\/\/devdays.lt\/wp-content\/uploads\/2021\/03\/DD_Devlin_Duldulao_500x500_round.png” title_text=”DD_Adrienne_Tacke_500x500_round (2)” align=”center” _builder_version=”4.9.0″ max_width=”80%” custom_padding=”0px|||||”][\/et_pb_image][\/et_pb_column][et_pb_column type=”3_5″ _builder_version=”3.29.3″][et_pb_text _builder_version=”4.9.0″ text_font=”|600|||||||” text_text_color=”#509af5″ text_font_size=”30px” custom_margin=”30px||||false|false” custom_margin_tablet=”” custom_margin_phone=”0px||||false|false” custom_margin_last_edited=”on|phone” animation_style=”fade” animation_duration=”1200ms” text_orientation_tablet=”” text_orientation_phone=”center” text_orientation_last_edited=”on|phone”]<\/p>\n

Devlin Duldulao<\/p>\n

[\/et_pb_text][et_pb_text _builder_version=”4.9.0″ text_text_color=”#424242″ text_font_size=”16px” custom_padding=”||10px||false|false” animation_style=”fade” animation_duration=”1200ms” animation_delay=”50ms” text_orientation_tablet=”” text_orientation_phone=”center” text_orientation_last_edited=”on|phone”]Position:<\/strong> Full-stack Cloud Developer<\/p>\n

Company:<\/strong> inmeta<\/p>\n

Country:<\/strong> Norway[\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row custom_padding_last_edited=”on|tablet” _builder_version=”4.2.2″ background_color=”#ffffff” z_index=”0″ width_tablet=”100%” width_phone=”” width_last_edited=”on|tablet” max_width=”850px” max_width_tablet=”850px” max_width_phone=”” max_width_last_edited=”on|tablet” custom_padding=”30px|46px|30px|46px|false|true” custom_padding_tablet=”|30px||30px|true|true” custom_padding_phone=”|20px||20px|false|true” border_radii=”off|||3px|3px” box_shadow_style=”preset1″][et_pb_column type=”4_4″ _builder_version=”3.29.3″][et_pb_text _builder_version=”4.0.6″ text_font=”|600|||||||” text_text_color=”#509bf5″ text_font_size=”22px” header_font=”|600|||||||” header_text_align=”left” header_text_color=”#002258″ custom_margin=”||5px|0px” custom_padding=”10px|||”]<\/p>\n

Biography<\/p>\n

[\/et_pb_text][et_pb_text _builder_version=”4.9.0″ text_font=”||||||||” text_font_size=”15px” animation_style=”fade” animation_duration=”1200ms” animation_delay=”150ms” locked=”off”]<\/p>\n

Devlin Duldulao is a Filipino full-stack cloud engineer based in Norway. He is a Microsoft MVP, an Auth0 Ambassador, a trainer, a conference speaker, an author, and a senior consultant at Inmeta. He loves going to universities and user groups to share his expertise.<\/p>\n

[\/et_pb_text][et_pb_social_media_follow use_icon_font_size=”on” icon_font_size=”15px” _builder_version=”4.9.0″ text_orientation=”left” custom_margin=”|||” custom_padding=”|||” animation_style=”fade” animation_duration=”1200ms” animation_delay=”50ms” locked=”off”][et_pb_social_media_follow_network social_network=”linkedin” url=”https:\/\/www.linkedin.com\/in\/devlinduldulao” _builder_version=”4.9.0″ background_color=”#007bb6″ follow_button=”off” url_new_window=”on”]linkedin[\/et_pb_social_media_follow_network][\/et_pb_social_media_follow][et_pb_text _builder_version=”4.1″ text_font=”|600|||||||” text_text_color=”#0a1e60″ text_font_size=”20px” header_font=”|600|||||||” header_text_align=”left” header_text_color=”#002258″ custom_margin=”||5px|0px” custom_padding=”10px|||”]Workshop[\/et_pb_text][et_pb_text _builder_version=”4.9.0″ text_font=”||||||||” text_text_color=”#ffffff” header_font=”|600|||||||” header_text_color=”#509bf5″ max_width=”100%” custom_margin=”0px||0px||false|false” custom_padding=”0px|||” saved_tabs=”all”]<\/p>\n

NgRx State Management in Angular<\/h1>\n

[\/et_pb_text][et_pb_text _builder_version=”4.9.0″ text_font=”||||||||” text_text_color=”#666666″ text_font_size=”15px” custom_margin=”||15px||false|false” custom_padding=”0px||0px||false|false”]<\/p>\n

Learn how to use NgRx to solve complex managing of states in large Angular applications. You will be using NgRx, a library that uses Redux design patterns and Rxjs library, pragmatically. Alongside using NgRx are enterprise Angular architecture, Reactive Forms, and Angular Material.<\/p>\n

[\/et_pb_text][et_pb_text _builder_version=”4.1″ text_font=”|600|||||||” text_text_color=”#509bf5″ text_font_size=”20px” header_font=”|600|||||||” header_text_align=”left” header_text_color=”#002258″ custom_margin=”||5px|0px” custom_padding=”10px|||”]Agenda[\/et_pb_text][et_pb_text _builder_version=”4.9.0″ text_font=”||||||||” text_text_color=”#666666″ text_font_size=”15px” custom_margin=”||15px||false|false” custom_padding=”0px||||false|false”]<\/p>\n

Step-by-step process of learning NGRX in Angular<\/span><\/p>\n

    \n
  • <\/span>Part 1: NgRx fundamentals:<\/span>\n
      \n
    • <\/span>Getting started with NgRx<\/span><\/li>\n
    • <\/span>Setting up NgRx<\/span><\/li>\n
    • <\/span>Writing an action type, effect, and reducer<\/span><\/li>\n
    • <\/span>Configuring a store<\/span><\/li>\n<\/ul>\n<\/li>\n
    • <\/span>Part 2: CRUD in NgRx:<\/span>\n
        \n
      • <\/span>Writing a selector and using a selector in a component<\/span><\/li>\n
      • <\/span>Using a dispatcher in a component<\/span><\/li>\n
      • <\/span>Deleting an object with and without a side effect<\/span><\/li>\n
      • <\/span>Adding, and updating an object with a side effect<\/span><\/li>\n<\/ul>\n<\/li>\n
      • <\/span>Part 3: Exercise:<\/span>\n
          \n
        • <\/span>Implementation of NgRx using what you have learned<\/span><\/li>\n
        • Code reviews of the exercise<\/span><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n

          [\/et_pb_text][et_pb_text _builder_version=”4.1″ text_font=”|600|||||||” text_text_color=”#509bf5″ text_font_size=”20px” header_font=”|600|||||||” header_text_align=”left” header_text_color=”#002258″ custom_margin=”||5px|0px” custom_padding=”10px|||”]Objectives[\/et_pb_text][et_pb_text _builder_version=”4.9.0″ text_font=”||||||||” text_text_color=”#666666″ text_font_size=”15px” custom_margin=”||15px||false|false” custom_padding=”0px||||false|false”]<\/p>\n

          This workshop’s main goal is to teach you how to properly use a state management library in general. You don\u2019t have to put all your state in a store. In this workshop, you will know some use cases of making a state globally accessible and use cases where a local state does not need to be included in a global state or store. This will help you write large Angular apps in the future and help you find more job opportunities by leveling up your skill.<\/span><\/p>\n

          [\/et_pb_text][et_pb_text _builder_version=”4.1″ text_font=”|600|||||||” text_text_color=”#509bf5″ text_font_size=”20px” header_font=”|600|||||||” header_text_align=”left” header_text_color=”#002258″ custom_margin=”||5px|0px” custom_padding=”10px|||”]Target audience[\/et_pb_text][et_pb_text _builder_version=”4.9.0″ text_font=”||||||||” text_text_color=”#666666″ text_font_size=”15px” custom_margin=”||15px||false|false” custom_padding=”0px||||false|false”]<\/p>\n

          This workshop is for developers who have tried Angular or have experienced building Angular apps and how to manage to reflect and sync states between deeply nested components.<\/p>\n

          [\/et_pb_text][et_pb_text _builder_version=”4.1″ text_font=”|600|||||||” text_text_color=”#509bf5″ text_font_size=”20px” header_font=”|600|||||||” header_text_align=”left” header_text_color=”#002258″ custom_margin=”||5px|0px” custom_padding=”10px|||”]Technical requirements[\/et_pb_text][et_pb_text _builder_version=”4.9.0″ text_font=”||||||||” text_text_color=”#666666″ text_font_size=”15px” custom_margin=”||8px||false|false” custom_padding=”0px||||false|false”]<\/p>\n

          Latest VS Code, latest Nodejs runtime lts version, Chrome browser, npm cli, and Angular cli.<\/span><\/p>\n

          [\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row _builder_version=”4.0.6″ custom_padding=”50px||||false|false”][et_pb_column type=”4_4″ _builder_version=”4.0.6″][et_pb_text _builder_version=”4.4.2″ text_font=”|700|||||||” text_text_color=”#666666″ animation_style=”fade” animation_duration=”1400ms” animation_delay=”50ms” global_module=”128838″]<\/p>\n

          \u00ab Back<\/p>\n

          [\/et_pb_text][\/et_pb_column][\/et_pb_row][\/et_pb_section]<\/p>\n","protected":false},"excerpt":{"rendered":"

          DevDays Europe 2021 Devlin Duldulao Position: Full-stack Cloud Developer Company: inmeta Country: Norway Biography Devlin Duldulao is a Filipino full-stack cloud engineer based in Norway. He is a Microsoft MVP, an Auth0 Ambassador, a trainer, a conference speaker, an author, and a senior consultant at Inmeta. He loves going to universities and user groups to […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_et_pb_use_builder":"on","_et_pb_old_content":"","_et_gb_content_width":""},"_links":{"self":[{"href":"https:\/\/devdays.lt\/wp-json\/wp\/v2\/pages\/142321"}],"collection":[{"href":"https:\/\/devdays.lt\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/devdays.lt\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/devdays.lt\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/devdays.lt\/wp-json\/wp\/v2\/comments?post=142321"}],"version-history":[{"count":6,"href":"https:\/\/devdays.lt\/wp-json\/wp\/v2\/pages\/142321\/revisions"}],"predecessor-version":[{"id":142591,"href":"https:\/\/devdays.lt\/wp-json\/wp\/v2\/pages\/142321\/revisions\/142591"}],"wp:attachment":[{"href":"https:\/\/devdays.lt\/wp-json\/wp\/v2\/media?parent=142321"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}