Angular Components

1. Understanding Angular Components

An Angular component consists of:

📌 Template (.html) – Defines the UI layout
📌 Styles (.css or .scss) – Adds styles to the component
📌 Class (.ts) – Contains logic and data binding

2. Creating an Angular Component

Angular CLI provides a command to generate components quickly.

Step 1: Generate a New Component

Run the following command in your terminal:

OR (shorter version)

ng g c my-component

This will create:
📂 src/app/my-component/

my-component.component.ts (Logic)
my-component.component.html (Template)
my-component.component.css (Styles)
my-component.component.spec.ts (Testing)

3. Using a Component in Angular

Step 2: Add Component to a Template

Every component has a selector that can be used in other components or pages.

Find the selector inside my-component.component.ts:

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

Now, use this selector inside app.component.html:

<app-my-component></app-my-component>

4. Understanding Component Structure

Step 3: Define Component Logic

Modify my-component.component.ts to add data:

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

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.css']
})
export class MyComponent {
  title: string = 'Hello from MyComponent!';
}

Step 4: Bind Data in HTML

Update my-component.component.html:

<h2>{{ title }}</h2>

5. Styling a Component

Angular allows component-specific styling.

Step 5: Add Styles to Component

Modify my-component.component.css:

h2 {
  color: blue;
  text-align: center;
}

6. Passing Data Between Components

Angular components communicate using @Input and @Output decorators.

Example:

Step 6: Parent to Child Communication

Modify my-component.component.ts:

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

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.css']
})
export class MyComponent {
  @Input() message!: string;
}

Now, pass data from app.component.html:

<app-my-component [message]="'Hello from Parent Component!'"></app-my-component>

Conclusion

✔️ Components are the foundation of Angular applications
✔️ Created a new component using Angular CLI
✔️ Added data binding to display dynamic content
✔️ Styled the component
✔️ Passed data between components

By mastering components, you can structure and scale your Angular projects efficiently! 🚀

ANGULAR