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:

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…


Angular 12: Install the CLI & Create a Project
Angular 12: Install the CLI & Create a Project

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 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 app from scratch
Angular 12 app from scratch

Introducing Angular 12 and its New Features

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


More often than not, we need to generate our Angular components inside specific folders for the sake of better structuring our application.

This is how I use Angular CLI to generate a component inside a specific folder.

We can simply use the ng g c command followed by the folder path as follows:

ng g c buttons/home

This command will generate a home component inside the app/buttons/home folder.

Please note that if the buttons folder doesn’t exist Angular CLI will automatically create it.

If you don’t want to have the home subfolder created, you simply need to add the --flat


In this example, We’ll show you how to build an Angular 11 news app with Bootstrap 4 CSS styling. This example shows Bootstrap integration with Angular, Angular CLI, Components, Services, and sending HTTP requests with HttpClient to a third-party REST API.

This is an example app built using Angular 11 and Bootstrap to build a beautifully styled news app with header, jumbotron, and card UI components.

Overview

We’ll be building an Angular 11 application where users can:

  • Use Angular CLI to generate a project,
  • Create and use Angular components,
  • Create and inject Angular services,
  • Use HttpClient to send HTTP requests to…

In this tutorial, we’ll learn about web components and we’ll use Angular to build a simple web component.

Angular is a web platform for building frontend web applications. It makes use of various concepts such as components, dependency injection and data binding.

Angular components are reusable pieces of code that control a part of the application UI. They are not web components but Angular provides the elements package which helps export Angular components as web components.

Before getting started to build the example let’s first introduce web components.

Introducing Web Components

Web components are a set of browser APIs that enable developers to…

Mr Nerd

Developer and technical author. Read more articles at Techiediaries

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store