Introduction to Angular Component

Components are the main building blocks in Angular. A typical Angular application is represented by a tree of elements starting with a single root component. An Angular framework allows us to develop applications in a component-based approach.

Why we need an angular component ?

We can create custom HTML element like <student> using component in an Angular. These components are standalone that have custom functionality attached to them. These standalone components limit the amount of coupling in our application design.

How to create an angular component ?

The easiest and quickest create a component is using Angular CLI. To generate the hello-world component, we need to run the following command:
ng generate component hello-world

The @Component decorator

The @Component is an annotation that tells Angular, that the class/template/style, which is attached to a particular component. Annotations provide metadata to combine all the parts together into a component. The @Component decorator is used to define the associated metadata.

import { Component } from '@angular/core';

@Component({
  selector: 'app-hello-world',
  templateUrl: './helloWorld.component.html',
  styleUrls: ['./helloWorld.component.css']
})
export class HelloWorldComponent {
  // Properties & methods
}

A component class interacts with the view through an API of properties and methods. The @Component decorator support multiple properties and many of them are optional.
We will list some important used properties
selector: This is the name of the HTML tag representing this component
templateUrl : This is the path to an external file where the template resides and will render when Angular finds its element instance.
styleUrls: An array of paths to external files with styles to be applied to this
component’s view
encapsulation: This is the style encapsulation strategy used by this component is optional.

You can read up more information on components, read angular components in the official Angular Docs. Please check our other articles on the
1. Angular Component life cycle
2. How do angular components communicate with each other.?