Angular is a JavaScript FrameWork which allows us to create Single page Applications(SAP).

what is A FrameWork📌
A FrameWork is like a platform for developing software it can have pre-defined classes and functions that can be re-used to add several functionalities, which otherwise we would have to write from scratch by our own
what is Single Page 📄 Application(SAP) 📌
A single page application is a web application,which has only one HTML page. When we navigate around , only the content of that page changes . the page itself never changes Advantage of SAP. Since we are using JavaScript to change the content of the page it is much Faster , Here we are not reaching out to the server to request a new place of HTML data every time we navigate to a different URL

Limitation f JavaScript /JQuery

• Vanilla JavaScript or jQuery code becomes hard to maintain and we will need a way to properly structure our apllication
• A lot of applications built using vanilla JavaScript or JQuery is hard to test
• There are some functionalities which we will have to write from scratch when using JavaScript/JQuery

• Angular gives our apllication a clean and loosely coupled structure that is essay to understand and maintain
• it brings a lot of utility code which can be re-used in a lot of application Especially . when dealing withe user navigation and browser history
• Application build with Angular are more testable

AngularJS is the first version of the Angular framework, while Angular refers to the newer versions (Angular 2 and above). AngularJS is a JavaScript-based framework, while Angular uses TypeScript, a statically typed superset of JavaScript. Angular provides improved performance, scalability, and features compared to AngularJS.

1: Install Node.js Node.Js Node.js is an open-source, cross-platform JavaScript runtime environment that allows developers to run JavaScript code outside a web browser. It is built on Chrome's V8 JavaScript engine and is designed for executing server-side scripts. Node.js enables developers to use JavaScript for server-side scripting, creating command-line tools, and building back-end applications, making it a popular choice for building scalable and high-performance web applications

2:Install npm (Node Package Manager)Downloading and installing Node.js and npm is a package manager for the Node.js runtime environment. It is the default package manager for Node.js and is bundled with it. npm allows developers to easily install, share, and manage Node.js modules and libraries, making it easier to build and share JavaScript code

3: Install command-line interface AngularCLI is a text-based user interface for interacting with a computer system or software application. It allows users to enter commands using a keyboard, and the system or application will execute those commands and return the results in text form. CLIs are commonly used in software development, system administration, and network administration. They provide a powerful and flexible way to interact with complex systems and automate tasks

Angular architecture patterns refer to the various design approaches and best practices for structuring Angular applications to achieve modularity, scalability, maintainability, and performance. Here are some common Angular architecture patterns

ng new my-angular-app

When you build an Angular application, the Angular CLI (Command Line Interface) or other build tools generate several files that are included in the index.html file during runtime.

Let's go through the files you mentioned:

• runtime.js: This file contains the code necessary for bootstrapping and running the Angular application at runtime. It includes the runtime environment and Angular's runtime compiler.
• polyfills.js: This file contains polyfills, which are code snippets that provide modern functionality on older browsers that may not support certain features. Angular applications often include polyfills to ensure compatibility with a wide range of browsers.
• styles.js: This file typically includes the styles (CSS) of your Angular application. It contains the compiled styles from your components and global styles.
• vendor.js: This file contains the code from third-party libraries and dependencies used by your Angular application. It includes the Angular framework itself and any other external modules or libraries.
• main.js: This is the main entry point of your Angular application. It usually includes the code responsible for bootstrapping the Angular module, setting up the application environment, and initializing the component tree.

In Angular, bootstrapping refers to the process of initializing 🚀 and running an Angular application. It involves loading 💱 the root module of the application which mostly is app.module.ts and then compiling and launching the component tree. In other words when an Angular application is started, the Angular framework reads the main.ts file, which contains the bootstrap code, and it loads the specified module (AppModule). The framework then processes the metadata defined in AppModule and initializes the application accordingly. The main file responsible for bootstrapping an Angular application is typically named main.ts or main.js.

bootstrapApplication(AppComponent, appConfig)
  .catch((err) => console.error(err));

