Angular & RXJS: examples and use cases

Sep 14, 201821 likes1,943 views

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 JAVASCRIPT REACT
OPPORTUNITÀ per DEVELOPER ITALIANI 
(jobs / collaborations / training and more)
FACEBOOK GROUPS
developer italianideveloper italianideveloper italiani

interval(value)
returns an observable sequence that produces a
value after each period.

map(fn)
transform the items emitted by an Observable by
applying a function to each item

WHERE CAN YOU USE RXJS IN ANGULAR?
ALMOST EVERYWHERE! 
In components, directives, pipes, services,
XHR, router, guards, interceptors ...

ASync Pipes
{{'Milano' | temperature | async }}  
// output: 20°

HttpClient & map(fn)
Leanne Graham (Sincere@april.biz)
Transform HTTP response

forkJoin(array)
Combine Multiple HTTP requests
When all observables complete,  
emit the last emitted value from each.

switchMap
Map to observable, complete previous inner observable,  
emit values.

!
NESTED XHR with switchMap(fn)
Solution
Sequential HTTP requests

exhaustMap(array)
Abort new HTTP requests until the previous one has been completed

Services
UserService: fetch data View: request and use data

perform actions or side-effects, such as logging.
tap(fn)
“Debug” and side effects with tap()

A value that changes over time
BehaviorSubject
Store authentication token

UI: SignInComponent
SignIn by using LoginService

LoginService
Invoke login REST Service and save token

*ifLogged Structural Directive
Render DOM if user is logged
Usage

AuthGuard
Disable route access if user is not logged
Usage

HTTP Interceptors
Inject token to each XHR and handle errors

7: telly.hoeger@billy.biz
8: sherwood@rosamond.me
9: chaim_mcdermott@dana.io
10: rey.padberg@karina.bizt
FILTER ARRAY with map: easiest way
Get user ID > 6 and email lowercase

X
FILTER ARRAY WITH RXJS (1/3)  
Wrong Way

FILTER ARRAY WITH RXJS (2/3):  
flatten in single emissions
Get user ID > 6
!
Too many. I just need one!

we only need to emit one value (3/3)
Get user ID > 6 and email lowercase

scan(fn)
applies an accumulator function over an observable
sequence and returns each intermediate result

reduce(fn)
apply a function to each item emitted by an
Observable, sequentially, and emit the ﬁnal value

scan
!
Too many.  
I just need one!
Display the total of likes
Given an array
Display the total of likes

scan
Display the total of likes
Given an array
Display the total of likes
Yo! :)

<ImageGallery>
A simple carousel with timer and NEXT / PREV buttons

<ImageGallery>
Enhanced version: get Token, HTTP requests and completely “pure”

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.

Top 10 RxJs Operators in Angular Jalpesh Vadgama

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.

Rxjs pptChristoffer Noring

RxJs - demystified provides an overview of reactive programming and RxJs. The key points covered are: - Reactive programming focuses on propagating changes without explicitly specifying how propagation happens. - Observables are at the heart of RxJs and emit values in a push-based manner. Operators allow transforming, filtering, and combining observables. - Common operators include map, filter, reduce, buffer, and switchMap. Over 120 operators exist for tasks like error handling, multicasting, and conditional logic. - Marble diagrams visually demonstrate how operators transform observable streams. - Creating observables from events, promises, arrays and iterables allows wrapping different data sources in a uniform API

RxJS & Angular Reactive Forms @ Codemotion 2019Fabio Biondi

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.

Introduction to RxJSAbul Hasan

Angular Observables & RxJS IntroductionRahat Khanna a.k.a mAppMechanic

Angular 2 observablesGeoffrey Filippi

This document provides an overview of Angular 2 and related reactive programming concepts: - It discusses fundamentals like reactive programming, functional reactive programming (FRP), and the observer design pattern. - Related concepts like promises, Object.observe, and RxJS observables are explained. - Angular 2 uses observables for forms, HTTP requests, the async pipe for change detection, and more. Pipes and change detection are also covered. - The document compares promises and observables, and how RxJS implements observables for use in Angular 2. Bridging between different async patterns and observables is discussed. - Questions are invited at the end regarding Angular 2 and related reactive

Workshop 21: React RouterVisual Engineering

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.

RxJS Operators - Real World Use Cases (FULL VERSION)Tracy Lee

This document provides an overview and explanation of various RxJS operators for working with Observables, including: - The map, filter, and scan operators for transforming streams of data. Map applies a function to each value, filter filters values, and scan applies a reducer function over time. - Flattening operators like switchMap, concatMap, mergeMap, and exhaustMap for mapping Observables to other Observables. - Error handling operators like catchError, retry, and retryWhen for catching and handling errors. - Additional explanation of use cases and common mistakes for each operator discussed. The document is intended to explain these essential operators for real world reactive programming use.

React new features and intro to HooksSoluto

The document discusses React hooks and how they can be used to manage state and other features in function components without writing classes. It provides examples of how common lifecycle methods and state management in classes can be re-written using hooks like useState, useEffect, and useContext. Specifically, it walks through converting a chat component that subscribes to new messages and manages local state from a class to a function component using these React hooks.

