Angular Component: What is it and How to Implement it?

You must have heard the word Component, but do you know what a component in Angular is? Let’s take a look at the concept of Angular Components, and how to implement them.

Table of Contents

• What is a Component in Angular?
• Angular Component Example
• Parts of an Angular Component
• Angular Component Lifecycle Events
• Angular Styles in Component
• How to Implement a Component?
• Wrapping up

For a visual explanation, you can watch our Angular Tutorial Video

What is a Component in Angular?

A component in Angular is a key building block of an Angular application. It is a reusable unit of an Angular application formed by a template and a class that controls a section of the screen. The class includes attributes and methods that describe the component’s behavior, while the template determines the component’s structure and appearance on the screen.

Components are used to divide a huge application into smaller, more manageable, and self-contained components. They communicate with one another via inputs, outputs, and services, resulting in a more modular and easy-to-maintain application.

Angular components are reusable and can be layered inside other components, allowing developers to create sophisticated user interfaces by mixing smaller, simpler components. Components can connect with one another via inputs, outputs, and services, making it easier to handle complicated interactions between different portions of the program.

Angular Component Example

Here’s an example of a simple Angular component:

In this example, we have an Angular component called GreetingComponent. The component is defined using the ‘@Component’ decorator, which provides metadata about the component to Angular. The selector property specifies the HTML tag that will be used to render the component in the template, in this case ‘<app-greeting>’.

The template property specifies the HTML template for the component, which contains a single H1 header. The header displays the value of the message property, which is bound to the template using Angular template syntax {{}}.

The styles property specifies the CSS styles for the component, which are scoped and applicable to the component. In this case, the H1 header has a green color.

The class GreetingComponent defines the behavior of the component. It has a single message property, which is a string.

When this component is used in the application, the template will be rendered as HTML, and the behavior of the component will be defined by the class. The H1 header will display the message “Hello, World!”, and the text will be displayed in green.

Learn more about Angular with our Angular Certification Course.

Parts of an Angular Component

An Angular component has several parts, such as:

1. Component Decorator: The component decorator is a JavaScript function that is used to define the metadata of a component. It contains information about the component, such as its selector, template, styles, and properties.
2. Selector: The selector is a string that defines the name of the component as it is used in templates.
3. Template: The template is a string or a reference to an external file that defines the HTML structure of the component.
4. Styles: The styles are a string or a reference to an external file that defines the CSS styles for the component.
5. Class: The class is a JavaScript class that defines the properties and methods of the component.
6. Input properties: Input properties are properties that are passed from a parent component to a child component. They are defined using the ‘@Input’ decorator and can be used to bind data from the parent component to the child component.
7. Output properties: Output properties are properties that are emitted from a child component to a parent component. They are defined using the ‘@Output’ decorator and can be used to notify the parent component of changes in the child component.
8. Lifecycle hooks: Lifecycle hooks are methods that are called at specific points during the creation, update, and destruction of a component. They provide a hook into the lifecycle of a component and allow you to perform custom logic at specific times.

Angular Component Lifecycle Events

Angular has 8 lifecycle hooks. Following are the events under angular component lifecycle:

ngOnChanges

This event is called whenever there is a change in input binding value. The method receives an object that maps the old and new values of each changed input property. This event is called before ngOnInit and can be used to respond to changes in input data.

ngOnInit

This event occurs after the constructor of the component followed by the initial call to ngOnChanges.This event is a good place to perform component initialization, such as fetching data or initializing local variables.

ngDoCheck

This event is triggered whenever Angular checks the component for changes. Change detection is the process by which Angular checks for changes in component data and updates the component’s view accordingly. The ngDoCheck method can be used to perform custom change detection logic, such as deep checking of complex objects.

ngAfterContentInit

This event takes place when Angular has processed the content of the component (ng-content).This event is a good place to perform initialization logic for content that is projected into the component.

ngAfterContentChecked

After each check of the component’s content this event is called. This event can be used to perform logic that depends on the component’s content, such as updating the count of the number of items in the content.

ngAfterViewInit

This function occurs when Angular has evaluated the views of the component (and child views). This event is a good place to perform logic that depends on the component’s view and child views, such as accessing elements in the view.

ngAfterViewChecked

This event is called after each check of the component’s views (and child views). This event can be used to perform logic that depends on the component’s views, such as responding to changes in view data.

ngOnDestroy

This occurrence takes place immediately before the component is destroyed. This event is a good place to perform cleanup logic, such as unsubscribing from observables, removing event listeners, and clearing timers.

To gain more insights about Angular, we recommend you to go through our Angular tutorial.

Angular Styles in Component

In Angular, you can apply styles to components in several ways. Each component has its own styles, which can be defined in a number of ways, including:

1. Inline styles: You can define styles directly in the component’s template using the style attribute. This is the simplest way to add styles to a component, but it can be less maintainable for larger projects.
2. Component-level styles: You can define styles for a component in its own ‘.css’ file. These styles will only apply to the component and its child components.
3. Global styles: You can define styles in a global ‘.css’ file that will be applied to the entire application.
4. Sass/SCSS styles: Angular supports Sass/SCSS styles, which provide additional features such as variables, functions, and mixins.

You can control the scope of the styles applied to a component using the encapsulation property of the component. By default, Angular uses “emulated” encapsulation, which means that the component’s styles are scoped to the component and its child components, but are not isolated from the rest of the application.

To change the encapsulation, you can set the encapsulation property in the component’s metadata to either ‘ViewEncapsulation.None’ or ‘ViewEncapsulation.ShadowDom’. If you set it to ‘ViewEncapsulation.None’, of the component’s styles, will be global and affect the entire application. If you set it to ‘ViewEncapsulation.ShadowDom’, the component’s styles will be scoped to the component and its child components, and will not affect the rest of the application.

How to Implement an Angular Component?

Implementing an Angular component involves the following steps:

1. Define the component class: Create a new TypeScript class and use the ‘@Component’ decorator to define the metadata for the component. In the metadata, specify the selector, template, and styles for the component.
2. Define the template: The template can be defined inline as a string or in an external file and referenced in the component metadata. In the template, you can use Angular templates, directives, and data bindings to define the structure of the component.
3. Define the class: In the class, you can define the properties and methods of the component. You can use the ‘@Input’ and ‘@Output’ decorators to define input and output properties. You can also implement lifecycle hooks to perform logic during specific stages of the component’s lifecycle.
4. Register the component: To use the component in your application, you need to register it in an Angular module. You can do this by adding it to the declarations array of the module.

Preparing for job interviews? Refer our Angular Interview Questions.

Wrapping Up

Angular components are essential in the creation of Angular apps. They allow for the definition of modular and reusable sections of an application that can be readily utilized and combined to construct complicated user interfaces. Developers can construct well-structured and maintained apps by knowing the various aspects of an Angular component.

If you have any queries about Angular components, we invite you to post your queries on our Community Page!