Angular Basic concepts

@Component({

  selector: 'app-root',

  imports: [],

  templateUrl: './app.component.html',

  styleUrl: './app.component.css'

App-root-> defined in index.html

app.module.ts-> at least 1 component. Grouping multiple components.

Component is combination of HTML+CSS+.TS+spec.ts

In ts file-> linking happens 

@componnet -> decorative, without decorative it is plain JS file

convers ts file into component-> using decorator

index.html-> Single page application

A selector in Angular is like an address for a component. It tells Angular where to display that component in the HTML structure. When Angular finds the selector in the HTML, it replaces it with the component's template. Selectors can be element names, attributes, classes, or combinations of these. For example, a selector app-example would be used in HTML as <app-example>, while [app-example] would be used as <div app-example>. This mechanism allows for modular and reusable components in Angular

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

databinding: communication between html + .TS file
the data in JS or ts file need to shown in HTML is nothing but databinding . because Browser understand HTML+JS+CSS.
One way databinding->communication(passing data)  bewteen .ts file and html file or vice -versa

Two way databinding->

Ex: string Interpolation:It is one-way binding

In HTML file:

In TS file:

export class AppComponent {

  title = 'Demo-String interpolation';

}

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

TypeScript is a superset of JavaScript, meaning it includes all features of JavaScript and adds more, most notably static typing. JavaScript is a dynamically typed language, where variable types are checked during runtime. TypeScript introduces static typing, allowing type checking during development, which helps catch errors early.

Feature	TypeScript	JavaScript
Typing	Statically typed (optional)	Dynamically typed
Compilation	Requires compilation to JavaScript	No compilation needed
Object-Oriented	Supports classes, interfaces, and other OOP features	Prototype-based, but supports OOP concepts
Tooling Support	Excellent IDE support, advanced tooling	Limited built-in tooling
Scalability	Well-suited for large projects	Best for small projects and quick prototyping
Error Detection	Early error detection during development	Errors detected at runtime
Code Readability	Enhanced readability due to type annotations	Can be less readable in large projects
Generics	Supports generics	Does not support generics
Decorators	Supports decorators	Does not support decorators
Use Cases	Large-scale applications, complex projects	Web development, scripting, small projects

TypeScript offers advantages in large projects where maintainability and scalability are crucial. JavaScript is often preferred for smaller projects or when rapid development is needed.

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

Q) Difference between angular and react js:

A) Angular and React are both popular JavaScript technologies for building user interfaces, but they have fundamental differences:

1. Type:

Angular is a JavaScript framework built using TypeScript while React is a JavaScript library built using JSX.

2. Framework vs Library:

Angular:

A complete framework, providing a structured environment for building complex applications. It offers built-in features for routing, state management, form handling, and more.

React:

A JavaScript library focused on building UI components. It's more lightweight and flexible, requiring additional libraries for advanced features like routing and state management.

3. Data Binding:

Angular:

Employs two-way data binding, meaning changes in the UI automatically update the underlying data model, and vice versa.

React:

Utilizes one-way data binding, where data flows in a single direction, making it easier to understand and debug complex applications.

4. Language:

Angular: Primarily uses TypeScript, a superset of JavaScript that offers static typing and improved tooling support.

React: Primarily uses JavaScript, although TypeScript can also be used.

5. Performance:

Angular:

Can be less performant for large applications due to its complex change detection mechanism and full-fledged nature.

React:

Generally performs better than Angular, thanks to its virtual DOM and optimized rendering algorithms.

6. Learning Curve:

Angular:

Has a steeper learning curve due to its complex architecture and extensive features.

React:

Has a relatively easier learning curve, focusing on component-based development and using plain JavaScript.

7. Community and Ecosystem:

Angular: Has a large and active community, backed by Google.

React: Also has a large and vibrant community, backed by Facebook.

Choosing the Right Option:

Angular:

Suitable for building enterprise-level applications with complex requirements and where a structured framework is preferred.

React:

Suitable for building highly interactive user interfaces, single-page applications, and projects where flexibility and performance are prioritized.
-----------------------------------------------------------------------------------------------------------------------------

Angular lifecycle hooks are a series of events that occur during the life of a component or directive. They allow developers to tap into specific moments in the component's lifecycle, from creation to destruction, providing opportunities to execute custom logic. Here's a breakdown of the most common lifecycle hooks:

• constructor():

  This is a standard JavaScript class constructor and is the first method to be executed when a new component instance is created. It's primarily used for dependency injection and setting up initial component state.
• ngOnChanges():

  Called before ngOnInit() and whenever one or more data-bound input properties of the component change. It receives a SimpleChanges object containing the current and previous values of the changed properties.
ngOnInit():
Invoked once after the first ngOnChanges(). It's commonly used for initialization logic, such as fetching data from a service or setting up subscriptions.
ngDoCheck():
Called during every change detection cycle, after ngOnChanges() and ngOnInit(). It allows for custom change detection logic, but should be used sparingly due to its performance impact.
ngAfterContentInit():
Invoked once after Angular projects external content into the component's view.
ngAfterContentChecked():
Called after ngAfterContentInit() and after every subsequent ngDoCheck().
ngAfterViewInit():
Invoked once after the component's view and child views have been fully initialized.
ngAfterViewChecked():
Called after ngAfterViewInit() and after every subsequent ngDoCheck().
ngOnDestroy():
Called just before the component or directive is destroyed. It's used for cleanup tasks, such as unsubscribing from observables and detaching event listeners, to prevent memory leaks.

These hooks provide a structured way to manage the component's lifecycle, enabling developers to control how their components behave during creation, updates, and destruction.

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

Dependency Injection (DI) is a design pattern in Angular where a class requests dependencies from external sources rather than creating them itself. This approach promotes loose coupling, modularity, and testability. Angular's DI system manages the creation and provision of dependencies to classes like components, directives, pipes, and services. 

Key concepts

• Dependency Consumer: A class that requires a dependency.
• Dependency Provider: An object that creates and provides the dependency.
• Injector: A container that manages dependency providers and injects dependencies into consumers.

How it works

A component or service declares its dependencies in its constructor using type annotations.
Angular's injector checks if the requested dependency already exists. If not, it creates a new instance using the configured provider.
The injector then injects the dependency into the requesting class.

Example

TypeScript

// Service
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root' // Makes the service available throughout the app
})
export class MyService {
  getData(): string {
    return 'Hello from MyService!';
  }
}

// Component
import { Component } from '@angular/core';
import { MyService } from './my.service';

@Component({
  selector: 'app-my-component',
  template: `{{ message }}`,
})
export class MyComponent {
  message: string;

  constructor(private myService: MyService) {
    this.message = this.myService.getData();
  }

}