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 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.
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.
Spring I/O 2012: Natural Templating in Spring MVC with Thymeleaf
Spring I/O 2012: Natural Templating in Spring MVC with ThymeleafThymeleaf Introduction to the Thymeleaf java XML/XHTML/HTML5 template engine by José Miguel Samper and Daniel Fernández at Spring I/O 2012 Madrid, Feb 17th 2012.
Rxjs ppt
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
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.
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.
The New JavaScript: ES6
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.
Angular Directives
Angular DirectivesiFour Technolab Pvt. Ltd. The document summarizes Angular directives including ngIf, ngFor, ngSwitchCase, ngClass, and ngStyle. It describes how ngIf and ngFor are structural directives that change the DOM layout by adding and removing elements. NgIf and ngFor use an asterisk syntax that gets desugared into <ng-template> elements. NgFor iterates over collections and supports additional syntax like trackBy. NgSwitch is a set of cooperating directives that displays different elements based on a switch expression. NgClass and ngStyle are attribute directives that update CSS classes and styles on elements.
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.
Spring Security.ppt
Spring Security.pptPatiento Del Mar Spring Security is a framework that focuses on providing both authentication and authorization. It intercepts requests, validates credentials against a database, and validates roles for authorization. Thymeleaf Security provides functionality to display data based on authentication rules, such as showing content to administrators based on their roles or displaying the logged in username using the principal object.
Introduction à Angular
Introduction à AngularJean-Baptiste Vigneron Une introduction au framework de développement Angular pour réaliser des sites Web
JavaScript & Dom Manipulation
JavaScript & Dom ManipulationMohammed Arif JavaScript can dynamically manipulate the content, structure, and styling of an HTML document through the Document Object Model (DOM). The DOM represents an HTML document as nodes that can be accessed and modified with JavaScript. Common tasks include dynamically creating and adding elements, handling user events like clicks, and updating content by accessing DOM elements by their id or other attributes.
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.
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.
AngularJS - Présentation (french)
AngularJS - Présentation (french)Yacine Rezgui This is a french presentation of AngularJS that I presented at the JS Sophia Meetup #4.
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
Angular Pipes Workshop
Angular Pipes WorkshopNir Kaufman Slides for the Angular After Hours meetup group: https://www.meetup.com/Angular-AfterHours/events/232687733/
This session is all about pipes: what they are and how to build our own. By the end of this workshop we will build an open source library of angular pipes! Don't forget to checkout the Angular After Hours repository on github: https://github.com/Angular-AfterHours/pipes
Angular Dependency Injection
Angular Dependency InjectionNir Kaufman Slides from my latest talk (and videos) about Angular dependency
injection, You can find related videos here: https://www.youtube.com/playlist?list=PLfZsWIHsTcftJl7WlidsXSBAHBXQBR4j2
React js programming concept
React js programming conceptTariqul islam Provide the primary concept about react js and redux. How react js is integrated with redux to solve the `sate management` for react js application.
React hooks
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
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.
Thymeleaf and Spring Controllers.ppt
Thymeleaf and Spring Controllers.pptPatiento Del Mar Thymeleaf is a view engine that allows working with variables, forms, and conditional statements in views. Spring controllers are annotated with @Controller and actions are mapped to routes. Controllers have access to the HTTP request and session, and can pass data to views or redirect with parameters.
Vue js for beginner 
Vue js for beginner Chandrasekar G Vue JS is a progressive framework for building user interfaces. It uses a component-driven approach and features like reactivity and computed properties that make it possible to build desktop, mobile, and web applications. Some key features include reactive data binding, conditional rendering, mixins, slots for content distribution, and Vuex for global state management between components. Asynchronous and dynamic components add flexibility. Vue shares similarities with React in using virtual DOM and components but differs in file structure and size.
Introduction to RxJS
Introduction to RxJSAbul Hasan Here I discuss about reactive programming, observable, observer and difference between observable and promise.
Also discuss some of important operators like forkJoin, switchMap, from, deboucneTime, discardUntilChanged, mergeMap. I discuss some of observable creation function.
Angular.pdf
Angular.pdfJaouad Assabbour ce cours vous permettra, de découvrir les fondamentaux du framework angular, ainsi apprendre le framwork par pratique, avec des exemple sur chaque model
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)
The New JavaScript: ES6
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.
Angular Directives
Angular DirectivesiFour Technolab Pvt. Ltd. The document summarizes Angular directives including ngIf, ngFor, ngSwitchCase, ngClass, and ngStyle. It describes how ngIf and ngFor are structural directives that change the DOM layout by adding and removing elements. NgIf and ngFor use an asterisk syntax that gets desugared into <ng-template> elements. NgFor iterates over collections and supports additional syntax like trackBy. NgSwitch is a set of cooperating directives that displays different elements based on a switch expression. NgClass and ngStyle are attribute directives that update CSS classes and styles on elements.
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.
Spring Security.ppt
Spring Security.pptPatiento Del Mar Spring Security is a framework that focuses on providing both authentication and authorization. It intercepts requests, validates credentials against a database, and validates roles for authorization. Thymeleaf Security provides functionality to display data based on authentication rules, such as showing content to administrators based on their roles or displaying the logged in username using the principal object.
Introduction à Angular
Introduction à AngularJean-Baptiste Vigneron Une introduction au framework de développement Angular pour réaliser des sites Web
JavaScript & Dom Manipulation
JavaScript & Dom ManipulationMohammed Arif JavaScript can dynamically manipulate the content, structure, and styling of an HTML document through the Document Object Model (DOM). The DOM represents an HTML document as nodes that can be accessed and modified with JavaScript. Common tasks include dynamically creating and adding elements, handling user events like clicks, and updating content by accessing DOM elements by their id or other attributes.
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.
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.
AngularJS - Présentation (french)
AngularJS - Présentation (french)Yacine Rezgui This is a french presentation of AngularJS that I presented at the JS Sophia Meetup #4.
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
Angular Pipes Workshop
Angular Pipes WorkshopNir Kaufman Slides for the Angular After Hours meetup group: https://www.meetup.com/Angular-AfterHours/events/232687733/
This session is all about pipes: what they are and how to build our own. By the end of this workshop we will build an open source library of angular pipes! Don't forget to checkout the Angular After Hours repository on github: https://github.com/Angular-AfterHours/pipes
Angular Dependency Injection
Angular Dependency InjectionNir Kaufman Slides from my latest talk (and videos) about Angular dependency
injection, You can find related videos here: https://www.youtube.com/playlist?list=PLfZsWIHsTcftJl7WlidsXSBAHBXQBR4j2
React js programming concept
React js programming conceptTariqul islam Provide the primary concept about react js and redux. How react js is integrated with redux to solve the `sate management` for react js application.
React hooks
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
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.
Thymeleaf and Spring Controllers.ppt
Thymeleaf and Spring Controllers.pptPatiento Del Mar Thymeleaf is a view engine that allows working with variables, forms, and conditional statements in views. Spring controllers are annotated with @Controller and actions are mapped to routes. Controllers have access to the HTTP request and session, and can pass data to views or redirect with parameters.
Vue js for beginner
Vue js for beginner Chandrasekar G Vue JS is a progressive framework for building user interfaces. It uses a component-driven approach and features like reactivity and computed properties that make it possible to build desktop, mobile, and web applications. Some key features include reactive data binding, conditional rendering, mixins, slots for content distribution, and Vuex for global state management between components. Asynchronous and dynamic components add flexibility. Vue shares similarities with React in using virtual DOM and components but differs in file structure and size.
Introduction to RxJS
Introduction to RxJSAbul Hasan Here I discuss about reactive programming, observable, observer and difference between observable and promise.
Also discuss some of important operators like forkJoin, switchMap, from, deboucneTime, discardUntilChanged, mergeMap. I discuss some of observable creation function.
Angular.pdf
Angular.pdfJaouad Assabbour ce cours vous permettra, de découvrir les fondamentaux du framework angular, ainsi apprendre le framwork par pratique, avec des exemple sur chaque model
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)
Introducing FME Realize: A New Era of Spatial Computing and AR
Introducing FME Realize: A New Era of Spatial Computing and ARSafe Software A new era for the FME Platform has arrived – and it’s taking data into the real world.
Meet FME Realize: marking a new chapter in how organizations connect digital information with the physical environment around them. With the addition of FME Realize, FME has evolved into an All-data, Any-AI Spatial Computing Platform.
FME Realize brings spatial computing, augmented reality (AR), and the full power of FME to mobile teams: making it easy to visualize, interact with, and update data right in the field. From infrastructure management to asset inspections, you can put any data into real-world context, instantly.
Join us to discover how spatial computing, powered by FME, enables digital twins, AI-driven insights, and real-time field interactions: all through an intuitive no-code experience.
In this one-hour webinar, you’ll:
-Explore what FME Realize includes and how it fits into the FME Platform
-Learn how to deliver real-time AR experiences, fast
-See how FME enables live, contextual interactions with enterprise data across systems
-See demos, including ones you can try yourself
-Get tutorials and downloadable resources to help you start right away
Whether you’re exploring spatial computing for the first time or looking to scale AR across your organization, this session will give you the tools and insights to get started with confidence.
Cybersecurity Fundamentals: Apprentice - Palo Alto Certificate
Cybersecurity Fundamentals: Apprentice - Palo Alto CertificateVICTOR MAESTRE RAMIREZ Cybersecurity Fundamentals: Apprentice - Palo Alto Certificate
European Accessibility Act & Integrated Accessibility Testing
European Accessibility Act & Integrated Accessibility TestingJulia Undeutsch Emma Dawson will guide you through two important topics in this session.
Firstly, she will prepare you for the European Accessibility Act (EAA), which comes into effect on 28 June 2025, and show you how development teams can prepare for it.
In the second part of the webinar, Emma Dawson will explore with you various integrated testing methods and tools that will help you improve accessibility during the development cycle, such as Linters, Storybook, Playwright, just to name a few.
Focus: European Accessibility Act, Integrated Testing tools and methods (e.g. Linters, Storybook, Playwright)
Target audience: Everyone, Developers, Testers
Evaluation Challenges in Using Generative AI for Science & Technical Content
Evaluation Challenges in Using Generative AI for Science & Technical ContentPaul Groth Evaluation Challenges in Using Generative AI for Science & Technical Content.
Foundation Models show impressive results in a wide-range of tasks on scientific and legal content from information extraction to question answering and even literature synthesis. However, standard evaluation approaches (e.g. comparing to ground truth) often don't seem to work. Qualitatively the results look great but quantitive scores do not align with these observations. In this talk, I discuss the challenges we've face in our lab in evaluation. I then outline potential routes forward.
Agentic AI Explained: The Next Frontier of Autonomous Intelligence & Generati...
Agentic AI Explained: The Next Frontier of Autonomous Intelligence & Generati...Aaryan Kansari Agentic AI Explained: The Next Frontier of Autonomous Intelligence & Generative AI
Discover Agentic AI, the revolutionary step beyond reactive generative AI. Learn how these autonomous systems can reason, plan, execute, and adapt to achieve human-defined goals, acting as digital co-workers. Explore its promise, key frameworks like LangChain and AutoGen, and the challenges in designing reliable and safe AI agents for future workflows.
Sticky Note Bullets:
Definition: Next stage beyond ChatGPT-like systems, offering true autonomy.
Core Function: Can "reason, plan, execute and adapt" independently.
Distinction: Proactive (sets own actions for goals) vs. Reactive (responds to prompts).
Promise: Acts as "digital co-workers," handling grunt work like research, drafting, bug fixing.
Industry Outlook: Seen as a game-changer; Deloitte predicts 50% of companies using GenAI will have agentic AI pilots by 2027.
Key Frameworks: LangChain, Microsoft's AutoGen, LangGraph, CrewAI.
Development Focus: Learning to think in workflows and goals, not just model outputs.
Challenges: Ensuring reliability, safety; agents can still hallucinate or go astray.
Best Practices: Start small, iterate, add memory, keep humans in the loop for final decisions.
Use Cases: Limited only by imagination (e.g., drafting business plans, complex simulations).
Protecting Your Sensitive Data with Microsoft Purview - IRMS 2025
Protecting Your Sensitive Data with Microsoft Purview - IRMS 2025Nikki Chapple Session | Protecting Your Sensitive Data with Microsoft Purview: Practical Information Protection and DLP Strategies
Presenter | Nikki Chapple (MVP| Principal Cloud Architect CloudWay) & Ryan John Murphy (Microsoft)
Event | IRMS Conference 2025
Format | Birmingham UK
Date | 18-20 May 2025
In this closing keynote session from the IRMS Conference 2025, Nikki Chapple and Ryan John Murphy deliver a compelling and practical guide to data protection, compliance, and information governance using Microsoft Purview. As organizations generate over 2 billion pieces of content daily in Microsoft 365, the need for robust data classification, sensitivity labeling, and Data Loss Prevention (DLP) has never been more urgent.
This session addresses the growing challenge of managing unstructured data, with 73% of sensitive content remaining undiscovered and unclassified. Using a mountaineering metaphor, the speakers introduce the “Secure by Default” blueprint—a four-phase maturity model designed to help organizations scale their data security journey with confidence, clarity, and control.
🔐 Key Topics and Microsoft 365 Security Features Covered:
Microsoft Purview Information Protection and DLP
Sensitivity labels, auto-labeling, and adaptive protection
Data discovery, classification, and content labeling
DLP for both labeled and unlabeled content
SharePoint Advanced Management for workspace governance
Microsoft 365 compliance center best practices
Real-world case study: reducing 42 sensitivity labels to 4 parent labels
Empowering users through training, change management, and adoption strategies
🧭 The Secure by Default Path – Microsoft Purview Maturity Model:
Foundational – Apply default sensitivity labels at content creation; train users to manage exceptions; implement DLP for labeled content.
Managed – Focus on crown jewel data; use client-side auto-labeling; apply DLP to unlabeled content; enable adaptive protection.
Optimized – Auto-label historical content; simulate and test policies; use advanced classifiers to identify sensitive data at scale.
Strategic – Conduct operational reviews; identify new labeling scenarios; implement workspace governance using SharePoint Advanced Management.
🎒 Top Takeaways for Information Management Professionals:
Start secure. Stay protected. Expand with purpose.
Simplify your sensitivity label taxonomy for better adoption.
Train your users—they are your first line of defense.
Don’t wait for perfection—start small and iterate fast.
Align your data protection strategy with business goals and regulatory requirements.
💡 Who Should Watch This Presentation?
This session is ideal for compliance officers, IT administrators, records managers, data protection officers (DPOs), security architects, and Microsoft 365 governance leads. Whether you're in the public sector, financial services, healthcare, or education.
🔗 Read the blog: https://nikkichapple.com/irms-conference-2025/
Cyber security cyber security cyber security cyber security cyber security cy...
Cyber security cyber security cyber security cyber security cyber security cy...pranavbodhak Cyber security
Securiport - A Border Security Company
Securiport - A Border Security CompanySecuriport Securiport is a border security systems provider with a progressive team approach to its task. The company acknowledges the importance of specialized skills in creating the latest in innovative security tech. The company has offices throughout the world to serve clients, and its employees speak more than twenty languages at the Washington D.C. headquarters alone.
Supercharge Your AI Development with Local LLMs
Supercharge Your AI Development with Local LLMsFrancesco Corti In today's AI development landscape, developers face significant challenges when building applications that leverage powerful large language models (LLMs) through SaaS platforms like ChatGPT, Gemini, and others. While these services offer impressive capabilities, they come with substantial costs that can quickly escalate especially during the development lifecycle. Additionally, the inherent latency of web-based APIs creates frustrating bottlenecks during the critical testing and iteration phases of development, slowing down innovation and frustrating developers.
This talk will introduce the transformative approach of integrating local LLMs directly into their development environments. By bringing these models closer to where the code lives, developers can dramatically accelerate development lifecycles while maintaining complete control over model selection and configuration. This methodology effectively reduces costs to zero by eliminating dependency on pay-per-use SaaS services, while opening new possibilities for comprehensive integration testing, rapid prototyping, and specialized use cases.
ECS25 - The adventures of a Microsoft 365 Platform Owner - Website.pptx
ECS25 - The adventures of a Microsoft 365 Platform Owner - Website.pptxJasper Oosterveld My slides for ECS 2025.
Droidal: AI Agents Revolutionizing Healthcare
Droidal: AI Agents Revolutionizing HealthcareDroidal LLC Droidal’s AI Agents are transforming healthcare by bringing intelligence, speed, and efficiency to key areas such as Revenue Cycle Management (RCM), clinical operations, and patient engagement. Built specifically for the needs of U.S. hospitals and clinics, Droidal's solutions are designed to improve outcomes and reduce administrative burden.
Through simple visuals and clear examples, the presentation explains how AI Agents can support medical coding, streamline claims processing, manage denials, ensure compliance, and enhance communication between providers and patients. By integrating seamlessly with existing systems, these agents act as digital coworkers that deliver faster reimbursements, reduce errors, and enable teams to focus more on patient care.
Droidal's AI technology is more than just automation — it's a shift toward intelligent healthcare operations that are scalable, secure, and cost-effective. The presentation also offers insights into future developments in AI-driven healthcare, including how continuous learning and agent autonomy will redefine daily workflows.
Whether you're a healthcare administrator, a tech leader, or a provider looking for smarter solutions, this presentation offers a compelling overview of how Droidal’s AI Agents can help your organization achieve operational excellence and better patient outcomes.
A free demo trial is available for those interested in experiencing Droidal’s AI Agents firsthand. Our team will walk you through a live demo tailored to your specific workflows, helping you understand the immediate value and long-term impact of adopting AI in your healthcare environment.
To request a free trial or learn more:
https://droidal.com/
Grannie’s Journey to Using Healthcare AI Experiences
Grannie’s Journey to Using Healthcare AI ExperiencesLauren Parr AI offers transformative potential to enhance our long-time persona Grannie’s life, from healthcare to social connection. This session explores how UX designers can address unmet needs through AI-driven solutions, ensuring intuitive interfaces that improve safety, well-being, and meaningful interactions without overwhelming users.
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.
New Ways to Reduce Database Costs with ScyllaDB
New Ways to Reduce Database Costs with ScyllaDBScyllaDB How ScyllaDB’s latest capabilities can reduce your infrastructure costs
ScyllaDB has been obsessed with price-performance from day 1. Our core database is architected with low-level engineering optimizations that squeeze every ounce of power from the underlying infrastructure. And we just completed a multi-year effort to introduce a set of new capabilities for additional savings.
Join this webinar to learn about these new capabilities: the underlying challenges we wanted to address, the workloads that will benefit most from each, and how to get started. We’ll cover ways to:
- Avoid overprovisioning with “just-in-time” scaling
- Safely operate at up to ~90% storage utilization
- Cut network costs with new compression strategies and file-based streaming
We’ll also highlight a “hidden gem” capability that lets you safely balance multiple workloads in a single cluster. To conclude, we will share the efficiency-focused capabilities on our short-term and long-term roadmaps.
Co-Constructing Explanations for AI Systems using Provenance
Co-Constructing Explanations for AI Systems using ProvenancePaul Groth Explanation is not a one off - it's a process where people and systems work together to gain understanding. This idea of co-constructing explanations or explanation by exploration is powerful way to frame the problem of explanation. In this talk, I discuss our first experiments with this approach for explaining complex AI systems by using provenance. Importantly, I discuss the difficulty of evaluation and discuss some of our first approaches to evaluating these systems at scale. Finally, I touch on the importance of explanation to the comprehensive evaluation of AI systems.
UiPath Community Berlin: Studio Tips & Tricks and UiPath Insights
UiPath Community Berlin: Studio Tips & Tricks and UiPath InsightsUiPathCommunity Join the UiPath Community Berlin (Virtual) meetup on May 27 to discover handy Studio Tips & Tricks and get introduced to UiPath Insights. Learn how to boost your development workflow, improve efficiency, and gain visibility into your automation performance.
📕 Agenda:
- Welcome & Introductions
- UiPath Studio Tips & Tricks for Efficient Development
- Best Practices for Workflow Design
- Introduction to UiPath Insights
- Creating Dashboards & Tracking KPIs (Demo)
- Q&A and Open Discussion
Perfect for developers, analysts, and automation enthusiasts!
This session streamed live on May 27, 18:00 CET.
Check out all our upcoming UiPath Community sessions at:
👉 https://community.uipath.com/events/
Join our UiPath Community Berlin chapter:
👉 https://community.uipath.com/berlin/
Microsoft Build 2025 takeaways in one presentation
Microsoft Build 2025 takeaways in one presentationDigitalmara Microsoft Build 2025 introduced significant updates. Everything revolves around AI. DigitalMara analyzed these announcements:
• AI enhancements for Windows 11
By embedding AI capabilities directly into the OS, Microsoft is lowering the barrier for users to benefit from intelligent automation without requiring third-party tools. It's a practical step toward improving user experience, such as streamlining workflows and enhancing productivity. However, attention should be paid to data privacy, user control, and transparency of AI behavior. The implementation policy should be clear and ethical.
• GitHub Copilot coding agent
The introduction of coding agents is a meaningful step in everyday AI assistance. However, it still brings challenges. Some people compare agents with junior developers. They noted that while the agent can handle certain tasks, it often requires supervision and can introduce new issues. This innovation holds both potential and limitations. Balancing automation with human oversight is crucial to ensure quality and reliability.
• Introduction of Natural Language Web
NLWeb is a significant step toward a more natural and intuitive web experience. It can help users access content more easily and reduce reliance on traditional navigation. The open-source foundation provides developers with the flexibility to implement AI-driven interactions without rebuilding their existing platforms. NLWeb is a promising level of web interaction that complements, rather than replaces, well-designed UI.
• Introduction of Model Context Protocol
MCP provides a standardized method for connecting AI models with diverse tools and data sources. This approach simplifies the development of AI-driven applications, enhancing efficiency and scalability. Its open-source nature encourages broader adoption and collaboration within the developer community. Nevertheless, MCP can face challenges in compatibility across vendors and security in context sharing. Clear guidelines are crucial.
• Windows Subsystem for Linux is open-sourced
It's a positive step toward greater transparency and collaboration in the developer ecosystem. The community can now contribute to its evolution, helping identify issues and expand functionality faster. However, open-source software in a core system also introduces concerns around security, code quality management, and long-term maintenance. Microsoft’s continued involvement will be key to ensuring WSL remains stable and secure.
• Azure AI Foundry platform hosts Grok 3 AI models
Adding new models is a valuable expansion of AI development resources available at Azure. This provides developers with more flexibility in choosing language models that suit a range of application sizes and needs. Hosting on Azure makes access and integration easier when using Microsoft infrastructure.
AI Trends - Mary Meeker
AI Trends - Mary MeekerRazin Mustafiz Source: https://www.bondcap.com/reports/tai
GDG Cloud Southlake #43: Tommy Todd: The Quantum Apocalypse: A Looming Threat...
GDG Cloud Southlake #43: Tommy Todd: The Quantum Apocalypse: A Looming Threat...James Anderson The Quantum Apocalypse: A Looming Threat & The Need for Post-Quantum Encryption
We explore the imminent risks posed by quantum computing to modern encryption standards and the urgent need for post-quantum cryptography (PQC).
Bio: With 30 years in cybersecurity, including as a CISO, Tommy is a strategic leader driving security transformation, risk management, and program maturity. He has led high-performing teams, shaped industry policies, and advised organizations on complex cyber, compliance, and data protection challenges.
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