In this tutorial, I will show you how start using template engines in your node js/express js applications. Template engines are the easiest ways to get started with building your express js application. I recommend you check out our video content and other useful resources on our YouTube channel and this blog, respectively.

NB: Basic node js/express knowledge required for this tutorial

What is template engine?

In simple terms, a template engine is a package that renders data in HTML pages. It easily allows us to create and use static html page.

One particularity with template engines is their ability…

In the previous sections, we’ve seen how to use basic routing between components and how to handle route parameters using different methods. We’ve also seen how to use the RouterLink directive to create route links. This section continues from the previous section with the other methods to implement navigation.

RouterLink Example with Angular 12

Let’s give a second look at how we used the RouterLink directive in the previous tutorial(s).

We created basic links using:

<a routerLink="/">Go To Home</a>

Or also:

<a [routerLink]="'/'">Go To Home</a>

We then created a link with a parameter using:

<a [routerLink]="['/product/',product.id]"></a>

Navigating Programatically Using Angular 12 Router.navigate() and Router.navigateByUrl()

The Angular 12 Router provides two methods that you…

In this section, we’re going to see how to handle route parameters with Angular 12 Router example using different methods: Snapshot and ParamMap Observable.

Angular provides a powerful router library that allows developers to implement advanced functionality in their Angular applications, besides basic component routing, such as

• Route protection using Angular guards,
• Route parameters,
• Child routes,
• Auxiliary routes, etc.

Handling Route Parameters with Angular 12

In the previous tutorial, we have created a basic routing between components with the Angular Router. In this one, we’re going to see how to handle route parameters in Angular 12.

We are going to start from the simple Angular application we’ve built in the previous tutorial which you can find from this repository or in CodeSandBox

This is the implementation of the ProductDetailComponent:

import…

Throughout this tutorial, we’ll learn about the Angular Router by building an Angular 12 example and will teach you everything you need to start using routing to build Single Page Applications with navigation, guards, resolvers, and animations.

We’ll also see how to use multiple outlets, redirect users from the empty path, use wild-card paths to implement 404 error pages and lazy load modules using the loadChildren() method.

Navigation and Routing Using the Angular 12 Router With Example

Now let’s get started with Angular routing. In this section, we’ll learn the basic concepts behind routing in Angular 12. …

Ivy is a complete rewrite of Angular’s rendering engine. In fact, it is the fourth rewrite of the engine and the third since Angular 2. But unlike rewrites two and three, which you might not have even noticed, Ivy promises vast improvements to your application. With Ivy, you can compile components more independently of each other. This improves development times since re-compiling an application will only involve compiling the components that changed.

Ivy also has a enormous focus on tree-shaking. This is the process in which the Typescript compiler looks at your code and figures out exactly which libraries are…

In the previous part of our Angular 12 tutorial series for JavaScript developers, we installed Angular CLI and created a project. Now, let’s see how to add Bootstrap to our project to style our application UI.

Parts in this series:

• Angular 12: Tutorial and Example
• Angular 12: Install the CLI & Create a Project
• Angular 12: Add Bootstrap 4 (This one)

We can use various methods for adding Bootstrap 4 to Angular. In our example, we’ll install bootstrap from npm and include it in the angular.json file of our project.

Go to your command-line interface and run the following commands…

In the previous part of our Angular 12 tutorial series for JavaScript developers, we introduced you to some of Angular 12 new additional features and to the application we’ll be building throughout this series. Now, let’s get started with our first practical step.

Parts in this series:

• Angular 12: Tutorial and Example
• Angular 12: Install the CLI & Create a Project (This one)
• Angular 12: Add Bootstrap 4

Angular provides an official tool for initializing projects that saves you from the hassle of configuring modern front-end development tools such as Webpack, and ESLint, etc. It’s available from npm and requires…

In this tutorial, we’ll quickly see how you can generate an Angular 12 project using the official CLI (Command-Line Interface) and then create an application for demonstrating basic concepts of Angular like importing and using built-in modules, creating components and services, and fetching data from a REST API server using HttpClient, the alternative/equivalent to Axios or the Fetch API for Angular developers.

Parts in this series:

• Angular 12: Tutorial and Example (This one)
• Angular 12: Install the CLI & Create a Project
• Angular 12: Add Bootstrap 4

Introducing Angular 12 and its New Features

Angular 12, which is an upgrade to Google’s popular TypeScript-based web framework, has…