The New JavaScript: ES6Rob Eisenberg

This year ECMA International will be ratifying the biggest update to the JavaScript language in its history. In this talk we'll look at key features already appearing in browsers as well as those coming in the near future. We'll also explore how you can begin leveraging the power of ES6 across all browsers today. If you haven't looked at JavaScript recently, you soon realize that a bigger, better world awaits.

Introduction to ReduxIgnacio Martín

Getting started with typescriptC...L, NESPRESSO, WAFAASSURANCE, SOFRECOM ORANGE

Spring I/O 2012: Natural Templating in Spring MVC with ThymeleafThymeleaf

RxJS Evolvedtrxcllnt

This document summarizes the new features and goals of RxJS version 5, which aims to improve the modularity, performance, debugging, and extensibility of the RxJS library. Key changes include making RxJS fully modular, improving performance by reducing allocations and call stack sizes, enhancing debugging with simpler operator implementations, and allowing better extensibility through subclassing Observables and maintaining Subject bi-directionality. Simpler unit tests using marble diagrams are also highlighted.

Spring Boot and REST API07.pallav

Spring Boot is a framework for creating stand-alone, production-grade Spring-based applications that can be started using java -jar without requiring any traditional application servers. It is designed to get developers up and running as quickly as possible with minimal configuration. Some key features of Spring Boot include automatic configuration, starter dependencies to simplify dependency management, embedded HTTP servers, security, metrics, health checks and externalized configuration. The document then provides examples of building a basic RESTful web service with Spring Boot using common HTTP methods like GET, POST, PUT, DELETE and handling requests and responses.

Introduction to angular with a simple but complete projectJadson Santos

Angular is a framework for building client applications in HTML, CSS and TypeScript. It provides best practices like modularity, separation of concerns and testability for client-side development. The document discusses creating an Angular project, generating components, binding data, using directives, communicating with backend services, routing between components and building for production. Key steps include generating components, services and modules, binding data, calling REST APIs, defining routes and building the app.

Getting started with Redux jsCitrix

reactJSSyam Santhosh

This document provides an introduction to React.js, including: - React is a JavaScript library for building user interfaces and was developed by Facebook. It is the VIEW component in MVC architecture. - Key features and benefits of React include being fast, modular, scalable, flexible, and popular due to its employability. Large companies like Facebook use React. - Core concepts of React include JSX, components, unidirectional data flow, and the virtual DOM which improves performance compared to traditional frameworks. Components are reusable pieces that make up the entire application.

React HooksJoao Marins

React Hooks are functions that allow you to "hook into" React state and lifecycle features from function components. Some key hooks include useState, useContext, and useEffect. Hooks make it easier to reuse stateful logic between components and simplify component logic. However, hooks should only be called from React functions and not in loops, conditions, or nested functions. Overall, hooks provide more powerful features to function components and opportunities to write code in a more functional style.

Angular 16 – the rise of SignalsCoding Academy

Angular 16 is the biggest release since the initial rollout of Angular, and it changes everything: Bye bye zones, change-detection, life-cycle, children-selectors, Rx and what not. Recorded webinar based on these slides given by Yaron Biton, Misterbit Coding-Academy’s CTO, can be found at: https://www.youtube.com/watch?v=92K1fgPbku8 Coding-Academy offers advanced web-techs training and software development services: Top-rated Full-stack courses for Angular, React, Vue, Node, Modern architectures, etc. | Available top-notch on-demand-coders trough Misterbit technological solutions | Coding-Academy Bootcamp: Hundreds of employed full-stack developers every year | Anything web, end to end projects | Tech companies and startups | Consulting to management and dev teams | Workshops for managers and leaders.

Reactive Programming in Java 8 with Rx-JavaKasun Indrasiri

Reactive programming with Rx-Java allows building responsive systems that can handle varying workloads and failures. It promotes asynchronous and non-blocking code using observable sequences and operators. Rx-Java was created at Netflix to address issues like network chattiness and callback hell in their API. It transforms callback-based code into declarative pipelines. Key concepts are Observables that emit notifications, Operators that transform Observables, and Subscribers that receive emitted items. Rx-Java gained popularity due to its support for concurrency, error handling, and composability.

React hooksAssaf Gannon

This document discusses React hooks and how they enhance functional components. It explains that hooks allow functional components to maintain state and lifecycle methods like class components. The key hooks discussed are useState for managing state, useEffect for side effects like data fetching, and useCallback and useMemo for optimization. Custom hooks are also covered as a way to extract reusable logic. Overall, hooks improve on class components by making code more modular, reusable and easier to test.

React hooksRamy ElBasyouni

The document discusses React patterns and hooks. It covers topics like inheritance, composition, mixins, render props, higher order components (HOCs), and React hooks. Some key points: - Inheritance and composition are approaches to code reuse in object-oriented programming. React uses composition over inheritance. - Mixins were introduced in 2015 for code reuse but are now deprecated due to issues. Render props and HOCs are preferred patterns. - Render props and HOCs allow code and state to be shared across components. Render props have fewer levels of nesting while HOCs are better for applying multiple concerns. - Hooks were introduced to overcome class component limitations and support functional components with local state and lif

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.

