Angular is a platform and framework for building client-side applications with HTML, CSS, and JavaScript/TypeScript. It's particularly suited for building single-page applications (SPAs). Angular provides developers with tools and design patterns to build and scale complex applications. It's maintained by Google and a community of individuals and corporations.
TypeScript is a superset of JavaScript developed by Microsoft. It introduces static types, classes, interfaces, and other Object-Oriented Programming (OOP) features to the language. When TypeScript code is compiled, it is translated into plain JavaScript code, making it compatible with any browser. TypeScript enhances the development experience by catching errors early through a robust type system.
In an Angular component:
- Constructor: A default method from the TypeScript class, mainly used for dependency injection. It's called when the class is instantiated.
- ngOnInit: A lifecycle hook in Angular that is called after the constructor and is used mainly for component initialization logic. It's a recommended place to put the initialization logic over the constructor because, by this time, component bindings are initialized.
The async
pipe subscribes to an Observable
or Promise
and returns the latest value it has emitted. When a new value is emitted, the async
pipe marks the component to be checked for changes. It automatically unsubscribes from the observable when the component is destroyed, thus reducing the risk of memory leaks.
The ngFor
directive is a structural directive in Angular, which is used for rendering a list of items by iterating over an array or collection. It works similarly to a for loop.
Example:
<ul>
<li *ngFor="let item of items">{{ item.name }}</li>
</ul>
The ngIf
directive is a structural directive that is used to conditionally include or exclude a section of the template based on a given condition. If the condition is true
, the element and its children are added to the DOM; if false
, they are removed.
Example:
<div *ngIf="showMessage">Hello, World!</div>
In Angular, template expressions are snippets of code enclosed in curly braces ({{ }}
) which allow you to display the result of the expression in the template. They operate within the template's context, which means they have access to its properties.
Example:
<p>{{ name }}</p>
<p>{{ 2 + 2 }}</p>
-
Observables (from the RxJS library):
- Can emit multiple values over time.
- Are lazy by nature. They don't execute until something subscribes to them.
- Have rich API capabilities like
map
,filter
,reduce
, etc. - Can be unsubscribed from, which provides better control over memory management and other resources.
-
Promises:
- Emit a single value at a time.
- Are eager by nature. They execute immediately upon creation.
- Have a simpler API, primarily
.then()
,.catch()
, and.finally()
.
String interpolation is a mechanism in Angular templates to bind component properties in the HTML. It's done using the {{ }}
syntax. For example, if a component has a property named title
, you can display its value in the template using {{ title }}
.
In Angular, components are the main building blocks of the application. A component controls a portion of the screen (a view) and consists of:
- A template: Defines the view layer, written in HTML.
- A class: Holds the data and logic for the template, written in TypeScript.
- Metadata: Information about the component, provided by decorators like
@Component
.
A simple Angular component may look like this:
import { Component } from '@angular/core'
@Component({
selector: 'app-root',
template: '<h1>{{ title }}</h1>'
})
export class AppComponent {
title = 'Hello, Angular!'
}
The @Component
decorator provides metadata for the component, including its selector
(how it's referenced in templates) and its template
(the HTML that represents the component's view).