Angular Components Types Structure and CLI

What is a Component?

1. A component is a part of something.
2. Example: Car
3. Tyres
4. Engine
5. AC vents
6. Dashboard
7. Doors
8. 👉 All these are components of a car.
9. A component can also have sub-components.
10. Example: Engine itself has cylinders, pipes, belts, nozzles.

Conclusion:

A big thing is made of components, and a component can also have smaller components inside it.

Components in Angular

1. In Angular:
2. Header → Component
3. Footer → Component
4. Login page → Component
5. Signup page → Component
6. Product listing → Component
7. Profile page → Component

Why Do We Need Components? (Interview Question)

Question:

Why not write normal pages? Why components?

Answer:

1. Components allow reusability.
2. Just like functions in programming.
3. Example:
4. One seat design used multiple times in a car.
5. One door design used on all sides.
6. Same in coding:
7. One Login component can be used:
8. On a page
9. Inside a dialog box
10. Multiple places

LinkedIn Example

1. Profile image appears:
2. Header
3. Sidebar
4. Comments
5. Same round image component reused everywhere.

Types of Components in Angular

Root Component

1. Only one root component in an Angular app.
2. Default root component:
3. 👉 AppComponent
4. All other components exist inside it.

Feature Components

1. Created for specific features:
2. Login
3. Signup
4. Listing
5. Profile
6. Settings

Shared Components

1. Components used in multiple places.
2. Example:
3. Profile image
4. Buttons
5. Search box

Standalone Components

1. Before Angular 14:
2. Components had to be registered in NgModule.
3. Now (Angular 21):
4. All components are standalone by default.
5. No need for NgModule registration.

Dumb Components

1. Only UI
2. No logic
3. Example:
4. Animations
5. Shapes
6. Static display components

Smart Components

1. Components with logic
2. Example:
3. Search with auto-suggestion
4. Data handling
5. API logic
6. Can also be shared components.

Creating a Component

Command to Create Component

OR short form:

1. Angular CLI commands always start with ng.
2. This creates a profile folder.

Component Structure (4 Important Files)

When a component is created, it contains:

HTML file – UI

1. Buttons
2. Input fields
3. Headings
4. Tags

TypeScript (.ts) – Logic

1. Properties
2. Functions
3. Service calls

CSS file – Styling

1. Colors
2. Layout
3. UI design

Spec file (.spec.ts) – Testing

1. Unit test cases
2. Used by developers
3. Keyword spec means testing

Note:

1. Not all projects use testing.
2. Some projects skip unit testing.

Using a Component

Step 1: Use Selector in HTML

1. Each component has a selector, for example:

1. Use it inside another component’s HTML file.

Step 2: Import Component in TS File

1. Import the component inside the parent component’s .ts file.

Example:

Example Code Used in Video

profile.component.html

profile.component.css

Output:

1. Text appears
2. Styled with orange color

Reusing the Component Multiple Times

➡️ Component renders multiple times.