1. Modules

Modules act as containers for organizing and managing related components, services, directives, and pipes. They provide a structured way to break down large applications into smaller, manageable units.

Example:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule],
  bootstrap: [AppComponent]
})
export class AppModule { }

2. Components

Components are the building blocks of Angular user interfaces. They encapsulate a view (HTML template), data logic (TypeScript class), and interactions with the application's state.

Example:

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'my-app';
}

3. Templates

Templates are HTML files that define the structure and content of a component's view. They are used to display data from the component and allow user interactions.

Example:

<h1>{{ title }}</h1>
<p>Welcome to my Angular application!</p>

4. Data Binding

Data binding enables communication between component logic and the view. Angular provides different types of data binding:

• **Interpolation:** Displaying component data within the template.
• **Property Binding:** Setting component properties from the template.
• **Event Binding:** Triggering component methods from the template.
• **Two-Way Binding:** Syncing component properties and template inputs.

5. Directives

Directives modify the behavior or appearance of HTML elements. They can be custom or built-in, providing a powerful mechanism for extending Angular's capabilities.

Example:

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

@Directive({
  selector: '[appHighlight]' // Selects elements with the attribute 'appHighlight'
})
export class HighlightDirective {
  constructor(private el: ElementRef) {
    el.nativeElement.style.backgroundColor = 'yellow';
  }
}

6. Services

Services are reusable blocks of code that provide functionality across different parts of an application. They handle tasks such as data fetching, API interactions, and business logic.

Example:

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable({
  providedIn: 'root'
})
export class DataService {
  constructor(private http: HttpClient) { }

  getData() {
    return this.http.get('https://api.example.com/data');
  }
}

7. Pipes

Pipes transform data before displaying it in the view. They offer formatting options, date manipulation, currency conversion, and more.

Example:

<p>The price is: {{ price | currency: 'USD' }}</p>

8. Routing

Angular's routing mechanism allows you to create single-page applications with multiple views. You can define routes that map to specific components, enabling navigation between different parts of the application.

Example:

import { RouterModule, Routes } from '@angular/router';

const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'about', component: AboutComponent }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Summary

• Angular's building blocks are essential for creating complex and well-structured applications.
• Modules provide a mechanism for organizing code into smaller, reusable units.
• Components represent the building blocks of an Angular application's user interface.
• Templates define the view of a component, displaying data and allowing interactions.
• Data binding enables communication between components and views.
• Directives modify the behavior or appearance of HTML elements.
• Services provide reusable functionality across the application.
• Pipes transform data before displaying it in the view.
• Routing allows for navigation between different views in a single-page application.