What are components in Angular7?

Components are the basic building blocks of an Angular app formed like a tree structure. Components are subset of directives but unlike directives, components always have a template and only one component can be instantiated per an element in a template.

In Angular 7, components are the fundamental building blocks of Angular applications. They are responsible for managing the application’s UI and encapsulating the behavior of a view, including its HTML template and the logic for processing user events. Components help in organizing the application into reusable and modular pieces, promoting maintainability and scalability.

Key points about components in Angular 7 include:

  1. Encapsulation: Each component in Angular 7 encapsulates a specific part of the UI and its related functionality, making it easier to manage and reuse code.
  2. Structure: Components consist of a TypeScript class that contains application logic and properties, along with an HTML template that defines the component’s UI.
  3. Decorator: Components are decorated with the @Component decorator provided by Angular, which allows developers to configure various aspects of the component, such as its selector, template, styles, and more.
  4. Hierarchical Structure: Angular applications typically have a hierarchical structure of components, where larger components encapsulate smaller ones, forming a tree-like structure.
  5. Communication: Components communicate with each other through inputs and outputs, enabling data flow between parent and child components.
  6. Lifecycle Hooks: Angular provides lifecycle hooks such as ngOnInit, ngOnChanges, ngOnDestroy, etc., which allow developers to tap into various stages of a component’s lifecycle for initialization, change detection, and cleanup.
  7. Dependency Injection: Components in Angular 7 leverage Angular’s dependency injection system, allowing them to receive dependencies they need from external sources, which promotes modularity and testability.

Overall, components play a crucial role in structuring Angular applications and are essential for building maintainable, scalable, and modular web applications.