Note: 📌 Angular Project: Angular CLI saves the compile Angular application in the memory and directly start it. ng serve: If we make any changes to our Angular app,Angular CLI will recompile and update the file Webpack: Angular CLI uses Webpack to travers through our Angular app, and it bundles js and other files into one or more bundles then Angular CLI also injects the bundled JavaScript and CSS files in the index.html

In Angular, "modules" are a way to organize an application into cohesive blocks of functionality. Angular applications are typically built using multiple modules, each serving a specific purpose. Modules help in organizing the codebase, managing dependencies, and providing a clear structure to the application.
There are two types of modules in Angular:
Root Module: This is the main module of an Angular application, conventionally named AppModule. It is typically defined in the app.module.ts file. The root module bootstraps the application and contains references to other modules and components that are essential for the application to run.

// app.module.ts (Root Module)
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Feature Modules: These are additional modules created to encapsulate specific features or functionalities of the application. Feature modules are used to group related components, directives, pipes, and services. They help in making the application modular and maintainable by dividing it into smaller, manageable pieces.

// feature.module.ts (Feature Module)
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FeatureComponent } from './feature.component';

@NgModule({
  declarations: [
    FeatureComponent
  ],
  imports: [
    CommonModule
  ],
  exports: [
    FeatureComponent
  ]
})
export class FeatureModule { }

Angular is a component-based JavaScript Framework for building Client side App Components are the main building blocks for Angular applications. Component is a piece of user InterFace An Angular application is essentially a tree of Component the component can interact withe view Template thanks to Data Angular Data 📊 Binding 🖇 Concept.
Create Component without angular CLI:

• create TypeScript class and export it
• Decorate the class withe @Component decorator and provide decorator Object Example {selector:"app-compoenent", selector: 'app-root', standalone: true, imports: [RouterOutlet], templateUrl: './app.component.html', styleUrl: './app.component.css'}
• Declare 📢 the Class in the main Module File
  

Creat component with Angular cli:

ng generate component Component-Name

Types of Component Selectors:

• HtML-Tag : Selector === "component-Name"
• Attribute-Tag: Selector === "[component-Name]" in case of using this component as a directives attribute
• Css-class or Css-id: selector === ".component-Name"or "#component-Name"
  

Note: Angular components are a subset of directives, always associated with a template

There are various ways in which we can display data on the view. The process of displaying this data is data binding. Angular data binding is an essential and powerful aspect of software development. It defines the communication between a component and its views. Data binding brings dynamism and interactivity to applications.

In Angular, a directive is a class with a @Directive decorator. Directives add behavior to elements in the DOM (Document Object Model). They can modify the appearance or behavior of a DOM element, component, or another directive.

There are three types of directives in Angular:

• Component Directives: These are the most common directives in Angular. They are directives with a template. When Angular encounters a component directive in the HTML, it renders the component along with its template.
• Attribute Directives: These directives change the behavior or appearance of an element, component, or another directive. They are used as attributes within HTML tags.
• Structural Directives: These directives change the DOM layout by adding or removing elements. They are preceded by an asterisk (*) in the HTML.

Note📌: Angular provides some built-in directives like *ngIf, *ngFor, and *ngSwitchCase, but you can also create custom directives to encapsulate and reuse behavior across your application.

To create a custom directive in Angular, you can use the @Directive decorator. Here's a step-by-step guide to creating a custom directive: 1-Create a new directive using the Angular CLI:

ng generate directive myDirective

2-Define the directive:

import { Directive, ElementRef, HostListener } from '@angular/core';

@Directive({
  selector: '[ ]'
})
export class MyDirectiveDirective {

  constructor(private el: ElementRef) { }

  @HostListener('mouseenter') onMouseEnter() {
    this.highlight('yellow');
  }

  @HostListener('mouseleave') onMouseLeave() {
    this.highlight(null);
  }

  private highlight(color: string) {
    this.el.nativeElement.style.backgroundColor = color;
  }
}

Note:📌 In this example, the directive listens for mouse enter and mouse leave events on the host element and changes its background color accordingly.

3-Use the directive:
You can now use the appMyDirective directive in any of your Angular components' templates.

<div appMyDirective>
  Hover over me to see the effect
</div>

4-Add the directive to your module:
Don't forget to add the directive to the declarations array of your module.

