The main building blocks of an Angular application are:

• Modules: Containers that group related components, services, and other code
• Components: Control views (HTML templates) and contain application logic
• Services: Provide specific functionality not directly related to views
• Directives: Add behavior to elements in the DOM
• Pipes: Transform displayed data
• Guards: Control navigation and access to routes
• Interceptors: Intercept HTTP requests/responses

TypeScript is a superset of JavaScript that adds static typing and other features. Angular uses TypeScript because:

• Type Safety: Catches errors at compile time rather than runtime
• Better IDE Support: Enhanced autocomplete, refactoring, and navigation
• Object-Oriented Programming: Supports classes, interfaces, and inheritance
• Modern JavaScript Features: Supports ES6+ features while maintaining backward compatibility
• Better Maintainability: Makes large codebases easier to manage
• Enhanced Debugging: Better error messages and debugging experience

Library: A collection of functions that you call from your code. You control the flow and decide when to use the library.

Framework: Provides the structure and flow control. The framework calls your code (Inversion of Control).

Angular is a framework because:

• It provides the application structure and architecture
• Controls the application flow through its component lifecycle
• Uses dependency injection to manage object creation
• Provides routing, forms, HTTP client, and other built-in features
• Follows specific conventions and patterns

A component in Angular controls a part of the screen called a view. It consists of:

• Component Class: Contains the application logic (TypeScript)
• Template: Defines the view (HTML)
• Styles: Define the appearance (CSS)
• Metadata: Tells Angular how to process the class (Decorators)

Creating a component:

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

@Component({
  selector: 'app-example',
  template: '<h1>{{title}}</h1>',
  styleUrls: ['./example.component.css']
})
export class ExampleComponent {
  title = 'Hello World';
}

The @Component decorator is metadata that tells Angular how to process a class. It provides configuration options:

• selector: CSS selector that identifies the component in templates
• template/templateUrl: HTML template for the component
• styles/styleUrls: CSS styles for the component
• providers: Services available to the component
• viewProviders: Services available to the component's view
• encapsulation: View encapsulation strategy
• changeDetection: Change detection strategy

template: Defines the HTML template inline within the component decorator:

@Component({
  selector: 'app-example',
  template: '<h1>{{title}}</h1><p>Inline template</p>'
})

templateUrl: Points to an external HTML file:

@Component({
  selector: 'app-example',
  templateUrl: './example.component.html'
})

Use template for simple, short templates and templateUrl for complex templates that benefit from syntax highlighting and better organization.

Angular supports four types of data binding:

1. Interpolation (One-way: Component to Template):

<h1>{{title}}</h1>

2. Property Binding (One-way: Component to Template):

<img [src]="imageUrl">
<button [disabled]="isDisabled">

3. Event Binding (One-way: Template to Component):

<button (click)="onClick()">Click me</button>

4. Two-way Binding:

<input [(ngModel)]="username">

Interpolation converts component property values to strings and embeds them in HTML:

<h1>Welcome {{userName}}</h1>
<img src="{{imageUrl}}">

Property Binding sets element properties to component property values:

<h1 [textContent]="userName"></h1>
<img [src]="imageUrl">

Key Differences:

• Interpolation is limited to string values; property binding can handle any type
• Property binding is more secure as it prevents script injection
• Use property binding for non-string properties like boolean, number, or object

Event binding listens to and responds to user actions like clicks, key presses, and mouse movements.

Basic Event Binding:

<button (click)="onClick()">Click me</button>
<input (keyup)="onKeyUp()">

Passing Event Data:

<input (keyup)="onKeyUp($event)">
<button (click)="onClick($event)">Click</button>

Component Method:

onKeyUp(event: any): void {
  console.log(event.target.value);
}

onClick(event: Event): void {
  console.log('Button clicked');
}

Directives are classes that add additional behavior to elements in Angular applications. There are three types:

1. Component Directives: Components with templates
2. Structural Directives: Change DOM layout by adding/removing elements
3. Attribute Directives: Change appearance or behavior of elements

Examples:

<!-- Structural Directives -->
<div *ngIf="condition">Content</div>
<li *ngFor="let item of items">{{item}}</li>

<!-- Attribute Directives -->
<div [ngClass]="cssClass">Content</div>
<div [ngStyle]="styleObject">Content</div>

*ngIf: Conditionally includes or excludes an element from the DOM:

<div *ngIf="isVisible">This will show conditionally</div>
<div *ngIf="user; else noUser">Welcome {{user.name}}</div>
<ng-template #noUser>Please log in</ng-template>

*ngFor: Repeats an element for each item in a collection:

<li *ngFor="let item of items; index as i; trackBy: trackByFn">
  {{i}}: {{item.name}}
</li>

*ngSwitch: Conditionally displays one element from several possibilities:

<div [ngSwitch]="condition">
  <p *ngSwitchCase="'A'">Case A</p>
  <p *ngSwitchCase="'B'">Case B</p>
  <p *ngSwitchDefault>Default case</p>
</div>

A service is a class with a specific purpose that provides functionality not directly related to views. Services are used for:

• Data sharing between components
• Business logic that shouldn't be in components
• External communication (HTTP requests)
• Utility functions and helpers
• State management

Creating a service:

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

@Injectable({
  providedIn: 'root'
})
export class DataService {
  private data: string[] = [];

  getData(): string[] {
    return this.data;
  }

  addData(item: string): void {
    this.data.push(item);
  }
}

Services can depend on other services through constructor injection:

@Injectable({
  providedIn: 'root'
})
export class LoggerService {
  log(message: string): void {
    console.log(message);
  }
}

@Injectable({
  providedIn: 'root'
})
export class DataService {
  constructor(private logger: LoggerService) {}

  getData(): any[] {
    this.logger.log('Getting data...');
    return [];
  }
}

Important: Avoid circular dependencies where Service A depends on Service B and Service B depends on Service A.