ngDoCheck life cycle hook.

The ngDoCheck lifecycle hook in Angular is part of the change detection mechanism. It is called by Angular during every change detection cycle, which is the process by which Angular updates the view based on changes in the component. 

The purpose of ngDoCheck is to detect and act upon changes that Angular doesn't catch automatically. Unlike other lifecycle hooks, ngDoCheck doesn't have a corresponding interface; instead, it's a method that you implement in your component class.

Here's how you can use ngDoCheck in a component:

In this example:

• We have a UserComponent with an @Input() property called user, which is an object containing the user's name and email.
  
• We use the ngDoCheck method to check if the user's name has changed compared to the previous state. If it has changed, we log a message to the console.
  
• We maintain a previousName property to store the last known name. This is important to compare with the current name in each ngDoCheck call.
  

Now, when you use this component in a parent component's template, such as:

And in the parent component's TypeScript file:

Clicking the "Change User's Name" button will trigger a change in the user's name, and you will see corresponding messages logged to the console by the ngDoCheck method in the UserComponent.

ngOnInit life cycle hook.

 The ngOnInit lifecycle hook is part of Angular's component lifecycle, and it is called during the initialization phase of a component. This hook is invoked once after Angular has set up the component and its input properties but before rendering the component or calling any other lifecycle hooks.

Here is a breakdown of the ngOnInit lifecycle hook:

• Initialization of Component:
• The ngOnInit hook is called after Angular has initialized the component, but before the component is rendered on the view.
• Usage for Initialization Logic:
• Developers often use ngOnInit to perform initialization tasks such as retrieving data from a service, setting default property values, or any other setup required for the component.
• Access to Component Inputs:
• At the time ngOnInit is called, Angular has already initialized the component's input properties, and they are accessible within this hook.
• Dependency Injection:
• If the component has dependencies that need to be injected, ngOnInit is a suitable place to access those dependencies.

 Here's a simple example to illustrate the use of the ngOnInit hook:

ngOnChanges lifecycle hook

The ngOnChanges lifecycle hook is called when the values of bound properties (input properties) change. It receives a SimpleChanges object that provides information about the changes.

Here's an example demonstrating the use of ngOnChanges:

In this example:

• There is an initialMessage input property.
• The ngOnChanges method is implemented to handle changes to the input properties.
• Inside ngOnChanges, you can access the SimpleChanges object to check if the initialMessage property has changed.
• If the property has changed, you can access its previous and current values from the SimpleChanges object and update the component accordingly.

In a parent component's template, you might use this child component like this:

Whenever the value of parentMessage changes in the parent component, the ngOnChanges method in the child component will be triggered, allowing you to respond to the change in the input property.

Angular component life cycles.

In Angular, components have a lifecycle that consists of various stages from the creation of the component to its destruction. These lifecycle stages allow developers to hook into different points of a component's existence and execute code accordingly. Here are the main lifecycle hooks in Angular:

• ngOnChanges:
• This hook is called when the component receives input properties. It is invoked whenever a bound input property changes.
• ngOnInit:
• This hook is called after the component has been initialized. It is a good place to perform component initialization logic, such as retrieving data from a service.
• ngDoCheck:
• This hook is called during every change detection run. It allows you to implement custom change detection logic.
• ngAfterContentInit:
• This hook is called after Angular has projected external content into the component's view. It is a good place to perform initialization that depends on content projection.
• ngAfterContentChecked:
• This hook is called after Angular checks the content projected into the component.
• ngAfterViewInit:
• This hook is called after the component's view has been initialized. It is a good place to perform initialization that depends on the view.
• ngAfterViewChecked:
• This hook is called after Angular checks the component's view.
• ngOnDestroy:
• This hook is called just before the component is destroyed. It is a good place to clean up resources, such as unsubscribing from observables, to prevent memory leaks.

  Here's an example of how these lifecycle hooks are typically implemented in an Angular component:

 

SPA- Single Page Application.

 A Single Page Application is a type of web application or website that interacts with the user by dynamically rewriting the current page rather than loading entire new pages from the server. In a traditional multi-page application, each interaction or navigation typically involves a full page reload, whereas SPAs load a single HTML page and dynamically update the content as the user interacts with the application.

SPAs use techniques such as AJAX (Asynchronous JavaScript and XML) to retrieve data from the server without requiring a full page reload.