Dot Notation vs Bracket Notation:

**********************************

1. Dot notation - is simpler and more readable for accessing properties with valid
identifiers.(it does not contain spaces, special characters, or start with a
number)
2. Bracket notation - is necessary when dealing with dynamic property names or
identifiers that include special characters.

-----------------------------------------------------------------------------------
-----------------------------------------------------------------------------------
-
-----------------------------------------------------------------------------------
-----------------------------------------------------------------------------------
-

Switch Map vs Merge Map:

************************

Switch Map
===========
* When a new value is emitted by the source observable (this.route.params),
switchMap cancels the previous inner observable and subscribes to a new one.
* Useful when you want to cancel ongoing inner observables (like HTTP requests)
when a new value arrives.
* If you want to cancel ongoing operations when a new value arrives (common in
scenarios like fetching data based on route parameters), switchMap is typically a
better choice.

Merge Map
==========
Merge map is used when we call the API after we get the response from another API.

* When a new value is emitted by the source observable, mergeMap subscribes to the
inner observable without cancelling the previous one.
* Useful when you want to process all emissions concurrently, without waiting for
the completion of previous ones.
* If you want to handle multiple emissions concurrently without cancelling ongoing
operations, mergeMap might be more appropriate.

eg) If we have 2 API call. The 2nd API call will make only after we get the
response from the 1st API all. For this we use merge map. Based on the response of
previous API call.

-----------------------------------------------------------------------------------
-----------------------------------------------------------------------------------
-
-----------------------------------------------------------------------------------
-----------------------------------------------------------------------------------
-

Promises vs Observables:
*************************

Both the concepts deal with Asynchronous events in Angular, Promises handle one
such event at a time while observables handle a sequence of events over some time.
Promises - They emit a single value at a time. They execute immediately after
creation and are not cancellable. They are Push errors to the child promises.

Observables -They emit multiple values over a period of time. They help perform
operations like forEach, filter, and retry, among others.

-----------------------------------------------------------------------------------
-----------------------------------------------------------------------------------
-
-----------------------------------------------------------------------------------
-----------------------------------------------------------------------------------
-

Pipe:
*****

PIPE is to Combining Multiple Operators(map, filter....).

example1:
=========
this.authService.user.pipe(
filter(res => res && res.storeID)),
map((res: any) => ({
id: res.id,
name: res.name
})
).subscribe(response => {
console.log(response);
});

----------------------------------------------------------------
example2:
=========
const numbers$ = of(1, 2, 3, 4, 5);

// Use pipe to combine filter and map operators

numbers$.pipe(
filter(n => n % 2 === 0), // Only pass even numbers
map(n => n * 10) // Multiply each number by 10
).subscribe(result => {
console.log(result); // Outputs: 20, 40
});

-----------------------------------------------------------------------------------
-----------------------------------------------------------------------------------
-
-----------------------------------------------------------------------------------
-----------------------------------------------------------------------------------
-

RETURN DIFFERENCE
****************

return of(true); // Returns an observable that emits true

return true; // Returns true as a Boolean value
of(true) creates an observable that emits the value true and then completes.
When you use of(true), you're explicitly returning an observable that emits true as
its single emission.
This is commonly used in scenarios where you want to emit a value asynchronously or
when chaining operators in RxJS.

-----------------------------------------------------------------------------------
-----------------------------------------------------------------------------------
-
-----------------------------------------------------------------------------------
-----------------------------------------------------------------------------------
-

(val['name'] + '').toLowerCase()

explanation => val['name'] + '': This operation converts the value of val['name']
to a string. The + '' is a common trick in JavaScript to ensure that the result is
a string, even if val['name'] was originally another type (such as a number or
null/undefined). If val['name'] is already a string, this operation has no effect.
If it's not a string, JavaScript coerces it into a string.

-----------------------------------------------------------------------------------
-----------------------------------------------------------------------------------
-
-----------------------------------------------------------------------------------
-----------------------------------------------------------------------------------
-

THE PURPOSE OF ASYNC PIPE

*****************************

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 also automatically unsubscribes from the observable to
reduce the risk of memory leaks.

-----------------------------------------------------------------------------------
-----------------------------------------------------------------------------------
-
-----------------------------------------------------------------------------------
-----------------------------------------------------------------------------------
-

PARENT-CHILD INTERACTION
***************************

import { Component, EventEmitter, Output } from '@angular/core';

@Component({
selector: 'app-child',
template: `
 <button (click)="emitEvent()">Emit Event</button>
`
})
export class ChildComponent {
@Output() customEvent = new EventEmitter<string>();

emitEvent() {
this.customEvent.emit('Custom event emitted!');
}
}
================================================================== `
@Component({
selector: 'app-parent',
template: `
<app-child (customEvent)="handleEvent($event)"></app-child>
<p>{{ eventData }}</p>
`
})
export class ParentComponent {
eventData: string;

handleEvent(event: string) {
this.eventData = event;
}
}