The Component is the main building block of an Angular Application. The Component contains the data & user interaction logic that defines how the View looks and behaves.
The Angular Components are plain JavaScript classes and are defined using @Component Decorator. This Decorator provides the component with the View to display & Metadata about the Component. The Component is responsible to provide the data to the view. The Angular applications will have lots of components. Each component handles a small part of the UI. These components work together to produce the complete user interface of the application.
Angular Component Building Blocks:
- Template
- Class
- MetaData
We can create files for a component manually or using the Angular CLI command
Use the following CLI command to generate a component
ng generate component <component name>
Register the Angular Component in Angular Module:
The Angular Module organizes the components, directives, pipes, and services that are related and arrange them into cohesive blocks of functionality.
We use @NgModule class decorator to define a Angular Module and provide metadata about the Modules
The declaration arrays is where we include the components
The Component that angular should load, when the app.module is loaded is assigned to the bootstrap property