Angular router package already has all the required functionality which a generic Single Page Application needs. In this article, I would like to discuss Resolver which is part of Angular Router. There are a few use cases where our page needs the data each time the routes get loaded. It could be statically (passing hardcoded or fixed data) or dynamically (loading data from the server). Along with this, we also want that if the data is not found for that specific page then we do not want to visit it and get navigated to some other route or page. Typically use case would be loading a page that contains a user's data but let's say no data is found for that specific user then we want to navigate the application to the edit the details page.

The way we navigate in an SPA(Single Page Application) is totally different from navigation we have been doing in our old traditional application. If you observe the difference between these two, you would find that applications with a Single Page have much better user experience as the pages served by the application would be much faster than traditional apps where the pages have to be requested from the server each time user makes requests.

This article is all about Template Reference variable or Local Reference variable, whatever you can say. I think you can get some idea with the name itself “Template Reference” which says we are looking forward to putting a reference to any template.

Have you ever wondered, why do we place * with the structural directives like *ngFor, *ngIf, *ngSwitchCase because this indicates angular that these are structural directives. Structural directives with start(*) are the pretties way to use them but behind the scenes, angular transform them into something else. Lets figure out.

In my previous post, we gone through Directive in Angular and their types. I admit that it was not a deep article about directive but we can explore it in this article. Now will try creating our own basic attribute directive and will also learn how could we create it better. For that, we will start with a basic project setup. So, Let us do it.

Let’s take a tour of Angular directives. Since, it is one of the most important functionality of Angular, we should surely dive in to understand it in better way. We will also make our own directives which will instruct the DOM element to show some behavior on which it is being attached.

In your daily life of programming, you must have gone through call(), apply() and bind() methods while dealing with functions. Lets understand one by one.

How does our browser or server hosting our application know that it should render the content of our app component html here. Actually it is not the file get served by our server, instead the “index.html” file served by the server. Since angular is a framework which allow you to create single page application, this is the single page.