An ASP.

NET Core application Dependency Injection is an integral part and the

framework provides the inbuilt support for dependency injection. The Dependency
Injection Design Pattern allows us to develop loosely coupled systems that are
extensible and also easy to testable.

The appsettings.json file is an application configuration file used to store

configuration settings such as database connections strings, any application scope
global variables, etc.

Reactive programming is a programming paradigm that helps us consume, digest, and

transform asynchronous information using data streams.

RxJS is a JavaScript library that provides methods to manipulate data streams using
observables.

Observable streams are giving developers a rich set of capabilities when creating
Angular applications.
The core of the Angular framework is lightly dependent on RxJS.
Other Angular packages, such as the router and the HTTP client, are more tightly
coupled with observables.

REST stands for REpresentational State Transfer. RESTful applications typically use
lightweight and stateless HTTP calls to read, post (create/update), and delete
data.

A reverse proxy is software responsible for receiving requests and forwarding them
to the appropriate web server. The reverse proxy is exposed directly to the
internet, whereas the underlying web server is exposed only to the proxy. This
setup has several benefits, primarily security and performance for the web servers

Reflection in .NET allows you to obtain information about types in your application
at runtime. You can use reflection to create instances of classes at runtime, and
to invoke and access them

Modules
The main module of our application is a TypeScript file that acts as a container
for the main component.
The component was registered with this module upon creating the Angular
application;
otherwise, the Angular framework would not be able to recognize and load it. A
typical Angular
application has at least a main module called AppModule by convention.

declarations: This contains Angular artifacts that share common functionality bound
to a specific application feature. Artifacts that can be added to this property are
Angular components, directives, and pipes, which we will see in more detail later
in the book. The main module of the application contains the main component by
default.

• imports: This contains other Angular modules whose declarations are needed by the
current module. When an Angular module needs to use features from another module,
it must import it first to start using it. The main application module imports
BrowserModule because it needs its functionality for loading the current
application into the browser.

The imports array should not be confused with the import statements at the top of
the module file. The former is used to import functionality from other Angular
modules into the current module, whereas the latter is for importing their
respective JavaScript modules.

providers: It contains special-purpose Angular artifacts that are called services.

Services handle complex tasks in an Angular application, such as communicating
with an HTTP endpoint or interacting with a browser API. Initially, the main
application module does not need any services. Services provided in the main
application module are accessible application-wide.

bootstrap: Defines the component that will be loaded at application startup. The
bootstrap property is set only once in the main application module and is usually
the main component. You should not change it unless there is a compelling reason.

The AppModule TypeScript class is empty because Angular modules usually do not
contain any logic. As we have learned, the primary purpose of an Angular module is
to group artifacts with similar functionality. Their purpose is fulfilled by using
the @NgModule decorator above the class.

The Angular framework would treat AppModule as a single TypeScript class if the
decorator was
missing. It actually tells Angular that this is indeed an Angular module.

###

The structure of an Angular component:

A typical Angular application contains at least a main component that consists of

multiple files.

The TypeScript file of the component is defined in the app.component.ts file:

import { Component } from '@angular/core';

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'Learning Angular';
}

The import statement at the top of the file is used to import the Component
artifact from the @angular/core npm package.
The Component artifact is an Angular decorator that is used to configure an Angular
component.

It contains the following properties:

• selector: A CSS selector that instructs Angular to load the component in the
location that finds the corresponding tag in an HTML template.
The Angular CLI adds the app prefix by default, but you can customize it using the
--prefix option when creating the Angular project.
• templateUrl: Defines the path of an external HTML file that contains the HTML
template of the component.
Alternatively, you can provide the template inline using the template property.
• styleUrls: Defines a list of paths that point to external CSS style sheet files.
Alternatively, you can provide the styles inline using the styles property.

The TypeScript file of the component also has a TypeScript class called
AppComponent that contains a title property.
The @Component decorator above the class tells Angular that it is an Angular
component.
If the decorator was missing, the Angular framework would treat it as a simple
TypeScript class.

ng generate component product-list

Creating an Angular component is a two-step process. It includes creating the

necessary files of
the component and registering it with an Angular module.
The preceding command will create a product-list folder that contains the
individual component files,
At the same time, the Angular CLI will register the specific

