Components
Structure of Angular Component
Each component of an Angular application has a few important parts which are as follows −
- @component Decorator: All the application related configurations are written inside this decorator.
- HTML Template: View of the Angular application.
- Styles: It controls the styles of a view.
- TypeScript Class: Code related to behavior of the Angular application goes into this class.
Component Interaction
Component interaction is one of the important and necessary features in the context of component based architecture. Angular provides multiple options to pass and receive data between components.
You can share data from parent component to child component as well as, child to parent component. Also, it is possible to share data between any other component within the Angular application.
In Angular, parent and child components interacts through the following ways −
- @Input decorator
- @Output decorator
- local variable
- @Viewchild decorator
- Services
Component Lifecycle Hook
Angular component goes through a series of stages/events during its existence. The different stages of the Angular Components Lifecycle are creation, change detection, rendering and destruction.
Each phase of the angular component is associated with a lifecycle hook interface which can be implemented to perform arbitrary action in that particular phase. The lifecycle hooks refer to the methods of lifecycle hook interfaces.