Explain the lifecycle hooks in Angular

In Angular, every component has a lifecycle. Angular creates and renders these components and also destroys them before removing them from the DOM. This is achieved with the help of lifecycle hooks. Here's the list of them -

1. ngOnChanges() - Triggers when Angular sets/resets data-bound input properties.
2. ngOnInit() - Initialize the directive/component after Angular first displays it
3. ngDoCheck() - Detect and act upon changes that Angular can't or won't detect on its own.
4. ngAfterContentInit() - Triggers after Angular projects external content into the component's view
5. ngAfterContentChecked() - Triggers after Angular checks the content projected into the component.
6. ngAfterViewInit() - Triggers after Angular initializes the component's views
7. ngAfterViewChecked() - Triggers after Angular checks the component's views
8. ngOnDestroy - Cleanup just before Angular destroys the directive/component.

What are services in Angular?

Angular services are classes with defined methods, that can be reused by multiple components. These functions can include everything, including data and image fetching, network connections, and database management among others. A service can be written once and injected into multiple components, by using dependency injection, into the components' constructor.

What are observables in Angular?

Observables are used to deal with asynchronous events in Angular. They are executed when using the subscribe() method, emit multiple values over a period of time, and they help perform operations like forEach, filter, and retry, among others. They also can deliver errors to the subscribers. When the unsubscribe() method is called, the listener stops receiving further values.

How to use ngFor?

The ngFor directive is used to iterate over an array or an object and create a template for each element. It acts the same as any for statement in any other programming language, but it is used in an HTML template, and it can serve to build lists dynamically.

1<ul>
2
3<li *ngFor = "let items in itemlist"> {{ item }} </li>
4
5</ul>

1. “Let item” creates a local variable that will be available in the template
2. “Of items” indicates that we are iterating over the items iterable.
3. The * before ngFor creates a parent template.