Component Metadata in Angular

Component metadata in Angular provides essential information about a component, such as its selector, template, and styles. This tutorial covers the key properties of component metadata and how to use them effectively to define Angular components.

What is Component Metadata?

Component metadata is defined using the @Component decorator. It provides Angular with the necessary information to create and display the component. Here is an example of a simple component with its metadata:

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

@Component({
  selector: 'app-example',
  templateUrl: './example.component.html',
  styleUrls: ['./example.component.css']
})
export class ExampleComponent {
  title: string = 'Example Component';
}

Key Properties of Component Metadata

Here are the key properties of the @Component decorator:

Using the Selector

The selector property defines the custom HTML tag that represents the component. This tag can be used in the templates of other components to include this component:

// app.component.html
<app-example></app-example>

Defining the Template

The templateUrl property specifies the path to the component's HTML template file:

// example.component.html
<h2>{{ title }}</h2>
<p>This is the example component.</p>

The template property allows you to define the HTML template inline:

@Component({
  selector: 'app-inline-template',
  template: '<p>This is an inline template!</p>'
})
export class InlineTemplateComponent {}

Defining Styles

The styleUrls property specifies an array of paths to the component's CSS files:

@Component({
  selector: 'app-example',
  templateUrl: './example.component.html',
  styleUrls: ['./example.component.css']
})
export class ExampleComponent {}

The styles property allows you to define CSS styles inline:

@Component({
  selector: 'app-inline-styles',
  template: '<p>This component has inline styles!</p>',
  styles: ['p { color: red; }']
})
export class InlineStylesComponent {}

Providers

The providers property allows you to specify dependency injection providers for the component:

@Component({
  selector: 'app-example',
  templateUrl: './example.component.html',
  styleUrls: ['./example.component.css'],
  providers: [ExampleService]
})
export class ExampleComponent {}

Animations

The animations property allows you to define animations for the component:

import { trigger, state, style, transition, animate } from '@angular/animations';

@Component({
  selector: 'app-animated',
  templateUrl: './animated.component.html',
  styleUrls: ['./animated.component.css'],
  animations: [
    trigger('fadeInOut', [
      state('in', style({ opacity: 1 })),
      transition(':enter', [ style({ opacity: 0 }), animate(300) ]),
      transition(':leave', [ animate(300, style({ opacity: 0 })) ])
    ])
  ]
})
export class AnimatedComponent {}

Conclusion

Component metadata in Angular provides essential information about a component, such as its selector, template, styles, and providers. By understanding and using the key properties of the @Component decorator, you can define and configure Angular components effectively. Happy coding!