React jsOswald Campesato

ReactJS for Beginners provides an overview of ReactJS including what it is, advantages, disadvantages, typical setup tools, and examples of basic React code. Key points covered include: - ReactJS is a JavaScript library for building user interfaces and is component-based. - Advantages include high efficiency, easier JavaScript via JSX, good developer tools and SEO, and easy testing. - Disadvantages include React only handling the view layer and requiring other libraries for full MVC functionality. - Examples demonstrate basic components, properties, events, conditional rendering, and lists in ReactJS.

RxJS Operators - Real World Use Cases - AngularMixTracy Lee

Luis Atencio on RxJSLuis Atencio

More Related Content

What's hot (20)

Workshop 21: React RouterVisual Engineering

Angular and The Case for RxJSSandi Barr

RxJS Operators - Real World Use Cases (FULL VERSION)Tracy Lee

React new features and intro to HooksSoluto

The New JavaScript: ES6Rob Eisenberg

Introduction to ReduxIgnacio Martín

Getting started with typescriptC...L, NESPRESSO, WAFAASSURANCE, SOFRECOM ORANGE

Spring I/O 2012: Natural Templating in Spring MVC with ThymeleafThymeleaf

RxJS Evolvedtrxcllnt

Spring Boot and REST API07.pallav

Introduction to angular with a simple but complete projectJadson Santos

Getting started with Redux jsCitrix

reactJSSyam Santhosh

React HooksJoao Marins

Angular 16 – the rise of SignalsCoding Academy

Reactive Programming in Java 8 with Rx-JavaKasun Indrasiri

React hooksAssaf Gannon

React hooksRamy ElBasyouni

Angular - Chapter 4 - Data and Event HandlingWebStackAcademy

React jsOswald Campesato

Workshop 21: React RouterVisual Engineering

Angular and The Case for RxJSSandi Barr

RxJS Operators - Real World Use Cases (FULL VERSION)Tracy Lee

React new features and intro to HooksSoluto

The New JavaScript: ES6Rob Eisenberg

Introduction to ReduxIgnacio Martín

Getting started with typescriptC...L, NESPRESSO, WAFAASSURANCE, SOFRECOM ORANGE

Spring I/O 2012: Natural Templating in Spring MVC with ThymeleafThymeleaf

RxJS Evolvedtrxcllnt

Spring Boot and REST API07.pallav

Introduction to angular with a simple but complete projectJadson Santos

Getting started with Redux jsCitrix

reactJSSyam Santhosh

React HooksJoao Marins

Angular 16 – the rise of SignalsCoding Academy

Reactive Programming in Java 8 with Rx-JavaKasun Indrasiri

React hooksAssaf Gannon

React hooksRamy ElBasyouni

Angular - Chapter 4 - Data and Event HandlingWebStackAcademy

React jsOswald Campesato

Similar to Angular & RXJS: examples and use cases (20)

RxJS Operators - Real World Use Cases - AngularMixTracy Lee

Luis Atencio on RxJSLuis Atencio

RxJava2 SlidesYarikS

Reactive Extensions (Rx) is a library for composing asynchronous and event-based programs using Observable sequences. RxJava implements Rx for the Java VM. Key advantages include simplifying async operations, surfacing errors sooner, and reducing state bugs. The API has a large surface area, so the learning curve is steep. RxJava 2 is recommended over 1 due to better performance, lower memory usage, and other improvements. Observables push data to Observers via onNext, onError, onCompleted calls. Common operators like map, flatMap, filter transform and combine Observable streams. Multithreading uses Schedulers. Unit testing uses TestSubscriber to make assertions.

Intro to Reactive Thinking and RxJava 2JollyRogers5

Reactive Extensions (Rx) was first introduced by Microsoft in 2009 and has since been ported to most platforms and languages. It provides a way to model asynchronous data streams and events using Observables in a way that makes it easier to compose asynchronous and event-based programs. Some key advantages include simplifying asynchronous operations, surfacing errors sooner, and reducing bugs from state variables. However, the API is large so there is a steep learning curve. RxJava is an implementation of Rx for the JVM that allows pushing data instead of pulling it without worrying about threads. Common operators like map, filter, and flatMap allow transforming and combining Observable streams.

RxJS In-Depth - AngularConnect 2015Ben Lesh

Angular 19 - L'ère des applications complètes basées sur les signaux.pdfmoassiongbon

Documenting the Mined Feature Implementations from the Object-oriented Source...Ra'Fat Al-Msie'deen

Progscon 2017: Taming the wild fronteer - Adventures in ClojurescriptJohn Stevenson

This document provides an overview of Clojurescript presented by John Stevenson. It discusses how Clojurescript provides a pragmatic approach to functional programming using immutable data structures and pure functions. It also describes how Clojurescript interfaces with popular JavaScript frameworks like React and how it can help manage complexity and state changes in web applications. Additionally, the document provides examples of Clojurescript libraries and tools and discusses ways to get started with the Clojurescript environment and ecosystem.

Norikra: SQL Stream Processing In RubySATOSHI TAGOMORI

