Component
5 methodsThe @Component decorator and related APIs for defining components, inputs/outputs, and lifecycle hooks.
@Component(metadata)Decorator that marks a class as an Angular component and attaches metadata (selector, template, styles).
Parameters
| Name | Type | Description |
|---|---|---|
| metadata | Component | Object with selector, template/templateUrl, styleUrls/styles. |
Returns
ComponentDecorator
Example
@Component({
selector: 'app-hello',
template: '<h1>{{name}}</h1>',
})
export class HelloComponent {
name = 'Angular';
}@Input() propertyMarks a class property as a data-bound input from a parent component's template.
Returns
InputDecorator
Example
export class ChildComponent {
@Input() title = '';
}@Output() event = new EventEmitter<T>()Marks a property as an output that a parent component can bind to with event binding.
Returns
OutputDecorator
Example
export class ChildComponent {
@Output() clicked = new EventEmitter<string>();
onClick() { this.clicked.emit('hi'); }
}ngOnInit()Lifecycle hook called once after Angular initializes the data-bound properties of a directive.
Returns
void
Example
export class AppComponent implements OnInit {
ngOnInit() {
console.log('initialized');
}
}ngOnDestroy()Lifecycle hook called once before Angular destroys the directive. Use for cleanup.
Returns
void
Example
export class AppComponent implements OnDestroy {
ngOnDestroy() {
this.subscription.unsubscribe();
}
}HttpClient
4 methodsAngular's HttpClient for performing HTTP requests. Methods return cold observables.
http.get<T>(url, options?)Performs an HTTP GET request, emitting the response body.
Parameters
| Name | Type | Description |
|---|---|---|
| url | string | Endpoint URL. |
| options | object | Optional headers, params, responseType, observe. |
Returns
Observable<T>
Example
http.get<User>('/api/users/1')
.subscribe(user => console.log(user));http.post<T>(url, body, options?)Performs an HTTP POST request with a request body.
Parameters
| Name | Type | Description |
|---|---|---|
| url | string | Endpoint URL. |
| body | any | Request body to send. |
Returns
Observable<T>
Example
http.post<User>('/api/users', { name: 'Sam' })
.subscribe(u => console.log('created', u));http.put<T>(url, body, options?)Performs an HTTP PUT request to replace a resource.
Parameters
| Name | Type | Description |
|---|---|---|
| url | string | Endpoint URL. |
| body | any | Replacement body. |
Returns
Observable<T>
Example
http.put('/api/users/1', { name: 'Sam2' })
.subscribe();http.delete<T>(url, options?)Performs an HTTP DELETE request.
Parameters
| Name | Type | Description |
|---|---|---|
| url | string | Endpoint URL. |
Returns
Observable<T>
Example
http.delete('/api/users/1')
.subscribe(() => console.log('deleted'));Router
4 methodsAngular Router service for navigating between views and inspecting route state.
router.navigate(commands, extras?)Navigates based on an array of URL segments with optional navigation extras.
Parameters
| Name | Type | Description |
|---|---|---|
| commands | any[] | URL segments, e.g. ['/users', 1]. |
| extras | NavigationExtras | Optional queryParams, fragment, state. |
Returns
Promise<boolean>
Example
router.navigate(['/users', 1], {
queryParams: { tab: 'profile' }
});router.navigateByUrl(url)Navigates using an absolute URL path string.
Parameters
| Name | Type | Description |
|---|---|---|
| url | string | Absolute URL path. |
Returns
Promise<boolean>
Example
router.navigateByUrl('/users/1/edit');route.snapshot.paramMap.get(key)Reads a route parameter synchronously from the activated route's snapshot.
Parameters
| Name | Type | Description |
|---|---|---|
| key | string | Parameter name. |
Returns
string | null
Example
const id = route.snapshot.paramMap.get('id');
console.log(id);router.eventsAn observable of router events (NavigationStart, NavigationEnd, etc.).
Returns
Observable<Event>
Example
router.events
.pipe(filter(e => e instanceof NavigationEnd))
.subscribe(e => console.log((e as NavigationEnd).url));