Angular @Component Decorator With Examples

Decorators or annotations are used to provide metadata about the entity where these decorators are added. Angular @Component decorator provides metadata about the class and tells Angular that the decorated class is a Component class.

Angular @Component provides configuration metadata that determines how the component should be processed, instantiated, and used at runtime.

For example-

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

As you can see selector property here specifies value as ‘app-root’ which means any <app-root></app-root> tags that are used within a template will be compiled using the AppComponent class and get the functionality as defined in the class.

templateUrl is specified as ./app.component.html which means view template is loaded from the file app.component.html in the current directory.

Using styleUrls you can specify One or more relative paths or absolute URLs for files containing CSS stylesheets to use in this component. Here ./app.component.css is specified as css file which means styling for the component is done using hello-world.component.css in the current directory. By specifying style fields like this you can associate a specific css file to a component.

Apart from these three options there are many more options you can specify with @Component decorator.

1. changeDetection- Using this option you can specify the change-detection strategy to use for this component. When a component is instantiated, Angular creates a change detector, which is responsible for propagating the component's bindings.

There are two options-

• OnPush- sets the strategy to CheckOnce (on demand).
• Default- sets the strategy to CheckAlways.

To use it you need to import ChangeDetectionStrategy from '@angular/core' and then specify the startegy as

changeDetection: ChangeDetectionStrategy.OnPush

2. template- Rather than specifying a separate template file using templateURL you can provide inline template for an Angular component using template option.

3. styles- Just like template using styles you can provide one or more inline CSS stylesheets using styles option.

Angular @Component Decorator Example

Here is an example of Angular component where inline CSS is provided using styles option and inline template is provided using template option.

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

@Component({
  selector: 'app-hello-world',
  styles: [`
    .highlight {
      background-color: yellow;
      font-family: Helvetica, Arial;
      font-size: 16px;
    }
  `],
  template: `
    <h4 class="ui horizontal divider header">
      This is inline Template example
    </h4>
    <span class="highlight">Hello Users</span>
  `
})
export class HelloWorldComponent {
  constructor() { }

}

That's all for this topic Angular @Component Decorator With Examples. If you have any doubt or any suggestions to make please drop a comment. Thanks!

---

Related Topics

1. How to Install Node.js and NPM in Windows
2. How to Setup Angular
3. Angular Application Bootstrap Process
4. Creating New Component in Angular
5. Angular First App - Hello world Example

You may also like-

1. Angular One-Way Data Binding Using String Interpolation
2. Angular Two-Way Data Binding With Examples
3. Angular ngIf Directive With Examples
4. Forms in Angular
5. Difference Between equals() Method And equality Operator == in Java
6. MapReduce Flow in YARN
7. Java Program to Detect And Remove Loop in a Linked List
8. Spring MVC - Binding List of Objects Example