component with the products module by adding the ProductListComponent class in the
declarations array of the products.module.ts file:

import { NgModule } from '@angular/core';

import { CommonModule } from '@angular/common';
import { ProductListComponent } from './product-list/product-list.component';

@NgModule({
declarations: [
ProductListComponent
],
imports: [
CommonModule
]
})
export class ProductsModule { }
-----------------

component template containing the HTML content displayed on the page.

To display and interact with the template through the following topics:
• Loading the component template
• Displaying data from the component class
• Styling the component
• Getting data from the template

--> Loading the component template

A typical Angular application loads the template of the main component at
application startup.
The <app-root> tag is the selector of the main application component.
To load a component we have created, such as the product list component,
we need to add its selector inside an HTML template.

--> Displaying data from the component class

----------
Directives:

Angular directives are HTML attributes that extend the behavior or the appearance
of a standard HTML element.
When we apply a directive to an HTML element or even an Angular component, we can
add custom behavior to it or alter its appearance.

There are three types of directives:

• Components: They are directives with an associated template
• Structural directives: They add or remove elements from the DOM
• Attribute directives: They modify the appearance of or define a custom behavior
for a DOM element

The purpose of the main application module is to orchestrate the interaction of

feature modules throughout the application and is not tied to a specific feature.
Generally, we should never touch the app.module.ts file, except to import a new
feature module to add new functionality to the application.

Angular framework contains a rich collection of first-party libraries

that can help us during the development of an Angular application. The
functionality of
each library is exposed through an Angular module.
We need to import these modules into our applications to start using their
functionality,
as with any other module in Angular. Below are
some of the most widely used modules of the Angular framework:

• BrowserModule: This is used to run Angular applications in the browser and must
be
imported only once in an Angular application.

• CommonModule: This contains specific Angular artifacts that support the Angular
template
syntax and enrich our HTML templates. Typical examples include directives for
looping or
displaying HTML content conditionally and applying CSS styles in HTML.

• FormsModule/ReactiveFormsModule: This allows us to build HTML forms for

interacting
with user input data.

• HttpClientModule: This enables communication and data exchange with a remote

endpoint
over HTTP.

• RouterModule: This performs and handles navigation in an Angular application.

• BrowserAnimationsModule: This cooperates with the Angular Material library and

enables
UI animations in an Angular application.

The preceding list contains Angular modules you will primarily use in an Angular
application as
you start out. The Angular framework contains a lot more for many business needs
and use cases.

Pipes allow us to digest and transform the information we bind in our templates.
Directives allow us to conduct more ambitious functionalities, such as manipulating
the DOM or altering the appearance and behavior of HTML elements.

Change detection with pipes

There are two categories of pipes: pure and impure. All pipes are considered pure
by default unless
we set them to false explicitly using the pure property in the @Pipe decorator:
@Pipe({
name: 'sort',
pure: false
})

we can create Angular pipes that are not registered with an Angular module
and are standalone. To create a standalone pipe using the Angular CLI, we pass the
standalone
option in the generate command as follows:

ng generate pipe filter --standalone

Introducing directives
Angular directives are HTML attributes that extend the behavior or the appearance
of a standard
HTML element. When we apply a directive to an HTML element or even an Angular
component,
we can add custom behavior to it or alter its appearance.

There are three types of directives:

• Components: They are directives with an associated template
• Structural directives: They add or remove elements from the DOM
• Attribute directives: They modify the appearance of or define a custom behavior
for a
DOM element

Angular provides us with a set of built-in directives that we can use in our
components to cover
most use cases. Angular built-in directives are part of the CommonModule. So, we
need to import
CommonModule when we want to use them.

An HTTP interceptor is an Angular service that intercepts HTTP requests and

responses that pass
through the Angular built-in HTTP client. It can be used in the following
scenarios:
• When we want to pass custom HTTP headers in every request, such as an
authentication
token.
• When we want to display a loading indicator while we wait for a response from the
server.
• When we want to provide a logging mechanism for every HTTP communication.

We can create an interceptor using the generate command of the Angular CLI. The
following
command will create an Angular interceptor named auth:

ng generate interceptor auth

Angular interceptors must be registered with an Angular module to use them.

