Important Decorators and functions from `@angular/core` in Angular
2 min readJan 15, 2023
Let start without wasting our time:
- @Component: This decorator is used to define a component in an Angular application. It takes an object as an argument, which contains the metadata for the component, such as its selector, template, and style.
- @Input(): This decorator is used to define an input property in a component, which can accept data from the parent component. The parent component can bind to this property using property binding in the template.
- @Output(): This decorator is used to define an output property in a component, which can emit events to the parent component. The parent component can listen to these events and handle them to receive data from the child component.
- EventEmitter: This class is used in conjunction with the
@Output()
decorator to create events in a component that can be emitted to the parent component. - @ViewChild(): This decorator is used to access the child component instance in the parent component. Once you have access to the child component, you can set its properties directly to pass data to the child component.
- @ViewChildren(): This decorator allows to access multiple children component instances and set their properties.
- @Injectable(): This decorator is used to define a service that can be injected into other components or services. It allows you to share data and functionality across multiple parts of the application.
- @NgModule: This decorator is used to define an Angular module.
- @Directive: This decorator is used to define a directive in an Angular application. Directives are used to manipulate the DOM and can be used to create reusable components.
- @HostBinding: This decorator is used to bind a property of a directive to a host element property.
- @HostListener: This decorator is used to listen to events on the host element and execute a method in the directive.
- @NgIf: This structural directive is used to conditionally add or remove an element from the DOM based on a boolean condition.
- @NgFor: This structural directive is used to iterate over a collection and create a template for each item in the collection.
- @NgSwitch: This directive is used to conditionally display elements based on the value of an expression.
- @NgStyle: This directive is used to bind a set of styles to an element based on the value of an expression.
- @NgClass: This directive is used to bind a set of CSS classes to an element based on the value of an expression.
- @Pipe: This decorator is used to define a pipe in an Angular application. Pipes are used to transform data in a template.
- @Inject: This decorator is used to inject a dependency into a constructor or a property of a class. It is used in conjunction with the
@Injectable()
decorator. - @ContentChild: This decorator allows to access the first element or the directive matching the selector from the content.
- @ContentChildren: This decorator allows to access the list of elements or directives matching the selector.
Will add code example for each of them, but later!