What are Ionic decorators?

Decorators are wrapper functions used to define metadata or to extend the functionality of a class without modifying it. In the Ionic framework, they always sit on top of the class.

Syntax

Decorators are always used with a prefix @ and must contain parenthesis () after the decorator’s name, i.e., @decorator_Name(). As mentioned, decorators are wrapper functions, so the class which we want to wrap should follow immediately after the decorator.

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {

  constructor() {}

}

In the above code snippet, @Component is a decorator, and everything within {} is option:value. The class HomePage is a component whose metadata is defined by the decorator.

Most-used decorators in Ionic application

@Component: Declares a class as a component and gives metadata about it.
@Injectable: Marks that the class has dependencies and is available to be injected.
@Directive: This marks the class as a directive, and you can specify the metadata using this directive.
@Pipe: This is used to format the data in your template(s). It must implement the PipeTransform interface.

Free Resources

Copyright ©2025 Educative, Inc. All rights reserved