Angular Component

 

Angular components are a core building block of Angular applications. A component is a self-contained piece of code that encapsulates the HTML, CSS, and TypeScript code needed to create a reusable user interface element. Components are typically used to create elements such as buttons, forms, tables, and other user interface elements.

 

What is an Angular Component?

An Angular component is a TypeScript class that encapsulates a view, including its associated data and behavior. It's typically used to represent a single UI element, such as a header, footer, or product list. Each component has its own template, which defines the HTML markup and data binding instructions. Components can also have styles associated with them, making it easy to create visually consistent user interfaces.

 

Creating an Angular Component

To create an Angular component, we can use the ng generate component command in the command line or create the files manually. The ng generate component component_name command or ng g c component_name creates a new directory with the component files, including the .ts, .html, & .css & test files.

For example, to create a component called app-header, we would use the following command:

Method 1.

ng generate component app-header

 Method 2.

ng g c app-header

This would create a new directory called app-header, with the following files:

  • app-header.component.ts: The TypeScript file for the component
  • app-header.component.html: The HTML template for the component
  • app-header.component.css: The CSS styles for the component

 

Anatomy of an Angular Component

Let's take a closer look at the anatomy of an Angular component. Here's an example of what a simple component might look like:

Here's an example of an Angular component that displays a simple message:

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

@Component({
  selector: 'app-header',
  templateUrl: './app-header.component.html',
  styleUrls: ['./app-header.component.css']
})
export class AppHeaderComponent {
  title = 'My App';
}

In this example, we define a new component called MessageComponent.

  • @Component: This is a decorator that indicates that this class is an Angular component. It takes an object as an argument, which specifies various properties of the component, such as its selector, template, and styles.

  • selector: This property specifies the selector used to identify this component in HTML markup.

  • templateUrl: This property specifies the URL of the HTML template for this component.

  • styleUrls: This property specifies the URLs of the CSS styles for this component.

  • export class: This is the TypeScript class that defines the component. It contains the data and behavior associated with the component.

  • title: This is an example of a data property that can be used in the component's template.

 

We also define a template for the component's HTML markup in a separate file called message.component.html:

    <p>{{title}}</p>

This template simply displays the value of the message property in a paragraph element.

 

Using an Angular Component

Once we've created a component, we can use it in our application by adding its selector to our HTML markup. For example, if we have a component with a selector of app-header, we could use it in our app component like this:

<app-header></app-header>

This would insert the contents of the app-header component's template into the HTML document.

 

In addition to the basic properties and methods of a component, Angular also provides a number of lifecycle hooks that allow you to execute code at specific points in the component's lifecycle. For example, the ngOnInit hook is called when the component is initialized, and can be used to perform any setup that needs to be done before the component is displayed.

Here's an example of using the ngOnInit hook to set the value of the message property to a value passed in from a parent component: 

import { Component, OnInit, Input } from '@angular/core';

@Component({
  selector: 'app-header',
  templateUrl: './app-header.component.html',
  styleUrls: ['./app-header.component.css']
})
export class AppHeaderComponent implements OnInit {
  @Input() title: string | undefined;
  
  constructor(){}

  ngOnInit() {
    if (!this.title) {
      this.title = 'Hello, World!';
    }
  }
}

 

In this example, we've added a new @Input property called message, which allows the value of the message property to be set from a parent component. We've also implemented the OnInit interface and added an ngOnInit method, which is called when the component is initialized. If the message property hasn't been set, we set it to a default value of "Hello, World!".

Overall, Angular components provide a powerful and flexible way to create reusable user interface elements in Angular applications. By encapsulating the HTML, CSS, and TypeScript code needed to create a component, you can create complex user interface elements that are easy to maintain and reuse throughout your application.

 

Conclusion

In conclusion, an Angular component is a self-contained building block of an application that encapsulates a view and its associated data and behavior. Components are easy to create and reuse, and they play a key role in building complex applications. By using the ng generate component command, we can quickly create new components, and by understanding the anatomy of a component, we can create powerful and flexible user interfaces.