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.
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>
<a [routerLink]="'/'">Go To Home</a>
We then created a link with a parameter using:
The Angular 12 Router provides two methods that you…
Angular provides a powerful router library that allows developers to implement advanced functionality in their Angular applications, besides basic component routing, such as
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.
This is the implementation of the
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
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…
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…
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, 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
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
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.
We’ll be building an Angular 11 application where users can:
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.
Web components are a set of browser APIs that enable developers to…
Developer and technical author. Read more articles at Techiediaries