Creating Components Using Angular CLI

Components are the core building blocks of Angular applications. Each component represents a view or part of the user interface, encapsulating its template, logic, and styles. Creating and managing components efficiently is critical for building maintainable, scalable Angular applications. Angular CLI provides powerful commands to generate components quickly and consistently.

In this guide, we will explore:

1. Introduction to Angular Components
2. Creating Components Using Angular CLI
   • Step-by-step guide
   • Options and flags
3. Inline Templates vs Separate HTML Files
4. Component File Structure
5. Best Practices for Naming and Organizing Components
6. Practical Examples
7. Conclusion

1. Introduction to Angular Components

An Angular component consists of three main parts:

1. TypeScript Class: Contains component logic and data.
2. Template (HTML): Defines the UI of the component.
3. Styles (CSS/SCSS): Defines the look and feel of the component.

Basic Example

import { Component } from '@angular/core';

@Component({
  selector: 'app-header',
  template: <h1>{{ title }}</h1>,
  styles: [h1 { color: navy; }]
})
export class HeaderComponent {
  title = 'Welcome to Angular Components';
}

Explanation:

• @Component decorator defines metadata.
• selector is used to embed the component in other templates.
• template defines the view.
• styles define inline styles for the component.

---

2. Creating Components Using Angular CLI

Angular CLI provides the ng generate component command to quickly scaffold a component with all necessary files.

2.1 Step-by-Step Guide

Step 1: Navigate to the Project

cd my-angular-app

Step 2: Generate a Component

ng generate component header

What This Command Does:

• Creates a new folder header/ inside src/app.
• Generates four files:
  • header.component.ts → Component logic
  • header.component.html → Template
  • header.component.css → Styles
  • header.component.spec.ts → Unit tests
• Updates AppModule to declare the new component automatically.

Step 3: Using the Component

<!-- app.component.html -->
<app-header></app-header>

---

2.2 Options and Flags

Angular CLI allows customizing the component creation:

1. Inline Template

ng generate component header --inline-template

Creates a component without a separate HTML file; template is included in header.component.ts.

2. Inline Styles

ng generate component header --inline-style

Styles are included directly in the TypeScript file.

3. Skip Tests

ng generate component header --skip-tests

No .spec.ts file is generated.

4. Flat Structure

ng generate component header --flat

Generates component files in the current folder without creating a new subfolder.

5. Prefix

ng generate component header --prefix=ui

Changes the selector to ui-header.

---

3. Inline Templates vs Separate HTML Files

When generating components, Angular allows inline templates or external HTML files.

3.1 Inline Templates

@Component({
  selector: 'app-inline',
  template: <h2>Inline Template Component</h2>,
  styles: [h2 { color: green; }]
})
export class InlineComponent {}

Advantages:

• Quick for small components or demos.
• Reduces the number of files.

Disadvantages:

• Harder to maintain for complex templates.
• Not ideal for large applications.

---

3.2 Separate HTML Files

@Component({
  selector: 'app-external',
  templateUrl: './external.component.html',
  styleUrls: ['./external.component.css']
})
export class ExternalComponent {}

Advantages:

• Easier to maintain large templates.
• Cleaner separation of logic, template, and styles.
• Supports collaborative development.

Disadvantages:

• Slightly more files in the project.

---

4. Component File Structure

When you generate a component with Angular CLI, the default structure is:

src/app/header/
  header.component.ts      → Component class and metadata
  header.component.html    → Template
  header.component.css     → Styles
  header.component.spec.ts → Unit tests

4.1 Understanding Each File

1. .ts File
   • Contains component class and metadata.
   • Defines properties, methods, and lifecycle hooks.
2. .html File
   • Defines UI and binds to component data using interpolation, property, and event binding.
3. .css or .scss File
   • Encapsulates component-specific styles.
4. .spec.ts File
   • Provides unit test scaffolding for the component.

---

5. Best Practices for Naming and Organizing Components

Proper naming and organization are critical for maintaining large Angular applications.

5.1 Naming Conventions

• Use kebab-case for folders: user-profile
• Use PascalCase for classes: UserProfileComponent
• Use app-prefix for selectors: app-user-profile
• Keep names descriptive and meaningful.

5.2 Folder Organization

For feature-based organization:

src/app/
  core/
header/
  header.component.ts
  header.component.html
  features/
products/
  product-list/
    product-list.component.ts
  product-detail/
    product-detail.component.ts

Advantages:

• Easier navigation in large projects.
• Keeps related components grouped by feature.

5.3 Component Size and Scope

• Keep components small and focused.
• Each component should have a single responsibility.
• Use child components for reusable parts.

---

6. Practical Examples

6.1 Simple Component

@Component({
  selector: 'app-greeting',
  template: <h1>Hello, {{ name }}!</h1>,
  styles: [h1 { color: purple; }]
})
export class GreetingComponent {
  name = 'Angular Developer';
}

Usage:

<app-greeting></app-greeting>

---

6.2 Component with Inline Template

@Component({
  selector: 'app-inline-button',
  template: <button (click)="clickMe()">Click Me</button>,
  styles: [button { background-color: teal; color: white; }]
})
export class InlineButtonComponent {
  clickMe() {
console.log('Button clicked!');
  }
}

---

6.3 Feature Component Organization

src/app/features/users/
  user-list/
user-list.component.ts
user-list.component.html
  user-detail/
user-detail.component.ts
user-detail.component.html

UserListComponent Example:

@Component({
  selector: 'app-user-list',
  templateUrl: './user-list.component.html'
})
export class UserListComponent {
  users = ['Alice', 'Bob', 'Charlie'];
}

<ul>
  <li *ngFor="let user of users">{{ user }}</li>
</ul>

---

7. Advanced Tips

• Lazy Load Components: Use ng generate component within a lazy-loaded feature module.
• Custom Schematics: Configure CLI to use your preferred file structure by default.
• Consistent Style: Use styleUrls or inline styles consistently throughout the project.
• Avoid Large Components: Break down complex UIs into smaller, reusable components.