> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/angular/angular/llms.txt
> Use this file to discover all available pages before exploring further.
# Introduction to Angular
> Learn about Angular, the modern web development platform for building scalable applications with TypeScript
Angular is a development platform for building mobile and desktop web applications using TypeScript/JavaScript. Built and maintained by Google, Angular provides a comprehensive framework for creating dynamic, high-performance applications with a rich ecosystem of tools and libraries.
## What is Angular?
Angular is more than just a framework—it's a complete platform that combines:
* **Declarative templates** with powerful data binding
* **Dependency injection** for clean, testable code
* **End-to-end tooling** from development to deployment
* **Integrated best practices** for building scalable applications
Whether you're building a simple dashboard or a complex enterprise application, Angular provides the structure and tools you need to succeed.
## Key benefits
Built with TypeScript for enhanced developer experience, strong typing, and better tooling support
Build reusable UI components with encapsulated logic and styles for maintainable applications
Generate components, services, and modules with the Angular CLI to accelerate development
Write once, deploy everywhere—web, mobile, and desktop applications from a single codebase
## Framework architecture
Angular applications are built using a modular architecture with several core concepts:
### Components
Components are the fundamental building blocks of Angular applications. Each component encapsulates the template (HTML), styles (CSS), and logic (TypeScript) for a part of the user interface.
```typescript theme={null}
import { Component } from '@angular/core';
@Component({
selector: 'app-hello',
template: `
Hello {{ name }}!
`,
styles: [`
h1 { color: #1976d2; }
`]
})
export class HelloComponent {
name = 'Angular';
changeName() {
this.name = 'World';
}
}
```
This simple component demonstrates:
* **Decorator**: `@Component` defines the component metadata
* **Selector**: Custom HTML element name (``)
* **Template**: HTML with data binding (`{{ name }}`)
* **Event binding**: Handle user interactions (`(click)`)
* **Class properties**: Component state management
### Dependency injection
Angular's dependency injection system makes it easy to manage dependencies and write testable code. Services can be injected into components, directives, and other services.
```typescript theme={null}
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('/api/data');
}
}
```
The `providedIn: 'root'` configuration makes the service available application-wide as a singleton, optimizing bundle size through tree-shaking.
### Directives
Directives extend HTML with custom behavior. Angular includes built-in directives like `*ngIf` for conditional rendering and `*ngFor` for list rendering.
```typescript theme={null}
@Component({
selector: 'ng-if-simple',
template: `
Text to show
`
})
export class NgIfSimple {
show = true;
}
```
### Routing
The Angular Router enables navigation between different views in your single-page application, supporting features like lazy loading, route guards, and nested routes.
```typescript theme={null}
import { Routes } from '@angular/router';
export const routes: Routes = [
{ path: 'home', component: HomeComponent },
{ path: 'about', component: AboutComponent },
{ path: '', redirectTo: '/home', pathMatch: 'full' }
];
```
### Forms
Angular provides two approaches to handling user input through forms:
* **Reactive forms**: Model-driven approach with explicit, immutable data models
* **Template-driven forms**: Simpler approach using directives in templates
```typescript theme={null}
import { Component } from '@angular/core';
import { FormControl, Validators } from '@angular/forms';
@Component({
selector: 'example-app',
template: `
Value: {{ control.value }}
Status: {{ control.status }}
`
})
export class SimpleFormControl {
control = new FormControl('value', Validators.minLength(2));
}
```
## Modern features
Angular continuously evolves with modern web development practices:
Angular's signal-based reactivity (introduced in recent versions) provides fine-grained change detection for improved performance.
* **Standalone components**: Build applications without NgModules
* **Signals**: Fine-grained reactivity for better performance
* **Server-side rendering**: Pre-render pages for better SEO and initial load time
* **Hydration**: Reuse server-rendered DOM for faster client startup
* **Defer loading**: Load components on-demand with `@defer` blocks
## Example application
Here's a complete component showcasing multiple Angular features:
```typescript theme={null}
import { Component, input, signal, ViewChild } from '@angular/core';
@Component({
selector: 'example-app',
template: `
@if (shouldShow()) {
} @else {
}
Selected: {{ selectedPane() }}
`
})
export class ViewChildComp {
@ViewChild(Pane)
set pane(v: Pane) {
setTimeout(() => {
this.selectedPane.set(v.id());
}, 0);
}
selectedPane = signal('');
shouldShow = signal(true);
toggle() {
this.shouldShow.update((shouldShow) => !shouldShow);
}
}
```
## Rich ecosystem
Angular comes with a comprehensive ecosystem:
* **Angular CLI**: Command-line interface for project scaffolding and build tooling
* **Angular Material**: Official UI component library implementing Material Design
* **Angular DevTools**: Browser extension for debugging and profiling
* **Angular Universal**: Server-side rendering for improved performance and SEO
* **Angular Elements**: Package components as custom elements for use in any framework
## Next steps
Ready to start building with Angular? Follow our quickstart guide to create your first application in minutes.
Get up and running with Angular in 5 minutes