Custom property Binding is when we bind properties of Component class to some TypeScript expression @Input(): This decorator allows a parent component to pass data into a child component. When you use @Input() to decorate a property in the child component, you make that property available for binding from the parent component's template.Example:
Child Component

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

@Component({
  selector: 'app-filter',
  templateUrl: './filter.component.html',
  styleUrl: './filter.component.css'
})
export class FilterComponent {
@Input() all:number=0;
@Input() inStack:number=0;
@Input() outOfStuck:number=0;
}

Parent Component

import {Component} from '@angular/core'
import {Product} from "../../../models/products.model";
import {products} from "../../../models/ProducdsListe";
@Component({
  selector: 'app-products-list',
  templateUrl: './products-list.component.html',
  styleUrl: './products-list.component.css'
})

export class ProductsListComponent {
  public productList:Product[]=products;
  public products_list_size:number=this.productList.length;
  public productInStaock:number=this.productList.filter(products=>products.is_in_inventory).length

}

Parent template

<div class="container">
  <app-filter [all]="products_list_size" [inStack]="productInStaock" [outOfStuck]="products_list_size-productInStaock"  ></app-filter>
  <div class="row">
    <app-product *ngFor="let products of productList" [product]="products" class="col-md-4"></app-product>
    </div>
  </div>

In Angular, @Output is a decorator used in a child component to emit events to its parent component. It allows data to flow from the child component to the parent component.

A template reference variable is a variable which stores a reference to a DOM element Component or Directive on which it is used

The @ViewChild decorator is used to query and obtain a reference to DOM elements within a component.It returns the first matching element. The main difference between @ViewChild and template reference variables is that @ViewChild receive the reference of the element when the class loaded for the first time. In the case of template references, we must use an event to receive the ref element.
The @ViewChild decorator takes two properties:

• The first property is the element reference and it mandatory.
• The second optional argument of @ViewChild() is an object that takes two properties:

1. read: Use it to read different tokens from the queried elements.
2. static: Determines when the query is resolved. It takes two values, true or false. TRUE: resolves the query when the view is initialized (before the first change detection) for the first time. FALSE : resolves the query after every change detection Cycle .

Note 📌: @ViewChild will always return the first matching element. For example, when we use @ViewChild with multiple input elements, it will return the first element. Additionally, we can use @ViewChild to pass the reference of the instance components, not only DOM elements.

  Example:
  @ViewChild(ComponentName or elementRef )properyName!:type;

It s same as @ViewChild but The viewChildren decorator is used to get a reference to the list of Dom element from the view template in the component class. it returns all the matching element ViewChildren return list of type and the @ViewChildren is works after change detection resolve and the second parameter ViewChildren there is just read property not like the view

 @ViewChildren('inputElement')allInputs!:QueryList<ElementRef>
    onSubmit() {
    this.allInputs.forEach(ele=>{
    console.log(ele.nativeElement)
    })
    }

the ng-template is an Angular element which wrap an HTML snippet .this HTML snippet 📎 acts and can be used Like a Template 🧾 and can be rendered in the DOM tree 🎄 and even we use this directive it will not be rendered directly in web page that's why we have to use structure directives like *ngIf or *ngFor or there's specificness struclturl rectifier call ngTemplateOutlet directive and use the template reference variable for the ng-template

<h1>Hello in my ReadMe</h1>
<!--Note: this HTML will not rendered in the browser why ? -->
<ng-template #ngTemplate>
    <h3>I'm here to Help u 🙌</h3>
    <P>If you can't explain it simply, you don't understand it well enough.</P>
</ng-template>
<div *ngTemplateOutlet="ngTemplate"><!--this ng-template will be rendered in this 👉 div --></div>

Use Cases Example 👇

<div *ngIf="isLoggedIn; else loginTemplate">
    <p>Welcome, {{ username }}!</p>
</div>
<ng-template #loginTemplate>
    <h3> you need to Login First</h3>
    <button class="" (click)="login()"  >Login🔐</button>
</ng-template>

