Trusted answers to developer questions
Trusted Answers to Developer Questions

Related Tags

decorators
ionic

What are Ionic decorators?

Ayyaz Sheikh

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.

RELATED TAGS

decorators
ionic

CONTRIBUTOR

Ayyaz Sheikh
Copyright ©2022 Educative, Inc. All rights reserved
RELATED COURSES

View all Courses

Keep Exploring