This document summarizes a presentation about Norikra, an open source SQL stream processing engine written in Ruby. Some key points: - Norikra allows for schema-less stream processing using SQL queries without needing to restart for new queries. It supports windows, joins, UDFs. - Example queries demonstrate counting events by field values over time windows. Nested fields can be queried directly. - Norikra is used in production at LINE for analytics like API error reporting and a Lambda architecture with real-time and batch processing. - It is built on JRuby to leverage Java libraries and Ruby gems, and can handle 10k-100k events/sec on typical hardware. The

Reactive, component 그리고 angular2Jeado Ko

The magic behind your Lyft ride prices: A case study on machine learning and ...Karthik Murugesan

Building scalable applications with angular jsAndrew Alpert

This document discusses best practices for organizing AngularJS applications. It recommends organizing files by feature rather than type, with each feature having related HTML, CSS, tests, etc. It also recommends structuring modules to mirror the URL structure and listing submodules as dependencies. The document discusses using services for reusable logic rather than large controllers. It emphasizes writing tests, managing technical debt, following code style guides, and using task runners like Grunt or Gulp to automate tasks.

Functional Reactive Programming (FRP): Working with RxJSOswald Campesato

Functional Reactive Programming (FRP) combines functional programming and reactive programming by treating asynchronous data streams as basic elements. FRP uses Observables to represent these streams, which emit values over time that can be composed together using operators like map and filter. Popular libraries for FRP include RxJS, which supports asynchronous and event-based programs by modeling push-based data streams with Observables. Operators allow transforming and combining Observable streams to build reactive applications.

Integrating Applications: the Reactive WayNicola Ferraro

This document discusses integrating applications in a reactive way. It begins by defining reactive programming and reactive systems, emphasizing asynchronous, non-blocking architectures. It then discusses application integration patterns like those in Apache Camel, which supports over 200 components and many integration patterns. The document ends by discussing how to build larger reactive systems through microservice integration and communication across reactive and non-reactive applications.

PHPcon Poland - Static Analysis of PHP Code – How the Heck did I write so man...Rouven Weßling

Static analysis tools can analyze code without executing it to find bugs and issues. The document discusses several static analysis tools for PHP like PHPMD, Phan, PHPCS, PHPLOC, Deptrac. It explains what they do, like PHPLOC gathering complexity metrics and Deptrac checking for violations of defined layer dependencies. In the end, it recommends using static analysis in CI and not trusting results blindly without understanding the underlying errors.

The present and future of Serverless observabilityYan Cui

As engineers, we're empowered by advancements in cloud platforms to build ever more complex systems that can achieve amazing feats at a scale previously only possible for the elite few. The monitoring tools have evolved over the years to accommodate our growing needs with these increasingly complex systems, but the emergence of serverless technologies like AWS Lambda has shifted the landscape and broken some of the underlying assumptions that existing tools are built upon - eg. you can no longer access the underlying host to install monitoring agents/daemons, and it's no longer feasible to use background threads to send monitoring data outside the critical path. Furthermore, event-driven architectures has become easily accessible and widely adopted by those adopting serverless technologies, and this trend has added another layer of complexity with how we monitor and debug our systems as it involves tracing executions that flow through async invocations, and often fan'd-out and fan'd-in via various event processing patterns. Join us in this talk as serverless expert Yan Cui gives us an overview of the challenges with observing a serverless architecture, the tradeoffs to consider, the current state of the tooling for serverless observability and a sneak peek at some of the new and coming tools that will hopefully inform us what the future of serverless observability might look like.

The present and future of Serverless observabilityYan Cui

As engineers, we’re empowered by advancements in cloud platforms to build ever more complex systems that can achieve amazing feats at a scale previously only possible for the elite few. The monitoring tools have evolved over the years to accommodate our growing needs with these increasingly complex systems, but the emergence of serverless technologies like AWS Lambda has shifted the landscape and broken some of the underlying assumptions that existing tools are built upon - eg. you can no longer access the underlying host to install monitoring agents/daemons, and it’s no longer feasible to use background threads to send monitoring data outside the critical path. Furthermore, event-driven architectures has become easily accessible and widely adopted by those adopting serverless technologies, and this trend has added another layer of complexity with how we monitor and debug our systems as it involves tracing executions that flow through async invocations, and often fan’d-out and fan’d-in via various event processing patterns. Join us in this talk as Yan Cui gives us an overview of the challenges with observing a serverless architecture (ephemerality, no access to host OS, no background thread for sending monitoring data, etc.), the tradeoffs to consider, and the state of the tooling for serverless observability.

The present and future of serverless observability (QCon London)Yan Cui

How we sleep well at night using Hystrix at Finn.noHenning Spjelkavik

Hystrix is a latency and fault tolerance library used to isolate points of access to remote systems, services and 3rd party libraries, stop failures from cascading, and enable resilience in complex distributed systems. The presentation covered how to create Hystrix commands to wrap calls to external dependencies, use monitoring and dashboards to monitor circuit breaker states and metrics, and examples of how Finn has used Hystrix including request collapsing to batch calls. Key learnings included that graceful degradation is an important mindset change, nested commands can work but require care, and errors detected client-side with Hystrix may not always require application restarts.

