Forms in Angular

Using forms for user input is the mainstay of any frontend application. Angular framework provides a very robust API for handling forms. In Angular there are two different approaches to handling user input through forms-

• Template-driven forms
• Reactive forms

Both of these approaches for handling forms in Angular provides the functionality to-

1. Capture user inputs from the UI (View)
2. Validating user input
3. Creating a form model and data model
4. Provide a way to track changes in the form and update model accordingly.

Angular Cross Component Communication Using Subject Observable

In this post we’ll see how to use Subject observable for cross component communication in Angular.

Table of contents

1. Subject in RxJS Library
2. Types of Subject
3. Communication between Angular component using Subject example
4. Communication between Angular component using BehaviorSubject example

Subject in RxJS Library

Subject is a type of Observable using which you can multicast values to many Observers, which makes it different from a plain Observables which are unicast (each subscribed Observer owns an independent execution of the Observable).

What is Client Side Routing in Angular

While working with any modern JS frameworks like Angular, React, Vue you would have definitely come across two terms Single Page Application (SPA) and client side routing. In this post we’ll see what is client side routing using Angular as example framework.

Client side routing

In a traditional web application every request for displaying a page goes to the server and results in a full page load. Whereas in a Single page application each request doesn’t go to the server. Web server gives a single page, any further rendering is done locally by the Java script. So, in a SPA you will get a single page and part of the page is updated dynamically for further requests.

Location Strategies in Angular Routing

In Angular routing we have two location strategies that we can use to implement client side routing.

1. PathLocationStrategy
2. HashLocationStrategy

In this post we’ll see what is location strategy, which routing strategy to chose for your SPA and what are the differences between the HashLocationStrategy and PathLocationStrategy.

How to Create a Custom Observable in Angular

In this post we’ll see how to create a custom Observable in Angular. Observables are based on Observer design pattern in which an object, called the subject, maintains a list of observers and notifies them automatically of state changes. Some thing like this-

public interface Subject {
  public void register(Observer obj);
  public void unregister(Observer obj);

  public void notifyObservers();
}

Angular Route Resolver - Passing Data Dynamically

In the posts route parameters and Angular query parameters we have seen examples of passing data in the route and using it in the component as it is or to retrieve more data. This process happens once you have navigated to a route but you can also get data before you have navigated to a route. That is done using Angular Resolve interface that classes can implement to be a data provider. A data provider class can be used with the router to act as a resolver and it can resolve data during navigation. Using Resolve interface in Angular gives you one way to get data dynamically before navigating to a route.

Angular Resolve interface

Resolve interface has a single method resolve() that is invoked when the navigation starts. The router waits for the data to be resolved before the route is finally activated.

Angular Route - Passing Static Data

We have already seen how to pass data to a route using route parameters and using Angular query parameters. In this post we’ll see how to pass static data to an Angular route. Static data is configured at the time of defining a route using data property.

For example, here is a route definition with data property-

{path: 'wrongpath', component: PageNotFoundComponent, data :{ message:'Page not found'}},

As you can see with data property you can pass an object having key, value pairs.