This guide you take throughout learning about Angular 10/9 components by example.

We’ll understand what an Angular component is with examples. Angular components are the building blocks of Angular apps.

Before tackling the examples, let’s see what we will be learning throughout this article.

What You’ll Learn About Angular Components?

What an Angular component is?
How to Initialize a new Angular 10 project?
How to generate a new Angular 10 component?
How to bind component properties in the template?
How to bind user actions from the template to the component?
What are component life-cycle hooks with examples?
How to communicate between components using @Input and @Output decorators?
How to dynamically load a component with example?
How to style a component?
Before we get started with this guide, we need to have the following prerequisites:

  1. Node.js and npm installed on your development machine,
  2. Angular 10/9 CLI.

What is an Angular Component?

Simply put, an Angular component controls a part of the UI of your application. For example, the header, footer, or whole page can all be components. Depending on how much re-usability, you want in your code.

#angular

Angular 10 Components: Input and Output/Pipes and Directives with Examples
2.00 GEEK