RxJS & Angular Reactive Forms @ Codemotion 2019
2 likes806 views
The document discusses reactive forms in Angular, comparing them to template-driven forms. Reactive forms are built around Observable streams, handle dynamic value changes, and offer benefits like immutability, testability, and scalability compared to template-driven forms. It provides an overview of key concepts like FormControl, FormGroup, and FormBuilder and examples of how to implement basic and nested reactive forms, add validators, update forms dynamically, and handle form submission and arrays.
1 of 60
Downloaded 40 times
Ad
Recommended
Angular Observables & RxJS Introduction
Angular Observables & RxJS IntroductionRahat Khanna a.k.a mAppMechanic Introduction to the mystic concept of Streams, Observables & RxJS. Know how UI Event Handling, Forms & Http Service works in Angular.
Angular 2.0 forms
Angular 2.0 formsEyal Vardi This document provides an overview of Angular's template-driven and model-driven forms. It describes the key directives, classes, and interfaces used for building forms in Angular. It explains how to add validation, track form state, create custom validators, and tie forms to components and templates. The document also demonstrates how to set up two-way data binding between forms and models using directives like ngModel, ngFormControl, and ngForm.
Introduction To Angular's reactive forms
Introduction To Angular's reactive formsNir Kaufman Slides from my Angular Reactive Forms talk at JSHeroes conference. Most of the talk based on live coding demo, but the slides shows some general feeling and info.
Angular & RXJS: examples and use cases
Angular & RXJS: examples and use casesFabio Biondi The document discusses using RxJS in Angular applications. It provides examples of using RxJS operators like interval, map, async pipe, filter, switchMap, exhaustMap, tap, scan, and reduce. Common use cases include handling events, making HTTP requests, managing application state, and manipulating data. RxJS can be used in components, directives, services, routing, forms, and more throughout an Angular application.
Angular - Chapter 7 - HTTP Services
Angular - Chapter 7 - HTTP ServicesWebStackAcademy Http Service will help us fetch external data, post to it, etc. We need to import the http module to make use of the http service. Let us consider an example to understand how to make use of the http service.
Let's discover React and Redux with TypeScript
Let's discover React and Redux with TypeScriptMathieu Savy 1) React is a JavaScript library for building user interfaces using components. Redux is a state management library that uses a single state tree and immutable state changes via actions and reducers.
2) Redux uses a single state tree and immutable state changes via actions and reducers to manage state in a predictable way. State flows in one direction from the store through reducers on state changes.
3) React and Redux work well together using presentational and container components. Presentational components receive data and callbacks via props. Container components connect presentational components to the Redux store.
angular fundamentals.pdf
angular fundamentals.pdfNuttavutThongjor1 This document provides an overview of Angular fundamentals including components, directives, lifecycle hooks, services, and reactive programming concepts. It defines what components are and how they are declared with metadata and templates. It explains structural and attribute directives like NgFor, NgIf, and NgClass. It covers lifecycle hooks such as ngOnInit, ngOnChanges, and ngOnDestroy. The document also discusses services, dependency injection, and reactive programming concepts like Observables, operators, and marble diagrams.
Angular 9 
Angular 9 Raja Vishnu Presentation about new Angular 9.
It gives introduction about angular framework.
Provides information about why we use angular,
additional features and fixes from old versions. It will clearly explain how to create a new angular project and how to use angular commands and their usages.
It will also explain about the key components like angular architecture, routing, dependency injection etc.,
Angular Data Binding
Angular Data BindingJennifer Estrada This document discusses data binding in Angular, including the differences between HTML attributes and DOM properties, the three types of data binding (one way and two way), and examples of each type of binding. It explains that one way binding can update properties, classes, styles, attributes and listen to events, but not read values. Two way binding uses the NgModel directive to both display and update a data property when the view changes. The document provides examples of property, event, class, style and attribute binding and how Angular matches bindings to component properties and events.
Understanding react hooks
Understanding react hooksSamundra khatri This document provides an overview and explanation of React Hooks. It introduces common Hooks like useState, useEffect, useReducer, and custom hooks. useState is used to add local state to functional components. useEffect is similar to component lifecycle methods and lets you perform side effects. useReducer is an alternative to useState for managing state in a single object. Custom hooks let you extract reusable logic and share it without changing components. The document also includes a FAQ addressing questions about hooks and class components.
Introduction to Redux
Introduction to ReduxIgnacio Martín Explanation of the fundamentals of Redux with additional tips and good practices. Presented in the Munich React Native Meetup, so the sample code is using React Native. Additional code: https://github.com/nacmartin/ReduxIntro
Angular and The Case for RxJS
Angular and The Case for RxJSSandi Barr The document discusses the benefits of using RxJS observables over promises and events for managing asynchronous and reactive code in Angular applications. It explains key concepts like observers, subscriptions, operators, cold vs hot observables, and using RxJS with services and components. Example code is provided for creating observable data services to share data between components, composing asynchronous logic with operators, and best practices for managing subscriptions and preventing memory leaks. Overall, the document promotes a reactive programming style with RxJS for building maintainable and testable Angular applications.
Routing & Navigating Pages in Angular 2
Routing & Navigating Pages in Angular 2Knoldus Inc. Routing in Angular allows directing users to different pages/components based on their navigation choices. It defines routes for pages by creating components and linking them in the routes configuration. Components can link to routes using routerLink and navigate between them in code using the Router service. Route guards prevent navigation under certain conditions. Lazy loading allows splitting the app into smaller modules to improve performance. Code is cleaned up by exporting all imports from a single index file.
Sharing Data Between Angular Components
Sharing Data Between Angular ComponentsSquash Apps Pvt Ltd The document discusses various methods for sharing data between Angular components, including:
1) Parent to child components using @Input to pass data via templates.
2) Child to parent using @ViewChild and AfterViewInit lifecycle hook to access child component properties.
3) Child to parent using @Output and event emitters to emit data on user events like button clicks.
4) Between unrelated components using a shared service with RxJs Subjects to share stream of data between all components accessing the service.
React workshop presentation
React workshop presentationBojan Golubović This document contains an agenda and slides for a React workshop presented by Bojan Golubovic. The workshop covers the history and basics of React, including components, JSX, the virtual DOM, and React data flow. It also discusses related tools like Redux and React Router. The goal is to provide basic knowledge of React and how to build real-world applications with it.
Node.js Express Framework
Node.js Express FrameworkTheCreativedev Blog Learn Node.js framework in simple and easy steps starting from basic to advanced concepts with examples including Introduction
Angular routing
Angular routingSultan Ahmed The document discusses Angular routing and provides an example implementation. It first generates components for home, about, userList and user pages. It then sets up routes in app.module.ts to link URLs like /home and /about to their corresponding components. Navigation links using routerLink are added. To handle empty/invalid URLs, a default route is set to redirect to /home. Sub-routes are created under /user linking /user/list to UserListComponent, which displays a list of users. Clicking a user name creates a child route passing the name as a parameter to the UserComponent to display that user's details page.
Angular - Chapter 4 - Data and Event Handling
Angular - Chapter 4 - Data and Event HandlingWebStackAcademy The document provides information about Angular data binding and event handling. It discusses how interpolation can be used to connect data from a component class to its template. It also explains how property binding and event binding allow two-way communication between the component class and template. Finally, it introduces ngModel for setting up two-way data binding between an input element and a property.
Reactjs 
Reactjs Neha Sharma Getting started with the reactjs, basics of reactjs, introduction of reactjs, core concepts of reactjs and comparison with the other libraries/frameworks
Angular
AngularLilia Sfaxi This document discusses Angular components, dependency injection, and routing. It defines Angular as being built on modules, components, templates, and services. Components are the basic building blocks and make up a hierarchical tree structure. Dependency injection allows components to access services. Routing in Angular uses a router to navigate between views and components based on URL changes.
Learn react-js
Learn react-jsC...L, NESPRESSO, WAFAASSURANCE, SOFRECOM ORANGE The document provides an introduction to ReactJS, including:
- ReactJS is a JavaScript library developed by Facebook for building user interfaces.
- It uses virtual DOM for rendering UI components efficiently. Only updated components are re-rendered.
- Components are the basic building blocks of React apps. They accept input and return React elements to describe what should appear on the screen.
- The main steps to set up a React app are installing React and ReactDOM libraries, adding JSX syntax, and rendering components onto the DOM using ReactDOM.render().
Angular modules in depth
Angular modules in depthChristoffer Noring - Angular modules help organize an application into blocks of related functionality. Modules declare components, directives, pipes and services that belong to that module.
- There are different types of modules like root modules, feature modules, and shared modules. The root module launches the app. Feature modules extend functionality. Shared modules contain reusable constructs.
- Modules can import and export specific constructs to make them available to other modules. Services declared in a module are singletons app-wide unless the module is lazy loaded. Core modules contain global services imported by the root module only.
ReactJS presentation.pptx
ReactJS presentation.pptxDivyanshGupta922023 React JS is a JavaScript library for building user interfaces. It uses virtual DOM and one-way data binding to render components efficiently. Everything in React is a component - they accept custom inputs called props and control the output display through rendering. Components can manage private state and update due to props or state changes. The lifecycle of a React component involves initialization, updating due to state/prop changes, and unmounting from the DOM. React promotes unidirectional data flow and single source of truth to make views more predictable and easier to debug.
Introduction to RxJS
Introduction to RxJSBrainhub RxJS is a library for reactive programming that allows composing asynchronous and event-based programs using observable sequences. It provides the Observable type for pushing multiple values to observers over time asynchronously. Operators allow transforming and combining observables. Key types include Observable, Observer, Subject, BehaviorSubject, and ReplaySubject. Subjects can multicast values to multiple observers. Overall, RxJS is useful for handling asynchronous events as collections in a declarative way.
Introduction to React JS
Introduction to React JSBethmi Gunasekara React is a declarative, efficient, and flexible JavaScript library for building user interfaces. It uses virtual DOM which improves performance and can render on both client and server. React encourages a component-based approach where UI is broken into independent reusable pieces that accept external data through properties. Components manage their own state which allows the UI to update over time in response to user input. This makes React code more predictable and easier to debug than traditional two-way data binding.
ReactJS presentation
ReactJS presentationThanh Tuong Plain React detects changes by re-rendering your whole UI into a virtual DOM and then comparing it to the old version. Whatever changed, gets patched to the real DOM.
ASP.NET Web API
ASP.NET Web APIhabib_786 This document provides an overview of ASP.NET Web API, a framework for building HTTP-based services. It discusses key Web API concepts like REST, routing, actions, validation, OData, content negotiation, and the HttpClient. Web API allows building rich HTTP-based apps that can reach more clients by embracing HTTP standards and using HTTP as an application protocol. It focuses on HTTP rather than transport flexibility like WCF.
Top 10 RxJs Operators in Angular 
Top 10 RxJs Operators in Angular Jalpesh Vadgama This slides describes about Top 10 Rxjs Operators in Angular which can be quite useful in our day to day life
Redux Toolkit - Quick Intro - 2022
Redux Toolkit - Quick Intro - 2022Fabio Biondi The document discusses Redux Toolkit, a framework for building Redux applications. It introduces key Redux concepts like actions, reducers, and middleware. It explains how Redux Toolkit simplifies Redux setup with utilities like thunk and Immer.js. It demonstrates Redux Toolkit APIs like configureStore, createAction, createReducer, and createSlice that generate action creators and reducer logic to update state in response to actions.
React - Component Based Approach
React - Component Based ApproachFabio Biondi The document discusses component-based approaches in React and TypeScript. It explains how to pass props between components, with some components being stateful and others being stateless. Components are described as the building blocks of single-page applications, handling discrete parts of the view with separation of concerns.
More Related Content
What's hot (20)
Angular Data Binding
Angular Data BindingJennifer Estrada This document discusses data binding in Angular, including the differences between HTML attributes and DOM properties, the three types of data binding (one way and two way), and examples of each type of binding. It explains that one way binding can update properties, classes, styles, attributes and listen to events, but not read values. Two way binding uses the NgModel directive to both display and update a data property when the view changes. The document provides examples of property, event, class, style and attribute binding and how Angular matches bindings to component properties and events.
Understanding react hooks
Understanding react hooksSamundra khatri This document provides an overview and explanation of React Hooks. It introduces common Hooks like useState, useEffect, useReducer, and custom hooks. useState is used to add local state to functional components. useEffect is similar to component lifecycle methods and lets you perform side effects. useReducer is an alternative to useState for managing state in a single object. Custom hooks let you extract reusable logic and share it without changing components. The document also includes a FAQ addressing questions about hooks and class components.
Introduction to Redux
Introduction to ReduxIgnacio Martín Explanation of the fundamentals of Redux with additional tips and good practices. Presented in the Munich React Native Meetup, so the sample code is using React Native. Additional code: https://github.com/nacmartin/ReduxIntro
Angular and The Case for RxJS
Angular and The Case for RxJSSandi Barr The document discusses the benefits of using RxJS observables over promises and events for managing asynchronous and reactive code in Angular applications. It explains key concepts like observers, subscriptions, operators, cold vs hot observables, and using RxJS with services and components. Example code is provided for creating observable data services to share data between components, composing asynchronous logic with operators, and best practices for managing subscriptions and preventing memory leaks. Overall, the document promotes a reactive programming style with RxJS for building maintainable and testable Angular applications.
Routing & Navigating Pages in Angular 2
Routing & Navigating Pages in Angular 2Knoldus Inc. Routing in Angular allows directing users to different pages/components based on their navigation choices. It defines routes for pages by creating components and linking them in the routes configuration. Components can link to routes using routerLink and navigate between them in code using the Router service. Route guards prevent navigation under certain conditions. Lazy loading allows splitting the app into smaller modules to improve performance. Code is cleaned up by exporting all imports from a single index file.
Sharing Data Between Angular Components
Sharing Data Between Angular ComponentsSquash Apps Pvt Ltd The document discusses various methods for sharing data between Angular components, including:
1) Parent to child components using @Input to pass data via templates.
2) Child to parent using @ViewChild and AfterViewInit lifecycle hook to access child component properties.
3) Child to parent using @Output and event emitters to emit data on user events like button clicks.
4) Between unrelated components using a shared service with RxJs Subjects to share stream of data between all components accessing the service.
React workshop presentation
React workshop presentationBojan Golubović This document contains an agenda and slides for a React workshop presented by Bojan Golubovic. The workshop covers the history and basics of React, including components, JSX, the virtual DOM, and React data flow. It also discusses related tools like Redux and React Router. The goal is to provide basic knowledge of React and how to build real-world applications with it.
Node.js Express Framework
Node.js Express FrameworkTheCreativedev Blog Learn Node.js framework in simple and easy steps starting from basic to advanced concepts with examples including Introduction
Angular routing
Angular routingSultan Ahmed The document discusses Angular routing and provides an example implementation. It first generates components for home, about, userList and user pages. It then sets up routes in app.module.ts to link URLs like /home and /about to their corresponding components. Navigation links using routerLink are added. To handle empty/invalid URLs, a default route is set to redirect to /home. Sub-routes are created under /user linking /user/list to UserListComponent, which displays a list of users. Clicking a user name creates a child route passing the name as a parameter to the UserComponent to display that user's details page.
Angular - Chapter 4 - Data and Event Handling
Angular - Chapter 4 - Data and Event HandlingWebStackAcademy The document provides information about Angular data binding and event handling. It discusses how interpolation can be used to connect data from a component class to its template. It also explains how property binding and event binding allow two-way communication between the component class and template. Finally, it introduces ngModel for setting up two-way data binding between an input element and a property.
Reactjs
Reactjs Neha Sharma Getting started with the reactjs, basics of reactjs, introduction of reactjs, core concepts of reactjs and comparison with the other libraries/frameworks
Angular
AngularLilia Sfaxi This document discusses Angular components, dependency injection, and routing. It defines Angular as being built on modules, components, templates, and services. Components are the basic building blocks and make up a hierarchical tree structure. Dependency injection allows components to access services. Routing in Angular uses a router to navigate between views and components based on URL changes.
Learn react-js
Learn react-jsC...L, NESPRESSO, WAFAASSURANCE, SOFRECOM ORANGE The document provides an introduction to ReactJS, including:
- ReactJS is a JavaScript library developed by Facebook for building user interfaces.
- It uses virtual DOM for rendering UI components efficiently. Only updated components are re-rendered.
- Components are the basic building blocks of React apps. They accept input and return React elements to describe what should appear on the screen.
- The main steps to set up a React app are installing React and ReactDOM libraries, adding JSX syntax, and rendering components onto the DOM using ReactDOM.render().
Angular modules in depth
Angular modules in depthChristoffer Noring - Angular modules help organize an application into blocks of related functionality. Modules declare components, directives, pipes and services that belong to that module.
- There are different types of modules like root modules, feature modules, and shared modules. The root module launches the app. Feature modules extend functionality. Shared modules contain reusable constructs.
- Modules can import and export specific constructs to make them available to other modules. Services declared in a module are singletons app-wide unless the module is lazy loaded. Core modules contain global services imported by the root module only.
ReactJS presentation.pptx
ReactJS presentation.pptxDivyanshGupta922023 React JS is a JavaScript library for building user interfaces. It uses virtual DOM and one-way data binding to render components efficiently. Everything in React is a component - they accept custom inputs called props and control the output display through rendering. Components can manage private state and update due to props or state changes. The lifecycle of a React component involves initialization, updating due to state/prop changes, and unmounting from the DOM. React promotes unidirectional data flow and single source of truth to make views more predictable and easier to debug.
Introduction to RxJS
Introduction to RxJSBrainhub RxJS is a library for reactive programming that allows composing asynchronous and event-based programs using observable sequences. It provides the Observable type for pushing multiple values to observers over time asynchronously. Operators allow transforming and combining observables. Key types include Observable, Observer, Subject, BehaviorSubject, and ReplaySubject. Subjects can multicast values to multiple observers. Overall, RxJS is useful for handling asynchronous events as collections in a declarative way.
Introduction to React JS
Introduction to React JSBethmi Gunasekara React is a declarative, efficient, and flexible JavaScript library for building user interfaces. It uses virtual DOM which improves performance and can render on both client and server. React encourages a component-based approach where UI is broken into independent reusable pieces that accept external data through properties. Components manage their own state which allows the UI to update over time in response to user input. This makes React code more predictable and easier to debug than traditional two-way data binding.
ReactJS presentation
ReactJS presentationThanh Tuong Plain React detects changes by re-rendering your whole UI into a virtual DOM and then comparing it to the old version. Whatever changed, gets patched to the real DOM.
ASP.NET Web API
ASP.NET Web APIhabib_786 This document provides an overview of ASP.NET Web API, a framework for building HTTP-based services. It discusses key Web API concepts like REST, routing, actions, validation, OData, content negotiation, and the HttpClient. Web API allows building rich HTTP-based apps that can reach more clients by embracing HTTP standards and using HTTP as an application protocol. It focuses on HTTP rather than transport flexibility like WCF.
Top 10 RxJs Operators in Angular
Top 10 RxJs Operators in Angular Jalpesh Vadgama This slides describes about Top 10 Rxjs Operators in Angular which can be quite useful in our day to day life
More from Fabio Biondi (17)
Redux Toolkit - Quick Intro - 2022
Redux Toolkit - Quick Intro - 2022Fabio Biondi The document discusses Redux Toolkit, a framework for building Redux applications. It introduces key Redux concepts like actions, reducers, and middleware. It explains how Redux Toolkit simplifies Redux setup with utilities like thunk and Immer.js. It demonstrates Redux Toolkit APIs like configureStore, createAction, createReducer, and createSlice that generate action creators and reducer logic to update state in response to actions.
React - Component Based Approach
React - Component Based ApproachFabio Biondi The document discusses component-based approaches in React and TypeScript. It explains how to pass props between components, with some components being stateful and others being stateless. Components are described as the building blocks of single-page applications, handling discrete parts of the view with separation of concerns.
Introduction to E2E in Cypress
Introduction to E2E in CypressFabio Biondi This document discusses Cypress, an open-source JavaScript testing framework for front-end web applications. It highlights key Cypress features like time travel debugging, real-time reloads, and automatic waiting. It provides an overview of how to install Cypress, write tests using an arrange-act-assert structure, query elements, make assertions, and interact with elements. Examples of testing a login flow and cart panel are also presented. The document promotes Cypress and encourages attending live coding sessions to learn more about component testing.
Create your React 18 / TS bundle using esbuild
Create your React 18 / TS bundle using esbuildFabio Biondi #esbuild is a fast javascript bundler that is 10-100x faster than webpack, rollup or parcel and it is used by tools like #ViteJS.
It supports features such as:
• ES6 and CommonJS modules
• Tree shaking of ES6 modules
• An API for JavaScript and Go
• TypeScript and JSX syntax
• Source maps
• Minification
• Plugins
• and more....
So I share a quick (and simplified) summary to create a bundle for a #React 18 / #TypeScript project.
Create Web Components using Google Lit
Create Web Components using Google LitFabio Biondi This document discusses how to create reusable web components using the Lit framework from Google. It provides steps for writing a web component using Lit, publishing the component to NPM, and then using the custom component in different frameworks like vanilla JavaScript, Angular, and React. Key features of the example "my-panel" component are described, including making it toggleable via a click event on the title bar.
Redux Toolkit & RTK Query in TypeScript: tips&tricks
Redux Toolkit & RTK Query in TypeScript: tips&tricksFabio Biondi This document discusses advanced tips and tricks for using Redux Toolkit. It covers topics like type safe actions and reducers, slice utilities, middleware like thunk and saga, entity management, custom middleware, and RTK Query for asynchronous data fetching including polling, prefetching, and pagination. The document is from a website that provides training on Redux Toolkit.
React Typescript for beginners: Translator app with Microsoft cognitive services
React Typescript for beginners: Translator app with Microsoft cognitive servicesFabio Biondi During this talk, Eduard and I developed a simple application for the translation and sentiment analysis of a text in React, Typescript and through the use of Azure's cognitive services.
RXJS Best (& Bad) Practices for Angular Developers
RXJS Best (& Bad) Practices for Angular DevelopersFabio Biondi RXJS / NGRX tips, best and bad practices for Angular Developers.
How to read them:
- red background: it's a bad practice or you can do better :)
- pink background: this is a tip or best practice
Introduction for Master Class "Amazing Reactive Forms"
Introduction for Master Class "Amazing Reactive Forms"Fabio Biondi This document advertises an Angular training course on reactive forms by Fabio Biondi. It provides an overview of the course topics which include template-driven vs reactive forms, building complex forms with FormGroup and FormControl, creating custom form controls and validators, nested and dynamic forms, and advanced APIs. The course is divided into 5 parts that progress from fundamentals to advanced implementation of reactive forms in Angular. A 50% discount coupon is provided for the course.
Data architectures in Angular & NGRX Introduction
Data architectures in Angular & NGRX IntroductionFabio Biondi The document discusses using NGRX for state management in Angular applications. It introduces NGRX as being based on Redux and providing functionality like immutable state, type safety, and testability. It outlines the basic Redux flow of actions, reducers, and state and how NGRX implements this in Angular. It then covers topics like project structure, dev tools, installing NGRX, creating the application store, and using selectors, effects, and reducers. It also briefly discusses whether Redux is overkill for most apps and alternatives to NGRX.
Angular Day 2018 (italy) - Keynote - The Amazing World of Angular 6
Angular Day 2018 (italy) - Keynote - The Amazing World of Angular 6Fabio Biondi This document discusses AngularDay2018, an event focused on Angular and related technologies. It promotes opportunities for Italian developers, including jobs, collaborations, training, and more. It highlights many features of Angular like TypeScript, components, dependency injection, forms, routing, internationalization, and performance. It also discusses tools like Angular CLI, libraries, Angular Universal for server-side rendering, and long term support.
Introduction to Redux (for Angular and React devs)
Introduction to Redux (for Angular and React devs)Fabio Biondi This document provides an introduction and overview of Redux. It discusses how Redux can help organize React, Angular, and other JavaScript applications into stateless components with a single source of truth for state management. The key concepts of Redux include the store, actions, and reducers. The store holds the entire application state tree. Actions describe state changes and are sent to reducers to update the state. Reducers are pure functions that update the state immutably in response to actions. Together the store, actions, and reducers provide a predictable state management pattern for building scalable applications.
Angular Best Practices @ Firenze 19 feb 2018
Angular Best Practices @ Firenze 19 feb 2018Fabio Biondi This document summarizes Fabio Biondi's background and areas of expertise. It indicates that he is an experienced freelance developer with skills in Angular, React, Redux, RxJS and other technologies. He runs community groups and offers training courses on these topics. The document also lists upcoming events and courses on Angular best practices, data architectures, and mastering Angular.
React: JSX and Top Level API
React: JSX and Top Level APIFabio Biondi This document discusses developing client, server, and mobile applications with React. It introduces React Top-Level API vs JSX and how to create reusable Widget components in React that can render different content types specified by a string property. Widgets are demonstrated as cards with optional close and option buttons that can trigger callback handlers. The content is split across multiple nested components for reusability and extensibility. Similar capabilities in Angular are discussed using directives.
Intro evento: evolvere un applicazione Angular con Rxjs e Redux
Intro evento: evolvere un applicazione Angular con Rxjs e ReduxFabio Biondi Angular fornisce gli strumenti fondamentali per sviluppare un’intera Single Page Application.
Tuttavia, le attività che il front-end deve svolgere sono sempre più complesse e le interfacce utente (UI), di conseguenza, stanno diventando sempre più sofisticate: gestione di un data-flow molto articolato, componenti che devono rimanere in sync tra di loro, integrazione unit test, time travel debugging sono solo alcune delle problematiche ricorrenti che uno sviluppatore front-end deve affrontare quotidianamente.
Redux, libreria nata per requisiti complessi in contesti quali Facebook, nasce con l’obiettivo di separare nettamente gli aspetti architetturali dalla user interface, semplificando la gestione dello stato applicativo e rendendo il codice molto più manutenibile, testabile e scalabile.
RxJS, una libreria per la gestione di eventi asincroni basata sul paradigma della programmazione reattiva, è una dipendenza del framework Angular e utilizzata in un’infinità di contesti: manipolazione del dato, gestione di form reattivi, interazioni utente.
L’obiettivo di questo evento è quello di descrivere alcuni dei pattern e delle librerie attualmente più diffuse e richieste nel panorama internazionale per la creazione di architetture front-end.
La giornata è totalmente focalizzata sull’ultima release di Angular ma la maggior parte dei concetti esposti saranno applicabili anche in #react o in un qualunque altro contesto in cui si utilizzi #javascript.
---------
3 SESSIONI / 3 SPEAKER:
1) Architetture in Angular e Redux
Fabio Biondi / JS Developer & Trainer
2) Be more productive with Redux devtools
Jiayi Hu / Front-end developer & Consultant
3) Introduzione a RxJS
Maksim Sinik / Full Stack Developer
Durata: 3 ore
---------
GADGETS
Durante l'evento assegneremo 3 licenze per un anno di sottoscrizione ai prodotti JetBrain tramite una semplice estrazione tra i partecipanti. Nei prossimi eventi ci saranno moltissime novità. WE LOVE GADGETS! :)
---------
PARTNERS:
- INattivo: La Fabbrica di innovazione e sviluppo tecnologico dei servizi core per le aziende.
- CoderBlock: Recruitment Marketplace
- JetBrain: Developer Tools
---------
FACEBOOK COMMUNITIES:
- Angular Developer Italiani
- React Developer Italiani
- Javascript Developer Italiani
Single Page Applications in Angular (italiano)
Single Page Applications in Angular (italiano)Fabio Biondi L'evoluzione che lo sviluppo front-end ha avuto in questi anni, con particolare attenzione all’ecosistema che ruota attorno all’ultima versione di questo framework.
Angular 2 - Core Concepts
Angular 2 - Core ConceptsFabio Biondi A quick overview about Angular 2 Components, DI, Lifecycle and Change Detection.
Interactive slides: http://slides.fabiobiondi.com/angular2-core-concepts
Plunkr: http://plnkr.co/edit/vllrTYuOo6VJE7vMPEfQ?p=preview
Ad
Recently uploaded (20)
Integration of Utility Data into 3D BIM Models Using a 3D Solids Modeling Wor...
Integration of Utility Data into 3D BIM Models Using a 3D Solids Modeling Wor...Safe Software Jacobs has developed a 3D utility solids modelling workflow to improve the integration of utility data into 3D Building Information Modeling (BIM) environments. This workflow, a collaborative effort between the New Zealand Geospatial Team and the Australian Data Capture Team, employs FME to convert 2D utility data into detailed 3D representations, supporting enhanced spatial analysis and clash detection.
To enable the automation of this process, Jacobs has also developed a survey data standard that standardizes the capture of existing utilities. This standard ensures consistency in data collection, forming the foundation for the subsequent automated validation and modelling steps. The workflow begins with the acquisition of utility survey data, including attributes such as location, depth, diameter, and material of utility assets like pipes and manholes. This data is validated through a custom-built tool that ensures completeness and logical consistency, including checks for proper connectivity between network components. Following validation, the data is processed using an automated modelling tool to generate 3D solids from 2D geometric representations. These solids are then integrated into BIM models to facilitate compatibility with 3D workflows and enable detailed spatial analyses.
The workflow contributes to improved spatial understanding by visualizing the relationships between utilities and other infrastructure elements. The automation of validation and modeling processes ensures consistent and accurate outputs, minimizing errors and increasing workflow efficiency.
This methodology highlights the application of FME in addressing challenges associated with geospatial data transformation and demonstrates its utility in enhancing data integration within BIM frameworks. By enabling accurate 3D representation of utility networks, the workflow supports improved design collaboration and decision-making in complex infrastructure projects
Agentic AI: Beyond the Buzz- LangGraph Studio V2
Agentic AI: Beyond the Buzz- LangGraph Studio V2Shashikant Jagtap Presentation given at the LangChain community meetup London
https://lu.ma/9d5fntgj
Coveres
Agentic AI: Beyond the Buzz
Introduction to AI Agent and Agentic AI
Agent Use case and stats
Introduction to LangGraph
Build agent with LangGraph Studio V2
Azure vs AWS Which Cloud Platform Is Best for Your Business in 2025
Azure vs AWS Which Cloud Platform Is Best for Your Business in 2025Infrassist Technologies Pvt. Ltd. Azure vs. AWS is a common comparison when businesses evaluate cloud platforms for performance, flexibility, and cost-efficiency.
Trends Artificial Intelligence - Mary Meeker
Trends Artificial Intelligence - Mary MeekerClive Dickens Mary Meeker’s 2024 AI report highlights a seismic shift in productivity, creativity, and business value driven by generative AI. She charts the rapid adoption of tools like ChatGPT and Midjourney, likening today’s moment to the dawn of the internet. The report emphasizes AI’s impact on knowledge work, software development, and personalized services—while also cautioning about data quality, ethical use, and the human-AI partnership. In short, Meeker sees AI as a transformative force accelerating innovation and redefining how we live and work.
cnc-drilling-dowel-inserting-machine-drillteq-d-510-english.pdf
cnc-drilling-dowel-inserting-machine-drillteq-d-510-english.pdfAmirStern2 CNC מכונות קידוח drillteq d-510
6th Power Grid Model Meetup - 21 May 2025
6th Power Grid Model Meetup - 21 May 2025DanBrown980551 6th Power Grid Model Meetup
Join the Power Grid Model community for an exciting day of sharing experiences, learning from each other, planning, and collaborating.
This hybrid in-person/online event will include a full day agenda, with the opportunity to socialize afterwards for in-person attendees.
If you have a hackathon proposal, tell us when you register!
About Power Grid Model
The global energy transition is placing new and unprecedented demands on Distribution System Operators (DSOs). Alongside upgrades to grid capacity, processes such as digitization, capacity optimization, and congestion management are becoming vital for delivering reliable services.
Power Grid Model is an open source project from Linux Foundation Energy and provides a calculation engine that is increasingly essential for DSOs. It offers a standards-based foundation enabling real-time power systems analysis, simulations of electrical power grids, and sophisticated what-if analysis. In addition, it enables in-depth studies and analysis of the electrical power grid’s behavior and performance. This comprehensive model incorporates essential factors such as power generation capacity, electrical losses, voltage levels, power flows, and system stability.
Power Grid Model is currently being applied in a wide variety of use cases, including grid planning, expansion, reliability, and congestion studies. It can also help in analyzing the impact of renewable energy integration, assessing the effects of disturbances or faults, and developing strategies for grid control and optimization.
Scaling GenAI Inference From Prototype to Production: Real-World Lessons in S...
Scaling GenAI Inference From Prototype to Production: Real-World Lessons in S...Anish Kumar Presented by: Anish Kumar
LinkedIn: https://www.linkedin.com/in/anishkumar/
This lightning talk dives into real-world GenAI projects that scaled from prototype to production using Databricks’ fully managed tools. Facing cost and time constraints, we leveraged four key Databricks features—Workflows, Model Serving, Serverless Compute, and Notebooks—to build an AI inference pipeline processing millions of documents (text and audiobooks).
This approach enables rapid experimentation, easy tuning of GenAI prompts and compute settings, seamless data iteration and efficient quality testing—allowing Data Scientists and Engineers to collaborate effectively. Learn how to design modular, parameterized notebooks that run concurrently, manage dependencies and accelerate AI-driven insights.
Whether you're optimizing AI inference, automating complex data workflows or architecting next-gen serverless AI systems, this session delivers actionable strategies to maximize performance while keeping costs low.
Soulmaite review - Find Real AI soulmate review
Soulmaite review - Find Real AI soulmate reviewSoulmaite Looking for an honest take on Soulmaite? This Soulmaite review covers everything you need to know—from features and pricing to how well it performs as a real AI soulmate. We share how users interact with adult chat features, AI girlfriend 18+ options, and nude AI chat experiences. Whether you're curious about AI roleplay porn or free AI NSFW chat with no sign-up, this review breaks it down clearly and informatively.
Down the Rabbit Hole – Solving 5 Training Roadblocks
Down the Rabbit Hole – Solving 5 Training RoadblocksRustici Software Feeling stuck in the Matrix of your training technologies? You’re not alone. Managing your training catalog, wrangling LMSs and delivering content across different tools and audiences can feel like dodging digital bullets. At some point, you hit a fork in the road: Keep patching things up as issues pop up… or follow the rabbit hole to the root of the problems.
Good news, we’ve already been down that rabbit hole. Peter Overton and Cameron Gray of Rustici Software are here to share what we found. In this webinar, we’ll break down 5 training roadblocks in delivery and management and show you how they’re easier to fix than you might think.
Establish Visibility and Manage Risk in the Supply Chain with Anchore SBOM
Establish Visibility and Manage Risk in the Supply Chain with Anchore SBOMAnchore Over 70% of any given software application consumes open source software (most likely not even from the original source) and only 15% of organizations feel confident in their risk management practices.
With the newly announced Anchore SBOM feature, teams can start safely consuming OSS while mitigating security and compliance risks. Learn how to import SBOMs in industry-standard formats (SPDX, CycloneDX, Syft), validate their integrity, and proactively address vulnerabilities within your software ecosystem.
Domino IQ – What to Expect, First Steps and Use Cases
Domino IQ – What to Expect, First Steps and Use Casespanagenda Webinar Recording: https://www.panagenda.com/webinars/domino-iq-what-to-expect-first-steps-and-use-cases/
HCL Domino iQ Server – From Ideas Portal to implemented Feature. Discover what it is, what it isn’t, and explore the opportunities and challenges it presents.
Key Takeaways
- What are Large Language Models (LLMs) and how do they relate to Domino iQ
- Essential prerequisites for deploying Domino iQ Server
- Step-by-step instructions on setting up your Domino iQ Server
- Share and discuss thoughts and ideas to maximize the potential of Domino iQ
Domino IQ – Was Sie erwartet, erste Schritte und Anwendungsfälle
Domino IQ – Was Sie erwartet, erste Schritte und Anwendungsfällepanagenda Webinar Recording: https://www.panagenda.com/webinars/domino-iq-was-sie-erwartet-erste-schritte-und-anwendungsfalle/
HCL Domino iQ Server – Vom Ideenportal zur implementierten Funktion. Entdecken Sie, was es ist, was es nicht ist, und erkunden Sie die Chancen und Herausforderungen, die es bietet.
Wichtige Erkenntnisse
- Was sind Large Language Models (LLMs) und wie stehen sie im Zusammenhang mit Domino iQ
- Wesentliche Voraussetzungen für die Bereitstellung des Domino iQ Servers
- Schritt-für-Schritt-Anleitung zur Einrichtung Ihres Domino iQ Servers
- Teilen und diskutieren Sie Gedanken und Ideen, um das Potenzial von Domino iQ zu maximieren
TrustArc Webinar - 2025 Global Privacy Survey
TrustArc Webinar - 2025 Global Privacy SurveyTrustArc How does your privacy program compare to your peers? What challenges are privacy teams tackling and prioritizing in 2025?
In the sixth annual Global Privacy Benchmarks Survey, we asked global privacy professionals and business executives to share their perspectives on privacy inside and outside their organizations. The annual report provides a 360-degree view of various industries' priorities, attitudes, and trends. See how organizational priorities and strategic approaches to data security and privacy are evolving around the globe.
This webinar features an expert panel discussion and data-driven insights to help you navigate the shifting privacy landscape. Whether you are a privacy officer, legal professional, compliance specialist, or security expert, this session will provide actionable takeaways to strengthen your privacy strategy.
This webinar will review:
- The emerging trends in data protection, compliance, and risk
- The top challenges for privacy leaders, practitioners, and organizations in 2025
- The impact of evolving regulations and the crossroads with new technology, like AI
Predictions for the future of privacy in 2025 and beyond
LSNIF: Locally-Subdivided Neural Intersection Function
LSNIF: Locally-Subdivided Neural Intersection FunctionTakahiro Harada Neural representations have shown the potential to accelerate ray casting in a conventional ray-tracing-based rendering pipeline. We introduce a novel approach called Locally-Subdivided Neural Intersection Function (LSNIF) that replaces bottom-level BVHs used as traditional geometric representations with a neural network. Our method introduces a sparse hash grid encoding scheme incorporating geometry voxelization, a scene-agnostic training data collection, and a tailored loss function. It enables the network to output not only visibility but also hit-point information and material indices. LSNIF can be trained offline for a single object, allowing us to use LSNIF as a replacement for its corresponding BVH. With these designs, the network can handle hit-point queries from any arbitrary viewpoint, supporting all types of rays in the rendering pipeline. We demonstrate that LSNIF can render a variety of scenes, including real-world scenes designed for other path tracers, while achieving a memory footprint reduction of up to 106.2x compared to a compressed BVH.
https://arxiv.org/abs/2504.21627
“How Qualcomm Is Powering AI-driven Multimedia at the Edge,” a Presentation f...
“How Qualcomm Is Powering AI-driven Multimedia at the Edge,” a Presentation f...Edge AI and Vision Alliance For the full video of this presentation, please visit: https://www.edge-ai-vision.com/2025/06/how-qualcomm-is-powering-ai-driven-multimedia-at-the-edge-a-presentation-from-qualcomm/
Ning Bi, Vice President of Engineering at Qualcomm Technologies, presents the “How Qualcomm Is Powering AI-driven Multimedia at the Edge” tutorial at the May 2025 Embedded Vision Summit.
In this talk, Bi explores the evolution of multimedia processing at the edge, from simple early use cases such as audio and video processing powered by algorithm-centric approaches to modern sophisticated capabilities such as digital human avatars that are transmitted over the communication channel, powered by data-driven AI. He explains how Qualcomm is applying AI and generative AI technologies on the edge to enrich computer vision for new and high-quality visual solutions. He also shows how Qualcomm enables a broad range of OEMs, ODMs and third-party developers to harness innovative technologies via initiatives such as the Qualcomm AI Hub, which provides a library of optimized machine learning models to enable developers to quickly incorporate AI into their applications.
National Fuels Treatments Initiative: Building a Seamless Map of Hazardous Fu...
National Fuels Treatments Initiative: Building a Seamless Map of Hazardous Fu...Safe Software The National Fuels Treatments Initiative (NFT) is transforming wildfire mitigation by creating a standardized map of nationwide fuels treatment locations across all land ownerships in the United States. While existing state and federal systems capture this data in diverse formats, NFT bridges these gaps, delivering the first truly integrated national view. This dataset will be used to measure the implementation of the National Cohesive Wildland Strategy and demonstrate the positive impact of collective investments in hazardous fuels reduction nationwide. In Phase 1, we developed an ETL pipeline template in FME Form, leveraging a schema-agnostic workflow with dynamic feature handling intended for fast roll-out and light maintenance. This was key as the initiative scaled from a few to over fifty contributors nationwide. By directly pulling from agency data stores, oftentimes ArcGIS Feature Services, NFT preserves existing structures, minimizing preparation needs. External mapping tables ensure consistent attribute and domain alignment, while robust change detection processes keep data current and actionable. Now in Phase 2, we’re migrating pipelines to FME Flow to take advantage of advanced scheduling, monitoring dashboards, and automated notifications to streamline operations. Join us to explore how this initiative exemplifies the power of technology, blending FME, ArcGIS Online, and AWS to solve a national business problem with a scalable, automated solution.
Jira Administration Training – Day 1 : Introduction
Jira Administration Training – Day 1 : IntroductionRavi Teja This presentation covers the basics of Jira for beginners. Learn how Jira works, its key features, project types, issue types, and user roles. Perfect for anyone new to Jira or preparing for Jira Admin roles.
Oracle Cloud Infrastructure Generative AI Professional
Oracle Cloud Infrastructure Generative AI ProfessionalVICTOR MAESTRE RAMIREZ Oracle Cloud Infrastructure Generative AI Professional
Azure vs AWS Which Cloud Platform Is Best for Your Business in 2025
Azure vs AWS Which Cloud Platform Is Best for Your Business in 2025Infrassist Technologies Pvt. Ltd.
“How Qualcomm Is Powering AI-driven Multimedia at the Edge,” a Presentation f...
“How Qualcomm Is Powering AI-driven Multimedia at the Edge,” a Presentation f...Edge AI and Vision Alliance
Ad
RxJS & Angular Reactive Forms @ Codemotion 2019
- 3. ANGULAR JAVASCRIPTREACT OPPORTUNITÀ developer italiani <€> 14000+ membri
- 7. REACTIVE FORMS Handle inputs whose values change over time and built around Observable streams
- 10. REACTIVE FORMS
- 11. FormControl Instance emailControl.setValue( ‘[email protected]’ ) view is updated value REACTIVE FORMS sync
- 12. REACTIVE FORMS / TEST Sync
- 13. this.email = ‘value’ view is updated change detection ngModel directive value TEMPLATE-DRIVEN FORMS
- 15. TEMPLATE-DRIVEN FORMS / TEST Async
- 16. FORMS & RXJS Mario Biondi
- 18. REACTIVE FORMS
- 19. FUNDAMENTALS 1. FormControl 2. FormGroup 3. FormArray 4. ControlValueAccessor FormBuilder }
- 20. MY FIRST REACTIVE FORM New York
- 28. ENABLE / DISABLE VALIDATORS Mario Biondi
- 30. UPDATE VALIDATORS xis a company? your VAT your company name
- 33. NESTED FORM GROUPS first name last name car model kw
- 36. GROUP CUSTOM VALIDATORS first name last name **** ****** passwords don’t match
- 43. FORM ARRAY Nutella 4.99 item name price Biscotti 2.50
- 47. DYNAMIC FORMS from JSON (simpler solution)
- 50. DYNAMIC FORMS (create components @ runtime)
- 53. FORM CREATION
- 54. FORM CREATION
- 59. fabiobiondi.io