Components in Angular
Front end developer
An Angular component is the basic building block of the UI.
What they do: Each component controls a portion of the screen, which is referred to as its view.
Structure: A component consists of a TypeScript class for logic, an HTML template for UI, and CSS for styling.
Components are decorated with @Component, which tells Angular how to create and render the component.
| Property | Description | Example |
selector | Defines the custom HTML tag used to instantiate the component. | 'app-user-list' |
templateUrl | Path to the component's HTML file (view). | './user-list.component.html' |
styleUrls | Array of paths to the component's style files. | ['./user-list.component.css'] |
| Part | Role |
@Component | Metadata (how Angular should use this component) |
class | Business logic |
template | UI (HTML) |
styles | Component-scoped CSS |
✅ How Angular Uses a Component (Internal Flow)
You can explain this like a pro:
Angular finds the component using its selector
It creates an instance of the component class
It renders the template
It binds data + events
It updates the view automatically using change detection
✅ Types of Components (Short & Sharp)
✅ Root Component –
AppComponent
✅ Feature Components – Dashboard, Profile
✅ Presentational (Dumb) Components – UI only
✅ Container (Smart) Components – data + logic
✅ Standalone Components (Angular 14+) – no NgModule neededReal-World Example (Explain This)
“In an e-commerce app, the product list, cart, header, and footer are all separate components. Each component handles its own UI and logic, making the application scalable and maintainable.”
✅ One-Line Closing Statement
“Angular components help us build reusable, testable, and modular UI pieces with clear separation of concerns.”
