Recently, my curiosity led me to embark on a journey to learn Angular, a framework I hadn’t worked with before. To document this learning process, I’ve chosen Medium as a platform, hoping to receive valuable feedback and expedite my learning curve. Before we dive into the heart of this article, let’s begin with a brief introduction on how to create an Angular project.

Before we dive into the heart of this article, let’s begin with a brief introduction on how to create an Angular project.

Getting started with Angular

Firstly, we need to install the Angular CLI tool globally on our computer. To achieve this, run the following command:

npm install -g @angular/cli

With the Angular CLI tool in place, we can now proceed to create our Angular project. Note that 1-components serves as the project's name, which you can customize to your preference:

ng new 1-components

Now that our project is ready, it’s time to explore Angular components.

What are Angular Components?

Angular components serve as the fundamental building blocks of Angular applications, encapsulating distinct sections of both the user interface and application logic. Their reusability simplifies the management of complex user interfaces by breaking them down into manageable parts.

Key Components of an Angular Component

An Angular component consists of four crucial parts:

1. TypeScript Class: Defines the component’s behavior.
2. HTML Template: Specifies which elements are rendered.
3. Selector: Identifies how the component is utilized within HTML templates.
4. Styles: Determines how the component is styled. (obviously)

Building our first Angular component

Initially, we will embed the template and styles directly into the TypeScript file, later splitting them into separate files. Let’s construct our first component. Inside the src folder, create a components subfolder and a file named button.component.ts, then add the following…