Functional Programming in Java - Code for MaintainabilityMarcin Stepien

RxJS Operators - Real World Use Cases - AngularMixTracy Lee

Luis Atencio on RxJSLuis Atencio

RxJava2 SlidesYarikS

Intro to Reactive Thinking and RxJava 2JollyRogers5

RxJS In-Depth - AngularConnect 2015Ben Lesh

Angular 19 - L'ère des applications complètes basées sur les signaux.pdfmoassiongbon

Documenting the Mined Feature Implementations from the Object-oriented Source...Ra'Fat Al-Msie'deen

Progscon 2017: Taming the wild fronteer - Adventures in ClojurescriptJohn Stevenson

Norikra: SQL Stream Processing In RubySATOSHI TAGOMORI

Reactive, component 그리고 angular2Jeado Ko

The magic behind your Lyft ride prices: A case study on machine learning and ...Karthik Murugesan

Building scalable applications with angular jsAndrew Alpert

Functional Reactive Programming (FRP): Working with RxJSOswald Campesato

Integrating Applications: the Reactive WayNicola Ferraro

PHPcon Poland - Static Analysis of PHP Code – How the Heck did I write so man...Rouven Weßling

The present and future of Serverless observabilityYan Cui

The present and future of serverless observability (QCon London)Yan Cui

How we sleep well at night using Hystrix at Finn.noHenning Spjelkavik

Functional Programming in Java - Code for MaintainabilityMarcin Stepien

More from Fabio Biondi (17)

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 ApproachFabio Biondi

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 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 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&tricksFabio Biondi

React Typescript for beginners: Translator app with Microsoft cognitive servicesFabio Biondi

RXJS Best (& Bad) Practices for Angular DevelopersFabio Biondi

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 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 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)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 2018Fabio Biondi

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 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)Fabio Biondi

Angular 2 - Core ConceptsFabio Biondi

Redux Toolkit - Quick Intro - 2022Fabio Biondi

React - Component Based ApproachFabio Biondi

Introduction to E2E in CypressFabio Biondi

Create your React 18 / TS bundle using esbuildFabio Biondi

Create Web Components using Google LitFabio Biondi

Redux Toolkit & RTK Query in TypeScript: tips&tricksFabio Biondi

React Typescript for beginners: Translator app with Microsoft cognitive servicesFabio Biondi

RXJS Best (& Bad) Practices for Angular DevelopersFabio Biondi

Introduction for Master Class "Amazing Reactive Forms"Fabio Biondi

Data architectures in Angular & NGRX IntroductionFabio Biondi

Angular Day 2018 (italy) - Keynote - The Amazing World of Angular 6Fabio Biondi

Introduction to Redux (for Angular and React devs)Fabio Biondi

Angular Best Practices @ Firenze 19 feb 2018Fabio Biondi

React: JSX and Top Level APIFabio Biondi

Intro evento: evolvere un applicazione Angular con Rxjs e ReduxFabio Biondi

Single Page Applications in Angular (italiano)Fabio Biondi

Angular 2 - Core ConceptsFabio Biondi

Recently uploaded (20)

What Do Contribution Guidelines Say About Software Testing? (MSR 2025)Andre Hora

Software testing plays a crucial role in the contribution process of open-source projects. For example, contributions introducing new features are expected to include tests, and contributions with tests are more likely to be accepted. Although most real-world projects require contributors to write tests, the specific testing practices communicated to contributors remain unclear. In this paper, we present an empirical study to understand better how software testing is approached in contribution guidelines. We analyze the guidelines of 200 Python and JavaScript open-source software projects. We find that 78% of the projects include some form of test documentation for contributors. Test documentation is located in multiple sources, including CONTRIBUTING files (58%), external documentation (24%), and README files (8%). Furthermore, test documentation commonly explains how to run tests (83.5%), but less often provides guidance on how to write tests (37%). It frequently covers unit tests (71%), but rarely addresses integration (20.5%) and end-to-end tests (15.5%). Other key testing aspects are also less frequently discussed: test coverage (25.5%) and mocking (9.5%). We conclude by discussing implications and future research.

Exceptional Behaviors: How Frequently Are They Tested? (AST 2025)Andre Hora

Exceptions allow developers to handle error cases expected to occur infrequently. Ideally, good test suites should test both normal and exceptional behaviors to catch more bugs and avoid regressions. While current research analyzes exceptions that propagate to tests, it does not explore other exceptions that do not reach the tests. In this paper, we provide an empirical study to explore how frequently exceptional behaviors are tested in real-world systems. We consider both exceptions that propagate to tests and the ones that do not reach the tests. For this purpose, we run an instrumented version of test suites, monitor their execution, and collect information about the exceptions raised at runtime. We analyze the test suites of 25 Python systems, covering 5,372 executed methods, 17.9M calls, and 1.4M raised exceptions. We find that 21.4% of the executed methods do raise exceptions at runtime. In methods that raise exceptions, on the median, 1 in 10 calls exercise exceptional behaviors. Close to 80% of the methods that raise exceptions do so infrequently, but about 20% raise exceptions more frequently. Finally, we provide implications for researchers and practitioners. We suggest developing novel tools to support exercising exceptional behaviors and refactoring expensive try/except blocks. We also call attention to the fact that exception-raising behaviors are not necessarily “abnormal” or rare.

