Angular Components

Deep dive into angular components

Introduction

If you new to angular you can follow the links below to:

Setup angular in your machine

Understand angular structure and its files

To create a component, verify that you have met the following prerequisites:

1. You have installed Angular CLI. If not follow the link above ob setup angular.

ng --version

2. Create a new workspace. The below command is used to create a project if you had not created it.

ng new my-app

Components

These are the main building blocks of angular applications. Each component consists of:

• An HTML template that declares what renders on the page
• A Typescript class that defines behavior
• A CSS selector that defines how the component is used in a template
• Optionally, CSS styles applied to the template

Creating a component using Angular CLI

Step 1: navigate to your project directory

Step 2: Run the command below

ng generate component <component-name>

The command above will create:

• A folder named after the component
• A component file, <component-name>.component.ts
• A template file, <component-name>.component.html
• A CSS file, <component-name>.component.css
• A testing specification file, <component-name>.component.spec.ts

Create a component manually.

Source: Angular documentation