The ng-container In Angular, ng-container is a special element provided by Angular that allows you to group multiple elements together without actually creating an additional element in the DOM. It's a structural directive that is useful for situations where you need to apply structural directives like *ngIf, *ngFor, or *ngSwitch to multiple elements without adding an extra wrapper element. it s like fragment in React. And the main idea of crating ng-container it s to allows us to use multiple structural directive without using a lot of divs

<h2>Learn Ng-template</h2>
<ng-template #template>
    <h3>this is a template</h3>
    <p>this is an example paragraph to understand ng-template</p>
</ng-template>
<!--the most use Case of ng-template-->
<ng-container *ngTemplateOutlet="template"></ng-container>

The element specifies where to project content inside a component template.

Note:📌 when we use multiple ng-content all the content will replaced in the lase one so this why we need to add attribute select to ng-content to specify which element we want to replace

The @ContentChildren decorator is used to access a reference of all the DOM elements , Components or directives From the projected content in the child Component class based on a given selector

When Angular encounters a component selector in the template (e.g., ), it first looks up the corresponding component class based on the selector name. Once found, Angular creates a new instance of that component class using the class constructor. This constructor can be used to perform any initialization tasks required for the component to function, such as injecting dependencies.
component Life Cycle:
1- When The Angular Application start,it first creates and renders the root component
2- Then it creates and renders its children and their children. in this way it forms a tree of components
3- Once Angular loads the Component,it starts the process of rendering the view To Do that it need to check the input properties evaluate the data bindings & expressions, render the projected content etc.

Note:📌 When a constructor is called, by that time ,none of its input properties are updated and available to use When a constructor is called, by that time the child component of that component are not yet construed Projected Contents are also not available by the time the constructor of a component

the Angular life cycle hooks are the methods that angular invokes on a directive or a component , as it creates,changes and destroys them
Change Detection in Angular is a mechanism by which,angular Keeps the view template is in sync with the component class
when change detection mechanism works ?

• Whenever the @input property of a component changes
• whenever a DOM event happens click or change
• Whenever a Timer events happens using setTimeOUt()/setInterval()
• Whenever an HTTP request is made

Note📌: from all this hooks theirs just four hooks that's we can use them in a directive class they are [NgOnChange,NgOnInit,NgDoCheck,ngOnDestroy]

Allows us to manipulate the DOM without accessing the DOM directly,By providing a Layer of abstraction between the DOM element and component code

• Angular Keeps the component and the view in sync using templates . data binding and change detection etc .All of them are bypassed when we update the DOM directly
• the DOM manipulation works only in browser .You will not be able to use your app in other platform like web workers,servers for server-side rendering , desktop or mobile apps etc. where there is no browser
• The Dome APS's does not sanitize the data. hence it is possible to inject a script , thereby opening our app an easy target for XSS injection attacks

export class BackgroundColorDirective implements OnInit{

constructor (private elementRef:ElementRef,
private rendererTwo:Renderer2) { }

ngOnInit(): void {
this.rendererTwo.setStyle(this.elementRef.nativeElement,'backgroundColor','black')
}

    }

In Angular, HostListener is a decorator that's used to subscribe to events of the host element in the directive or component. It allows you to listen to events such as mouseenter, mouseleave,

The @HostBinding decorator binds a host elements property to a property of a directive or a component class

In Angular, services are a way to organize and share code across different parts of your application. They are regular TypeScript classes with a specific purpose, such as fetching data from a server, logging, or managing application state. Services in Angular are usually singleton objects, meaning that there is only one instance of a service in the application. Services allow you to keep your components lean and focused on their specific tasks, while business logic, data manipulation, and communication with the server are handled by services
. Advantages

• Services allows us to re-use a piece of code in multiple components wherever it is required . in this way we avoid repeating a piece of code
• it allows us to separate business logic From UI logic in a service class, IN this way it provides separation of concern
• We are able to use untie testing easy to test ths business logic written in a service class separately without creating a component.Testing and debugging is easier with services
  How To create a Service using angular XLI just wright this commend

 ng g service name-Of-service

What is Dependency Injection A dependency is a relationship between two software components where one component relies on the other component to work properly
Why we need Dependency injection 🙄

