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.
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.
@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