To register an interceptor with a module, import the HTTP_INTERCEPTORS injection
token from the @angular/common/http namespace
and add it to the providers array of the @NgModule decorator:

@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
HttpClientModule,
ProductsModule,
AuthModule
],
providers: [
{ provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true }
],
bootstrap: [AppComponent]
})

An HTTP interceptor must be provided in the same Angular module that imports
HttpClientModule.
-----------------
In Angular, services and standalone components serve different purposes and have
distinct roles within an application. Here are the key differences between services
and standalone components:

1. Functionality and Responsibilities:

- Standalone Component: A standalone component is primarily responsible for
handling the user interface (UI) logic and rendering a specific part of the
application's UI. It encapsulates the template, styles, and behavior associated
with a particular UI element or section.
- Service: A service, on the other hand, is a class that provides shared
functionality or data to different parts of an application. Services are used to
encapsulate common business logic, data retrieval, manipulation, or communication
with external resources (e.g., APIs).

2. Reusability and Dependency Injection:

- Standalone Component: Standalone components can be reused across different
parts of the application or even in different applications. They can encapsulate
reusable UI elements and provide modularization of the UI.
- Service: Services are designed to be reusable and provide shared functionality
across components. They can be injected into multiple components, allowing those
components to access and utilize the service's functionality.

3. Data Sharing and Communication:

- Standalone Component: Standalone components primarily communicate with other
components through inputs, outputs, and events. They may interact with parent or
child components directly via data binding or event emitters.
- Service: Services facilitate communication and data sharing between components
by acting as intermediaries. They can store and manage shared data, provide methods
to manipulate or retrieve data, and allow components to communicate with each other
indirectly.

4. Lifecycle and Instantiation:

- Standalone Component: Standalone components have their own lifecycle hooks,
such as `OnInit`, `OnChanges`, and `OnDestroy`, which are called at specific points
during the component's lifecycle. They are instantiated as part of the component
tree and are created and destroyed along with their parent component.
- Service: Services have a different lifecycle compared to components. They are
typically provided as singletons, meaning that only one instance of a service is
created and shared throughout the application. Services are instantiated when they
are first requested and remain active until the application is closed or the
service is explicitly destroyed.
In summary, standalone components are responsible for UI rendering and
encapsulating specific UI elements, while services handle shared functionality,
data manipulation, and communication between components. Standalone components are
primarily focused on the presentation layer, whereas services provide backend or
business logic functionality that can be shared and injected into multiple
components.
-------------------/////////////////.............

In Angular, template expressions and template statements are two distinct ways of
interacting with data and performing actions within the template.

1. Template Expressions:
Template expressions are enclosed in double curly braces ({{ }}) and are used to
display dynamic values or perform simple calculations within the template. They are
evaluated by Angular and can access properties and methods of the component class.

Example:
```html
<p>{{ username }}</p>
```
In this example, the expression `{{ username }}` will be replaced with the value of
the `username` property from the component class.

Template expressions have a few limitations:

- They should be kept simple and avoid complex logic.
- They cannot contain statements like loops or conditional statements.
- They cannot modify component data or invoke functions with side effects.

2. Template Statements:
Template statements allow you to respond to events and perform more complex actions
within the template. They use event binding and are enclosed in parentheses
followed by the event name, such as `(click)="handleClick()"`.

Example:
```html
<button (click)="handleClick()">Click me</button>
```
In this example, the `(click)` statement is bound to the `handleClick()` method in
the component class. When the button is clicked, the method will be executed.

Template statements have more flexibility than expressions:

- They can invoke methods and functions with side effects.
- They can contain complex logic, including loops and conditional statements.
- They can modify component data.

Overall, template expressions are mainly used for data interpolation and display
purposes, while template statements are used for event handling and executing
actions within the template.

---------------------------
Rest and spread are two concepts in JavaScript that involve manipulating arrays or
objects.

Rest:
Rest parameters are used to represent an indefinite number of arguments as an
array. It allows you to gather multiple function arguments into a single array.
Rest parameters are denoted by three dots (...) followed by a parameter name in a
function declaration.
For example:

```javascript
function sum(...numbers) {
let total = 0;
for (let number of numbers) {
total += number;
}
return total;
}

console.log(sum(1, 2, 3, 4)); // Output: 10

```

