Components introduction

Components are the building blocks of Angular applications. They help to organize an application into smaller, reusable pieces for a more maintainable codebase.

Components are used to:

• Break up the application into smaller components.
• Reuse the same block in different parts of the application.
• as dedicated routes with their own URL.

Note

If you are familiar with components with another frontend framework, the concept is the same.

Our first component

Our project already has a default component called app.

It’s made of 3 files:

• app.component.ts: The component class code, written in TypeScript.
• app.component.html: The component template, written in HTML.
• app.component.css: The component’s private CSS styles.

Think about the human body:

• The HTML file is the bones, the structure,
• The TypeScript file is the brain and muscles, the logic,
• The CSS file is the skin, how it’ll look like.

Each of these files is a part of the component.

Enterprise applications are made of many components. Each component is a piece of the application that controls a portion of the screen. You’ll learn how to create a new component in the next step.