Angular 13 tutorial

Categories: Angular

Angular 13 tutorial: Build a web app by example with Bootstrap 4

In this tutorial, we’ll quickly see how you can generate an Angular 13 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 13: Install the CLI & create a project
• Angular 13: Add Bootstrap 4
• Angular 13 tutorial and example: an introduction

Angular 13 tutorial and example: an introduction

Angular 13, which is an upgrade to Google’s popular TypeScript-based web framework, has been finally released.

Some features in the beta include:

1. View Engine is no longer available in Angular as of v13 
2. Removing View Engine enables Angular to reduce its dependance on ngcc (Angular compatibility compiler)
3. Changes to the Angular Package Format (APF)
4. Libraries built with the latest version of the APF (Angular package format) will no longer require the use of ngcc because of standardization on more modern JS formats such as ES2020.
5. Improved Component API
6. You no longer need to inject ComponentFactoryResolver in the constructor to dynamically create components.
7. End of IE11 support
8. Improvements to the Angular CLI
9. Angular CLI now supports persistent build cache by default for new v13 projects. See more details here.
10. Framework changes and dependency updates ( TypeScript 4.4, Rxjs 7.4)
11. Support for TypeScript 4.4 . See here 
12. RxJS 7.4 is now the default
13. Existing apps using RxJS v6.x will have to manually update using the npm install rxjs@7.4 command. Migration instructions can be found here
14. Support extended to Adobe Fonts
15. Inlining fonts can improve your app performance by speeding up the First Contentful Paint (FCP)
16. This change is now enabled for everyone by default! All you need to do is ng update
17. Improvements to Angular tests
18. Angular material component updates

You can read about the full list of changes on GitHub.

Angular 13 Prerequisites

Before start learning Angular, you need to have the following prerequisites:

• Knowledge of JavaScript,
• Familiarity with TypeScript (classes and decorators)
• Node.js and npm installed on your development machine

We’ll be learning step by step how to build a working application that gets data from a third-party REST API. You’ll get articles including the term “frontend development” on the web and display them using Bootstrap 4.You’ll learn to use Angular HttpClient to communicate with the API to fetch data and Bootstrap components to display data.

In the next part, we’ll learn how to generate a new Angular 13 project using the Angular CLI, then we’ll add Bootstrap 4 in the third part.