Angular 12: Tutorial and Example (Bootstrap)

Angular 12: Tutorial and Example (Bootstrap)

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 reached a beta stage, at the time of writing this article, with a preliminary release now available.

Some features in the beta include:

You can consult the full list of changes on GitHub.

Angular 12 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 12 project using the Angular CLI, then we’ll add Bootstrap 4 in the third part.

This post is originally published at WebTutPro

✋If you have any questions about this article, ask them in our GitHub Discussions 👈 community. You can also Gitter

✋ Want to master Angular 14? Read our angular tutorial and join our #DailyAngularChallenge where we learn to build components, directives, services, pipes and complete web, mobile, and desktop applications with latest Angular version.

✋ Make sure to join our Angular 14 Dev Community 👈 to discuss anything related to Angular development.

❤️ Like our page and subscribe to our feed for updates!

Find a list of emojis to copy and paste