Designing AI-Powered APIs on Azure: Best Practices& ConsiderationsDinusha Kumarasiri

AI is transforming APIs, enabling smarter automation, enhanced decision-making, and seamless integrations. This presentation explores key design principles for AI-infused APIs on Azure, covering performance optimization, security best practices, scalability strategies, and responsible AI governance. Learn how to leverage Azure API Management, machine learning models, and cloud-native architectures to build robust, efficient, and intelligent API solutions

Avast Premium Security Crack FREE Latest Version 2025mu394968

🌍📱👉COPY LINK & PASTE ON GOOGLE https://dr-kain-geera.info/👈🌍 Avast Premium Security is a paid subscription service that provides comprehensive online security and privacy protection for multiple devices. It includes features like antivirus, firewall, ransomware protection, and website scanning, all designed to safeguard against a wide range of online threats, according to Avast. Key features of Avast Premium Security: Antivirus: Protects against viruses, malware, and other malicious software, according to Avast. Firewall: Controls network traffic and blocks unauthorized access to your devices, as noted by All About Cookies. Ransomware protection: Helps prevent ransomware attacks, which can encrypt your files and hold them hostage. Website scanning: Checks websites for malicious content before you visit them, according to Avast. Email Guardian: Scans your emails for suspicious attachments and phishing attempts. Multi-device protection: Covers up to 10 devices, including Windows, Mac, Android, and iOS, as stated by 2GO Software. Privacy features: Helps protect your personal data and online privacy. In essence, Avast Premium Security provides a robust suite of tools to keep your devices and online activity safe and secure, according to Avast.

Microsoft AI Nonprofit Use Cases and Live Demo_2025.04.30.pdfTechSoup

In this webinar we will dive into the essentials of generative AI, address key AI concerns, and demonstrate how nonprofits can benefit from using Microsoft’s AI assistant, Copilot, to achieve their goals. This event series to help nonprofits obtain Copilot skills is made possible by generous support from Microsoft. What You’ll Learn in Part 2: Explore real-world nonprofit use cases and success stories. Participate in live demonstrations and a hands-on activity to see how you can use Microsoft 365 Copilot in your own work!

Revolutionizing Residential Wi-Fi PPT.pptxnidhisingh691197

Adobe Lightroom Classic Crack FREE Latest link 2025kashifyounis067

🌍📱👉COPY LINK & PASTE ON GOOGLE http://drfiles.net/ 👈🌍 Adobe Lightroom Classic is a desktop-based software application for editing and managing digital photos. It focuses on providing users with a powerful and comprehensive set of tools for organizing, editing, and processing their images on their computer. Unlike the newer Lightroom, which is cloud-based, Lightroom Classic stores photos locally on your computer and offers a more traditional workflow for professional photographers. Here's a more detailed breakdown: Key Features and Functions: Organization: Lightroom Classic provides robust tools for organizing your photos, including creating collections, using keywords, flags, and color labels. Editing: It offers a wide range of editing tools for making adjustments to color, tone, and more. Processing: Lightroom Classic can process RAW files, allowing for significant adjustments and fine-tuning of images. Desktop-Focused: The application is designed to be used on a computer, with the original photos stored locally on the hard drive. Non-Destructive Editing: Edits are applied to the original photos in a non-destructive way, meaning the original files remain untouched. Key Differences from Lightroom (Cloud-Based): Storage Location: Lightroom Classic stores photos locally on your computer, while Lightroom stores them in the cloud. Workflow: Lightroom Classic is designed for a desktop workflow, while Lightroom is designed for a cloud-based workflow. Connectivity: Lightroom Classic can be used offline, while Lightroom requires an internet connection to sync and access photos. Organization: Lightroom Classic offers more advanced organization features like Collections and Keywords. Who is it for? Professional Photographers: PCMag notes that Lightroom Classic is a popular choice among professional photographers who need the flexibility and control of a desktop-based application. Users with Large Collections: Those with extensive photo collections may prefer Lightroom Classic's local storage and robust organization features. Users who prefer a traditional workflow: Users who prefer a more traditional desktop workflow, with their original photos stored on their computer, will find Lightroom Classic a good fit.

Societal challenges of AI: biases, multilinguism and sustainabilityJordi Cabot

Why Orangescrum Is a Game Changer for Construction Companies in 2025Orangescrum

Get & Download Wondershare Filmora Crack Latest [2025]saniaaftab72555

Copy & Past Link 👉👉 https://dr-up-community.info/ Wondershare Filmora is a video editing software and app designed for both beginners and experienced users. It's known for its user-friendly interface, drag-and-drop functionality, and a wide range of tools and features for creating and editing videos. Filmora is available on Windows, macOS, iOS (iPhone/iPad), and Android platforms.