In the above example, the rest parameter `...numbers` gathers all the arguments
passed to the `sum` function and stores them in an array called `numbers`. This
allows you to pass any number of arguments to the function without explicitly
defining them as separate parameters.

Spread:
Spread syntax is used to expand an array or object into individual elements. It
allows you to clone or merge arrays and objects easily. Spread syntax is denoted by
three dots (...) followed by the name of the array or object you want to spread.

For example:

```javascript
const numbers = [1, 2, 3];
const newArray = [...numbers, 4, 5];

console.log(newArray); // Output: [1, 2, 3, 4, 5]

```

In the above example, the spread syntax `...numbers` expands the `numbers` array
into individual elements, which are then combined with `4` and `5` to create a new
array called `newArray`.

Similarly, spread syntax can be used to clone objects or merge multiple objects
into one:

```javascript
const obj1 = { name: 'John' };
const obj2 = { age: 25 };

const mergedObj = { ...obj1, ...obj2 };

console.log(mergedObj); // Output: { name: 'John', age: 25 }

```

In this case, the spread syntax `...obj1` and `...obj2` expands the properties of
`obj1` and `obj2` into a new object called `mergedObj`, effectively merging the
properties of both objects.

In summary, rest parameters allow you to gather multiple function arguments into an
array, while spread syntax allows you to expand arrays or objects into individual
elements for cloning or merging purposes.

-------------
call, apply, bind
`call`, `apply`, and `bind` are methods in JavaScript that are used to manipulate
the execution context of a function.

1. `call`:
The `call` method is used to invoke a function with a specified context (`this`
value) and arguments provided individually.
Syntax: `function.call(thisArg, arg1, arg2, ...)`

For example:

```javascript
function greet(name) {
console.log(`Hello, ${name}! My name is ${this.name}.`);
}

const person = {
name: 'John'
};

greet.call(person, 'Alice');
// Output: Hello, Alice! My name is John.
```

In the above example, `call` is used to invoke the `greet` function with the
`person` object as the context (`this` value). The additional argument `'Alice'` is
passed as a separate argument.

2. `apply`:
The `apply` method is similar to `call`, but it accepts the function arguments as
an array or an array-like object.
Syntax: `function.apply(thisArg, [argsArray])`

For example:

```javascript
function sum(a, b, c) {
return a + b + c;
}

const numbers = [1, 2, 3];

const resu lt = sum.apply(null, numbers);

console.log(result); // Output: 6
```

In the above example, `apply` is used to invoke the `sum` function with the
`numbers` array as arguments. The `null` value is passed as the context (`this`
value) since the `sum` function does not rely on the context.

3. `bind`:
The `bind` method creates a new function with a specified context (`this` value)
and partially applied arguments. It allows you to create a new function that, when
called, will have a fixed context and, optionally, some initial arguments.
Syntax: `function.bind(thisArg, arg1, arg2, ...)`

For example:

```javascript
function multiply(a, b) {
 return a * b;
}

const multiplyByTwo = multiply.bind(null, 2);

const result = multiplyByTwo(5);

console.log(result); // Output: 10
```

In the above example, `bind` is used to create a new function `multiplyByTwo` that
has the context (`this` value) set to `null` and the first argument fixed as `2`.
When `multiplyByTwo` is called with a single argument `5`, it multiplies `2` and
`5` to produce the result `10`.

The main difference between `call`, `apply`, and `bind` is in how they handle
function invocation and argument passing. `call` and `apply` immediately invoke the
function, while `bind` returns a new function with the desired context and pre-set
arguments, allowing it to be invoked later.
---------------------------

rest and spread

Call, Apply and Bind.
ng style and ngclass
Interpolation
How to achieve two way binding.
closure
arrow function
hot and cold observables
array and object destructuring
IIFE
hoisting
Interceptor 
What is view encapsulation in Angular?
XSRF
pure and impure functions
whats are bundles and chunks
what is bundling and minification
lazy laoding
type of forms
view encapsulation
Injectable
custom validation
singleton
unsubscription of observable
directive and component
inout output
viewchild
onchanges
centralized error handling in angular
lifecycle hooks
observable and promise
 
lazy loading

What is Association Aggregation?