• without dependency injection a class is tightly coupled with it s dependency this make a class non-flexible Any change in dependency force us to change the class implementation
• it makes testing of class difficult. Because if the dependency changes the class has to change. And when the class changes the unit test mock code also has to change
• Dependency injection or DI Keep the code flexible , testable , and mutable
• Classes can inherit external logic without knowing how to create it
• Dependency injection benefits components , Directive and pipe

Note 📌 When we provide a service on multiple components each component get it s own instance of that service
Dependency Override : When we provide a dependency on a component and also provide a dependency on it s child component . child component dependency instance will override it s parent component dependency instance Child component provider override the instance if parent component provider
Model injector: We can also inject a service from Module class in that Case Same instance of the dependency will be available throughout the Angular application.In this way we implement singleton pattern where a single instance is shared throughout the application

Injecting Service into Another Service if we want to inject service in another service we use @injectable decoratoc Angular Injection Token in the providers array we can use this syntax to provide services [{ provide:UserService|| 'USER-SERVICE' ,useClass:UserService }] @inject('USER-SERVICE')

An Observable is a wrapper around asynchronous data. We use an observable to handle asynchronous data
An Observable is a function that convert the ordinary data stream into an observable one You can think of Observable as a wrapper around the ordinary Data stream what is synchronous programming 🤔 JavaScript is a single-threaded programming language that means that in javaScript the code executed line by line in which they are defined

Note📌 the async Code execute in the background without blocking the Main thread.

Promise vs Observable

• Promise cannot handel Stream fo async Data. it always returns a single Value.On the other Hand we can use observables to handle stream of async data . it can return multiple values
• A Promise Will Certainly return a data even if no Code is using that data Whereas an observable Will return a data only if someone is going to use that data
• A promise is native to javaScript programing .Whereas is not native To JavaScript and it is provided BY "RXJS" library What is RXJS

the of operator creates an observable from the arguments that we pass any number of arguments to of operator Each argument is emitted separately one after other.it send the complete signal at the end

Routing allows us to navigate from one part of our application to another part. In Angular, we're using routing we can move from view of one component to view of another component.

• Create a new route using Routes array and define some route objects inside that array Register the route using RouterModule.forRoot(routeName)
• use where you want to render the view of specified route component

Navigation Links:

RouterLink Directive: The RouterLink is a directive that binds the HTML element to a Route. When the HTML element on which we have used the RouterLink is clicked, it will result in navigation to that Route note:RouterLink directive is an attribute directive and we can also pass additional parameters to it.

Absolute Path 📌 : When we use a slash ("/") before the router, in that case it uses absolute path and the path is directly appended to root url About URL :localhost:2400/About

[1]: What is a Route Guard Allowing the users to navigate to all partes of the application in not a good idea. And We need to restrict the use accessing certain routes, Until the user performs a specific action like login to application .So you can use route guard for following scenario 's:

• Restrict a use from accessing a route.

• Ask user to save changes before moving away from view

• Validating the route parameters before navigating to the route.

• Fetch some data before you display component view of a route.
  Type of Route Guard

  1. CanActivate: this Guard decides if a route can be accessed by a user or not. This guard is useful in the circumstance where the user in not authorized to navigate to the target component
  2. CanActivateChild: this Guard decides, if a user can leave a route or not. the Guard is useful in case where the user might have some pending changes, which not saved.
  3. CanDeactivate: this guard determines whether route can be activated or not
     
  4. 4Resolve:
     this guard delays the activation of the route until some tasks are complete you can use the guard to pre-fetch the data from the backend API, before activating the route: CanLoad The Guard prevents the loading of the lazy loaded Module. We generally use this guard when we do not want to unauthorized user to be able to even see the source code of the module.
     

  Route Guard Implementation
  -Angular 14 And Lower Versions:
  

  1. Create a service which inherits from specific route guard InterFace
  2. implement the method provided by that route guard interface
  3. Return a boolean value / data from that method.
  4. Assign the service to route guard property of route object
     

  Angular 15 and Higher Version
  

  1. Creat a function which should return a boolean value
  2. Assign that function to specific route guard property of route object

In Angular, When we navigate from one route to another route , there is a sequence of navigation events that gets triggered by angular router, We can subscribe to these events and execute some logic if we want.