TestMigrationsInPy: A Dataset of Test Migrations from Unittest to Pytest (MSR...Andre Hora

Unittest and pytest are the most popular testing frameworks in Python. Overall, pytest provides some advantages, including simpler assertion, reuse of fixtures, and interoperability. Due to such benefits, multiple projects in the Python ecosystem have migrated from unittest to pytest. To facilitate the migration, pytest can also run unittest tests, thus, the migration can happen gradually over time. However, the migration can be timeconsuming and take a long time to conclude. In this context, projects would benefit from automated solutions to support the migration process. In this paper, we propose TestMigrationsInPy, a dataset of test migrations from unittest to pytest. TestMigrationsInPy contains 923 real-world migrations performed by developers. Future research proposing novel solutions to migrate frameworks in Python can rely on TestMigrationsInPy as a ground truth. Moreover, as TestMigrationsInPy includes information about the migration type (e.g., changes in assertions or fixtures), our dataset enables novel solutions to be verified effectively, for instance, from simpler assertion migrations to more complex fixture migrations. TestMigrationsInPy is publicly available at: https://github.com/altinoalvesjunior/TestMigrationsInPy.

Adobe After Effects Crack FREE FRESH version 2025kashifyounis067

🌍📱👉COPY LINK & PASTE ON GOOGLE http://drfiles.net/ 👈🌍 Adobe After Effects is a software application used for creating motion graphics, special effects, and video compositing. It's widely used in TV and film post-production, as well as for creating visuals for online content, presentations, and more. While it can be used to create basic animations and designs, its primary strength lies in adding visual effects and motion to videos and graphics after they have been edited. Here's a more detailed breakdown: Motion Graphics: . After Effects is powerful for creating animated titles, transitions, and other visual elements to enhance the look of videos and presentations. Visual Effects: . It's used extensively in film and television for creating special effects like green screen compositing, object manipulation, and other visual enhancements. Video Compositing: . After Effects allows users to combine multiple video clips, images, and graphics to create a final, cohesive visual. Animation: . It uses keyframes to create smooth, animated sequences, allowing for precise control over the movement and appearance of objects. Integration with Adobe Creative Cloud: . After Effects is part of the Adobe Creative Cloud, a suite of software that includes other popular applications like Photoshop and Premiere Pro. Post-Production Tool: . After Effects is primarily used in the post-production phase, meaning it's used to enhance the visuals after the initial editing of footage has been completed.

WinRAR Crack for Windows (100% Working 2025)sh607827

Exploring Code Comprehension in Scientific Programming: Preliminary Insight...University of Hawai‘i at Mānoa

This presentation explores code comprehension challenges in scientific programming based on a survey of 57 research scientists. It reveals that 57.9% of scientists have no formal training in writing readable code. Key findings highlight a "documentation paradox" where documentation is both the most common readability practice and the biggest challenge scientists face. The study identifies critical issues with naming conventions and code organization, noting that 100% of scientists agree readable code is essential for reproducible research. The research concludes with four key recommendations: expanding programming education for scientists, conducting targeted research on scientific code quality, developing specialized tools, and establishing clearer documentation guidelines for scientific software. Presented at: The 33rd International Conference on Program Comprehension (ICPC '25) Date of Conference: April 2025 Conference Location: Ottawa, Ontario, Canada Preprint: https://arxiv.org/abs/2501.10037

Landscape of Requirements Engineering for/by AI through Literature ReviewHironori Washizaki

Automation Techniques in RPA - UiPath CertificateVICTOR MAESTRE RAMIREZ

Requirements in Engineering AI- Enabled Systems: Open Problems and Safe AI Sy...Lionel Briand

LEARN SEO AND INCREASE YOUR KNOWLDGE IN SOFTWARE INDUSTRYNidaFarooq10

Download Wondershare Filmora Crack [2025] With Latesttahirabibi60507

Copy & Past Link 👉👉 http://drfiles.net/ Wondershare Filmora is a video editing software and app designed for both beginners and experienced users. It's known for its user-friendly interface, drag-and-drop functionality, and a wide range of tools and features for creating and editing videos. Filmora is available on Windows, macOS, iOS (iPhone/iPad), and Android platforms.

Pixologic ZBrush Crack Plus Activation Key [Latest 2025] New Versionsaimabibi60507

Copy & Past Link👉👉 https://dr-up-community.info/ Pixologic ZBrush, now developed by Maxon, is a premier digital sculpting and painting software renowned for its ability to create highly detailed 3D models. Utilizing a unique "pixol" technology, ZBrush stores depth, lighting, and material information for each point on the screen, allowing artists to sculpt and paint with remarkable precision .

What Do Contribution Guidelines Say About Software Testing? (MSR 2025)Andre Hora

Exceptional Behaviors: How Frequently Are They Tested? (AST 2025)Andre Hora

Designing AI-Powered APIs on Azure: Best Practices& ConsiderationsDinusha Kumarasiri

Avast Premium Security Crack FREE Latest Version 2025mu394968

Microsoft AI Nonprofit Use Cases and Live Demo_2025.04.30.pdfTechSoup

Revolutionizing Residential Wi-Fi PPT.pptxnidhisingh691197

Adobe Lightroom Classic Crack FREE Latest link 2025kashifyounis067

Societal challenges of AI: biases, multilinguism and sustainabilityJordi Cabot

Why Orangescrum Is a Game Changer for Construction Companies in 2025Orangescrum

Get & Download Wondershare Filmora Crack Latest [2025]saniaaftab72555

TestMigrationsInPy: A Dataset of Test Migrations from Unittest to Pytest (MSR...Andre Hora

Adobe After Effects Crack FREE FRESH version 2025kashifyounis067

WinRAR Crack for Windows (100% Working 2025)sh607827

Exploring Code Comprehension in Scientific Programming: Preliminary Insight...University of Hawai‘i at Mānoa

Landscape of Requirements Engineering for/by AI through Literature ReviewHironori Washizaki

Automation Techniques in RPA - UiPath CertificateVICTOR MAESTRE RAMIREZ

Requirements in Engineering AI- Enabled Systems: Open Problems and Safe AI Sy...Lionel Briand

LEARN SEO AND INCREASE YOUR KNOWLDGE IN SOFTWARE INDUSTRYNidaFarooq10

Download Wondershare Filmora Crack [2025] With Latesttahirabibi60507

Pixologic ZBrush Crack Plus Activation Key [Latest 2025] New Versionsaimabibi60507

Angular & RXJS: examples and use cases

1. ANGULAR&RXJS FABIOBIONDI.io SEP2018

2. fabiobiondi.io TRAINING AND MENTORING

3. ANGULAR JAVASCRIPT REACT OPPORTUNITÀ per DEVELOPER ITALIANI  (jobs / collaborations / training and more) FACEBOOK GROUPS developer italianideveloper italianideveloper italiani

4. RXJS-6-INTRO

5. interval(value) returns an observable sequence that produces a value after each period.

6. map(fn) transform the items emitted by an Observable by applying a function to each item

7. <fb-clock>

8. ANGULAR & RXJS

9. You don't need subscribe(fn)

10. {{myObs$ | async}} the async Angular pipe “I”   automatically subscribes an observer

11. <fb-clock>

12. WHERE CAN YOU USE RXJS IN ANGULAR? ALMOST EVERYWHERE!  In components, directives, pipes, services, XHR, router, guards, interceptors ...

13. ASync Pipes {{'Milano' | temperature | async }}   // output: 20°

14. Router EVENTS

15. FILTER Router EVENTS

16. Reactive FORMSTemplate-driven FORMS

17. RxJS operators used in forms

18. Create Component at Runtime

19. HttpClient

20. HttpClient & map(fn) Leanne Graham ([email protected]) Transform HTTP response

21. forkJoin(array) Combine Multiple HTTP requests When all observables complete,   emit the last emitted value from each.

22. switchMap Map to observable, complete previous inner observable,   emit values.

23. ! NESTED XHR with switchMap(fn) Solution Sequential HTTP requests

24. exhaustMap(array) Abort new HTTP requests until the previous one has been completed

25. Services UserService: fetch data View: request and use data

26. perform actions or side-effects, such as logging. tap(fn) “Debug” and side effects with tap()

27. AUTHENTICATION

28. A value that changes over time BehaviorSubject Store authentication token

29. UI: SignInComponent SignIn by using LoginService

30. LoginService Invoke login REST Service and save token

31. SECURITY

32. *ifLogged Structural Directive Render DOM if user is logged Usage

33. AuthGuard Disable route access if user is not logged Usage

34. HTTP Interceptors Inject token to each XHR and handle errors

35. NGRX (Redux)

36. NGRX Store ! Too many   subscriptions

37. *ngIf…as Only one   subscription

38. NGRX Effects

39. DATA MANIPULATION

40. 7: [email protected] 8: [email protected] 9: [email protected] 10: [email protected] FILTER ARRAY with map: easiest way Get user ID > 6 and email lowercase

41. X FILTER ARRAY WITH RXJS (1/3)   Wrong Way

42. FILTER ARRAY WITH RXJS (2/3):   flatten in single emissions Get user ID > 6 ! Too many. I just need one!

43. we only need to emit one value (3/3) Get user ID > 6 and email lowercase

44. scan & reduce

45. scan(fn) applies an accumulator function over an observable sequence and returns each intermediate result

46. reduce(fn) apply a function to each item emitted by an Observable, sequentially, and emit the ﬁnal value

47. scan ! Too many.   I just need one! Display the total of likes Given an array Display the total of likes

48. scan Display the total of likes Given an array Display the total of likes Yo! :)

49. REAL-WORLD-EXAMPLES with scan(fn)

50. <Clock> Picker

52. <ImageGallery> A simple carousel with timer and NEXT / PREV buttons

53. ! !

54. <ImageGallery> Enhanced version: get Token, HTTP requests and completely “pure”

56. ANGULAR JAVASCRIPT REACT OPPORTUNITÀ per DEVELOPER ITALIANI  (jobs / collaborations / training and more) FACEBOOK GROUPS developer italianideveloper italianideveloper italiani

57. fabiobiondi.io

Angular & RXJS: examples and use cases

Recommended

More Related Content

What's hot (20)

Similar to Angular & RXJS: examples and use cases (20)

More from Fabio Biondi (17)

Recently uploaded (20)

Angular & RXJS: examples and use cases