Angular Workshop

What Will I Learn?

We will review the tools every frontend developer should know, and dive into implementing a scalable Angular application.

Weather you've worked with other frontend frameworks before, or not, the strength of Angular will amaze you.

You will experience that Angular embraces:

Not just a framework but an enterprise level full platform

State management, Immutability and Change Detection

Apps that scale and teams that scale

Super Angular

Type safety and OOP with Typescript

Functional Reactive Programming with Signals & RxJS

Best Practices for modern frontend development

Warranty: Getting a hold of those super-powers will enable you to build outstanding frontends!

The Staff

Yaron Biton

Professional trainer ; misterBIT CTO ; Building the web for over 20 years ; Mamram graduate

Roni Krakover

Frontend developer and Project manager at misterBIT

Nadav Sinai

Web technologies master and an artist

Stav Ya'ar-Bar

Fullstack Web Developer, Senior trainer and more. "Flow with the river and build amazing apps!"

We are here to help you make the best of your coding time!

The Plan

Javascript is everywhere now-days and writing large scale applications with it has been through much progress.

This workshop is designed to deliver the knowledge A-Z and to allow you to put those tools into an effective practice.

Building Modern Apps with Angular

Angular is built with Typescript and uses Signals as it's reactive primitive, it also includes RxJS reactive building blocks such as Subjects and Observable

Lets get a deep look into Components, Pipes, Services, Forms, Routing, Http, Dependency Injection, Component lifecycle, Content projections and other communications.

Lets understand modules types, project structuring, debugging and testing, change detection and data flows (Redux, NGRX)

Angular Workshop

Modern Frontend development and Angular

Review the current state of frontend development and single page web applications, task runners, module loaders, ES6, Modular CSS & SASS, and setup our initial project

Module 1
Kicking Off

Practical Typescript

TypeScript is a typed superset of JavaScript that compiles to plain JavaScript.

It's a productivity booster, a code-quality enabler and the most elegant way to get dependency injection in Angular

  • TypeScript Language Features
  • The Type System
  • Interfaces, Classes and Generics
  • Running TypeScript in a Browser
  • Exceptions, Memory, and Performance
  • Building Declaration files
Module 1
Setting the ground

Programming with Signals & RxJS

In a model-driven web application, one of the main jobs of the framework is synchronizing changes to the application's data model and the UI.

We refer to this mechanism as reactivity, and every modern web framework has its own reactivity system.

In modern Angular every piece of important data is wrapped and used as signals

So, signals become immediately the most basic and important feature in Angular

Rx.js is the Reactive Extensions for JavaScript, an API for asynchronous programming, built-in the Angular framework's APIs: Form controls, route params and server communications all work with Observable streams.

Let's examine the most important operators you should know about and unleash the force of functional reactive programming.

Module 1
Setting the ground

Directives & Components

Introducing the component as the core primitive building block of the application

  • SPA and MVC in Angular
  • The Module system
  • Directives & Components
  • Template Syntax
Module 2
Understanding Components

Binding, events, forms, pipes

Understand the nitty-gritty of the most important concepts of the framework


  • Expressions & Statements
  • One way binding and Two-way data binding
  • Event listeners
  • Components styling encapsulation
  • Templates variables
  • Built-in directives

    Components & Directives

  • Attribute Directives, Structural Directives & Components
  • Using components Input & Output
  • Component life cycle hooks
  • Host and Views

    Using and Building Pipes

  • Built in pipes
  • Chaining and parameterizing
  • Custom pipes
  • Stateful (un-pure) pipes
  • Asynchronous pipes
  • Built-in directives
Module 2
Hooking it up

Dependency Injection

The DI system that comes with Angular is one of the most beautiful pieces of codes we've seen, let's get excited.

  • Deep look into the DI system
  • Working with the injector
  • Factories and Injectables
  • Mocking Injections for Unit Testing
  • Overriding behaviors with Child Injectors
  • Advanced use cases
Module 3
Injecting stuff

Component's Communication

It’s sometimes desired to interact with other components such as the host, the children or projected content. Let's review some useful ways to achieve that.

Module 3
Components Relationships

Life cycle hooks

The inversion of control design pattern in at the roots of Angular, so knowing which hooks are available for us to tap into key moments is important.

Module 3
Hanging on hooks

Server Communication

Awake our frontend by communicating with servers using XHR, JSONP, we will use Observables and also look into Building real time apps using web sockets.

Module 4
Talking to servers

Routing & Navigation

Single Page applications have become the standard for modern UX, lets unlock the power of the router

  • Navigation overview
  • Using Router-Outlets and Router links
  • Using the Router and Location
Module 4
Route to other dimensions

Simplified Forms

  • Building forms, and using Controls
  • Validations and Messages
  • Tracking and communicating changes
Module 4
Basic Forms

Project Best Practices

Component types, module types, structuring your bits right

Module 5
Structure Matters


Debugging & testing tools for Angular

Module 5
Testing is Caring

Into the Change Detection

Tracking changes over time and reflecting them efficiently is the key for having a rich, flowing, real time application.

Module 5
Detecting Changes

Data Flow

In the past it was not uncommon to have bits and pieces of state strewn across our application tucked inside of controllers, services, routes, directives, and templates. When the application grows, this approach is hard to scale.

In this session we will dive into state management and one way data flows, immutability, stores and Redux.

Module 5
All about your state

A brave look at the future

The frontend scene is changing, as HTML, CSS and Javascript are used to build web apps, server side, mobile, desktop, robots and what not.

In this session we will look at different standards, libraries and tools, and how Angular will play part in the future of frontend.

Module 6
Gazing at the future

Get the job done

We are putting a lot of effort to make this workshop the best it can be, and capture the most important ideas and coding practices in modern frontend development. We help developers use the newly-born-super-powers of web technologies to get the job done. Expect to leave this workshop with a heap of useful examples and resources.

Get Ready

We will rely on the foundations of HTML, CSS and Javascript, they will be the dance floor upon which we will play with angular and friends, if you are converting from other technologies, we suggest you (1) get excited and (2) get a hold of those technologies. If you need some help and guidance, just let us know.

Tailored training

We have trained tons of developers and helped companies build up their teams and knowledge for over twenty years. We also provide on-site tailored sessions designed to meet your special needs, please contact us for any question, or provide your details below and we will get back to you shortly.

Contact Us

and we will be with you shortly