DEV Community: seshubabubatchu

Angular Injection Context

seshubabubatchu — Wed, 21 May 2025 15:37:24 +0000

The injection context is related to the concept of Angular dependency injection

What is the injection context?

It is a runtime environment where Angular determines which instance of a dependency should be provided when something requests it

It is a place where the dependent injection looks up and resolves the dependencies when requested by a component, directive, or service

inject Method

With dependency injection, we use the constructors to inject the required service into a component, directive, or service

simple example of Dependency Injection

constructor(private http:HttpClient){}

This can be simplified using the latest inject method available in the latest versions of Angular

simple example of an inject function

const http = inject(HttpClient);

Importance of Injection Context

When we need any service to be injected anywhere inside the component or directive, the injection context plays a major role in resolving these dependencies

In general, inside a service file, we will write

@Injectable(providedIn : 'root' )

And at the component level, we will write it in the providers array

And in the latest Angular versions, we can use the inject method outside the constructor as well

So, for all these injection contexts, ensure that the requested services are injected at the requested hierarchy only(i.e, component level, root level)

If Angular cannot find the service, then it looks for its parent injectors until it finds a provider or throws an error. The injection context helps in navigating this hierarchy

Availability of Injection context

The injection context is available in the constructors of components, services, and directives as well

class Demo{
    userService = inject(UserService); //Injection context available
    constructor(private http:HttpClient) //Injection context available
        {
           this.demoService = inject(DemoService); //Injection context available
        }
   }

It is also available in the factory functions for providers

providers : [
    {
        provide: Some_Token,
        useFactory: () => {
            const httpClient = inject(HttpClient) //Injection context available
            return new ClassName(httpClient);
        }
    }

]

Running the inject function outside the automatically provided contexts

We can use the runInjectionContext method here

import {inject, EnvironmentInjector, runInjectionContext} from '@angular/core';

class Demo{
   constructor(private injector:EnvironmentInjector){}
   someMethod(){
       runInjectionContext(this.injector, ()=>{
           const myService = inject(MyService); //works here
       }
   }
}

*Summary *

The injection context allows Angular dependency injection to function properly. It defines the scope where Angular can look up and provide the dependencies that are requested by components, services, and directives.

Thankyou...
Happy Coding...

Angular Signals

seshubabubatchu — Tue, 20 May 2025 13:29:00 +0000

Signal is a wrapper around a value, and the value can be of any type

Signals are of 2 types

writable signals
read-only singles

Writable signals
Signal Creation:

const count: WritableSignal - signal(0) //writable signal example, and here 0 is the initial value provided to the count

Setting the value of the signal
We can set and modify the value of signals in 2 ways

set method
update method

count.set(20) // updated count value from 0 to 20

count.update(prevValue => prevValue+1) //update value, also have the previous value of the signal

Reading the value of the signal

count() // we can access by calling the name of the variable with ()

read-only signals

These types of signals are created using the computed keyword
For these types of signals, we cannot update the value by using set or update methods, unlike writable signals

creation

const doubleCount  =  computed(() => count() *2 )

Reading the read-only signalValue

doubleCount()

Here we can see that doubleCount is dependent on the count signal value

Read-only signals are lazily evaluated

This means, unless we use somewhere in the code doubleCount(), the value is not calculated

Read-only signals memorize the values

Since the doubleCount value depends on the count value, when we read doubleCount(), then the value is calculated and it is cached, and whenever we call doubleCount () again, the cached value is returned

It recalculates the value when the count value is updated, and when we use the doublecount() somewhere in the code

*Computed signals' dependencies are dynamic *

simple example here

const showCount = signal(false);
const count = signal(0);
const conditionalCount = computed(() => {
  if (showCount()) {
    return `The count is ${count()}.`;
  } else {
    return 'Nothing to see here!';
  }
});

Initially, the value of showcount is false, so the conditionalCount is dependent upon showCount only, but not on the count value

So later on if we update the count value,e the conditionalCount will not be recalculated since it is not dependent upon the count value

If we make the showCount as true and then call the conditionalCount, then the conditionalCount is dependent upon both the showCount and the count values as well, so now when the count updates and when we call the conditionalCount, then the value is recalculated

Signals with onPush

Even if we make a component change detection strategy on push, and it contains the signal, when the value of the signal is changed, Angular automatically marks the component to ensure it gets updated the next time change detection runs.

Effects

Effects run when an associated signal value changes, similar to the computed signals; it also has a dynamic dependency and runs the effect when the dependent signal value changes

An effect is run at least once, and when it runs, it tracks any signal reads and any change to the dependency will re-run the effect again

Use case of effects

to log some data when a signal value changes
to set data in local storage when the signal value changes
and some other use cases as per requirement

An effect can be written or created only in an injection context

Injection context

Let us know about the injection context here first. So, what is an injection context?

This is a concept related to dependency injection, i.e... When we use the services in the component, directives, and pipes, by injecting a service using the constructor

simple example for dependency injection

constructor(private HTTP: HttpClient){}

From Angular v14 onwards, we can use the inject keyword instead of the constructor as well

private HTTP = inject(HtppClient)

So, what is an injection context? It is an Angular runtime context that is used for dependency injection. It means we can run the dependency injection in only the injection context available

When is the injection context available

When initializing components, directives, and pipes, (constructor method)
Class field initialization
In the useFactory method
It is also available in AuthGuards directly

destroying the effects

In general, effects will be deleted automatically when associated components get destroyed

We can manually destroy the effect .destroy() method

Untracked keyword

You can prevent a signal read from being tracked by calling its getter with untracked:

example

effect(() => {
  console.log(`User set to ${currentUser()} and the counter is ${counter()}`);
});

The above effect runs for both the signals, currentUSer and counter, as well

If we need the counter signal changes not to trigger this effect, then we can use something like

effect(() => {
  console.log(`User set to ${currentUser()} and the counter is ${untracked(counter)}`);
});

Untracked is also useful when an effect needs to invoke some external code, which shouldn't be treated as a dependency:

effect(() => {
  const user = currentUser();
  untracked(() => {
    this.loggingService.log(`User set to ${user}`);
  });
});

Summary

Writable Signals

Creation - const count = signal(initialValue)
Read Signal - count()
Change Value - count.set(newValue)
Update Value - count.update(oldValue => oldValue + 1)

Read only signals

Creation - const doubleCount = computed(() => count() *2)
Read Signal - doubleCount()
These are read-only
No set and update method works
Consists of Dynamic dependencies
Lazily Evaluated
Values are memorized

Effects

Consists of Dynamic dependencies
Effect runs at least once
Runs every time a dependency signal value changes
Concept of Injection context
- Concept of dependency injection
- Availability of Injection context
destroying effects manually using the .destroy method

Thanks........
Happy Coding.....

Learn Spring Data JPA, Part - 1

seshubabubatchu — Fri, 27 Dec 2024 10:03:17 +0000

Project Setup

create a project using https://start.spring.io/ and add the following dependencies

Spring Data JPA - used to interact with relational databases. It simplifies data access and manipulation by leveraging the Java Persistence API (JPA)
Postgres SQL Driver - to Interact with the Postgres Database
Lombok - It Simplifies the code by using the pre-built annotation
Spring web - spring web for building web applications, particularly RESTful APIs.

click on generate and open the folder in any of your favorite editors, we will be using the vs code here

download the PostgreSQL for your respective OS and go through the installation steps, we will get the PGAdmin application on our machine

open the PGAdmin application and create a database with any name you want

now navigate to the vs code

we will be renaming the application.properties file to application.yml here

enter the following into the application.yml file

ddl-auto : here we will have basically 5 options

none: Disables schema generation. Your application will not attempt to create, drop, or validate the schema in any way.
validate: Validates the schema with the database. It checks that the database schema matches the entities defined in your application. If there are discrepancies, an exception is thrown and the application won't start.
update: Updates the database schema. It makes incremental changes to the database schema without dropping existing data. This is useful during development but may not be suitable for production environments as it might not handle complex schema changes gracefully.
create: Creates the schema every time the application starts. All existing data is removed and tables are created from scratch. This option is useful for testing but should be avoided in production.
create-drop: Creates the schema when the application starts and drops the schema when the application stops. This is primarily used for integration tests where the schema needs to be set up and torn down for each test.

here we are using the create-drop because since we are learning we will be making many changes so create-drop suits this requirement
we are just specifying the URL, which would be our localhost, by default postgress runs on port 5432 so we are using the same port number followed by the database name
username and password which we set during the time of installation of postgress in our machines
show-sql means we can see the SQL commands that are used in the background in the terminal

make sure to follow the indentation and spaces correctly otherwise, this will not work

if you do not wish to rename the application.properties to application.yml

we can write like this as well

This is completely user-specific any approach works here we will be following the application.yml approach here

Now run the Java program

We can also run the program by right-clicking on the Java file and selecting Run Java.

If your terminal does not have any errors, congratulations you have configured the initial project setup 🎉🥳🎉

Angular Services

seshubabubatchu — Sun, 05 Jun 2022 02:47:34 +0000

Services are nothing but classes with a particular function for example fetching or providing data to other componenets
Dependency Injection
Dependency injection is nothing but using the services in other components with loosely coupled so that changes can be easily made
DI conists of mainly 5 modules
consumerrs
prodivders
di token
depeendency
injector
It is responsibility of injector to provide and resolve the services and dependencies to the requested components
we register the service using providers array either at module level or at component level
di token is an unique identification token with which injector identofies the serive and provides the instance of service to requested components
dependency is the service
consumers are nothing but componenets or directives or pipes which requires the service
Asking for service in a component using DI
constructor(private productSercie:ProductService){}
we use @Injectable() if we need other service, if any other decorator is already exising in class then we dont need @Injectable() decorator we simply can use the above constructor syntax
Injecting service into another service
@Injectable() is used for consistency purpose in every service but in general we do not need if the service do not require any other service as dependency
for registering a service there is no option to add providers in service class the provider must be added either in module level or component level
So the service can be added to providers array in app.component.ts
Now the providers array is in app.component then the services are available only to app component and its child components, to make the services availalbe globally then we must move this providers array to @NgModule decorator

instead of adding to ngModele providedIn can be used providedIn:'root'

angular Injector
ModuleInjector - rootModuleInjector - created when bootstraps the application this becomes part of moduleInjector - appModule get its own injector called rootModuleInjector

for every component have their own injector instance and providers array
ElementInjector - for elements (components and directives)

@Inject - this can be used as an alternatie for @Injectable()
@Inject takes injector token as parameter
@Inject(LoggerService) private loggerService

angular Providers
angular providers helps us to register classes, functions or values with a token

4ways of creating a dependecy
useClass
useValue
useFactory
useExisting

angular providers is an array of instructions

providers: [ProductService] this is shorthand notation for providers :[{ provide: ProductService, useClass: ProductService }] this
where provide - is a token and can be type,string or instance of InjctionToken
where second one - It tells Angular how to create the instance of the dependency. The Angular can create the instance of the dependency in four different ways. It can create a dependency from the existing service class (useClass). It can inject a value, array, or object (useValue). It can use a factory function, which returns the instance of service class or value (useFactory). It can return the instance from an already existing token (useExisting).
string type
{provide:'PRODUCT_SERVICE', useClass: ProductService },
{provide:'USE_FAKE', useValue: true },

{provide:'APIURL', useValue: 'http://SomeEndPoint.com/api' },
@Inject('PRODUCTSERVICE') private prdService:ProductService,
Injection token type

export const API_URL= new InjectionToken('');

providers: [
{ provide: API_URL, useValue: 'http://SomeEndPoint.com/api' }
]PI_URL, useValue: 'http://SomeEndPoint.com/api' }
]
constructor(@Inject(API_URL) private apiURL: string) {
}

@optional - skips import of service if service not there instead of throwing error
@self - only checks providers array of its component only if not found throws error
@skipSelf() - skips component providers and search for top level
@Host - limits the search to template only it does not even search in component ts file also
for example

import service in providers array of directiveName and use the directive in component html
it looks for service in current component providers and also looks for dependency in template level in host component
Add the RandomService to the Providers of the GrandChildComponent. Because that is where DI looks first for dependency.

The second option is to add RandomService to viewProviders array of the ChildComponent.

providedIn - root
providedIn - moduleName
providersArray[] - ngModule
providedIn - any
providedIn - platform

concept of treeShaking

Angular set and patch value in Template driven forms

seshubabubatchu — Tue, 19 Apr 2022 06:46:08 +0000

Hey Guys!!!
I was going through angular forms and found a topic quite confusing have gone through a lot of youtube tutorials which are different from another, every one explains in their own way
So decided to make a post on this in-depth.
we are going to see in how many ways set and patch value can be used in angular *template-driven forms *

and common errors that I have encountered while setting and patching values in angular forms

Straight into code

This is the template-driven form we are going to use in this blog

So one common error I was getting while setting and patching values without using any buttons and onclick events I mean when setting or patching values at the time on initialization in ngOnInit()
is

This error is quite annoying since there is no relevant info on the internet (maybe i did not search that great)
So to avoid this it is quite simple to use a setTimeOut function while setting or patching values and call that function on ngOnInit() this works perfectly fine

Ways to set and patch values :

There are many ways to set and patch values you can use them according to your convinience, all the methods can be found in the above screenshot which were commented

Thanks

Angular Routing #4

seshubabubatchu — Thu, 14 Apr 2022 05:45:24 +0000

Angular Route Guards

We use the Angular Guards to control, whether the user can navigate to or away from the current route.

Uses of Angular Route Guards

To Confirm the navigational operation
Asking whether to save before moving away from a view
Allow access to certain parts of the application to specific users
Validating the route parameters before navigating to the route
Fetching some data before you display the component.

Types of Route Guards

CanActivate - If a Route can be accessed or not?
CanDeactivate - If Current Route can be leaved or not?
Resolve - Load or perform some operations before entering Route
CanLoad - This guard works similar to CanActivate guard with one difference. The CanActivate guard prevents a particular route being accessed. The CanLoad prevents entire lazy loaded module from being downloaded, Hence protecting all the routes within that module.
CanActivateChild - This guard determines whether a child route can be activated. This guard is very similar to CanActivateGuard. We apply this guard to the parent route. The Angular invokes this guard whenever the user tries to navigate to any of its child route.

Implementing RouteGuards

import { Injectable } from '@angular/core';
import { Router, CanActivate, ActivatedRouteSnapshot,RouterStateSnapshot } from '@angular/router';

@Injectable()
`export class ProductGuardService implements CanActivate {

constructor(private _router:Router ) {

}

canActivate(route: ActivatedRouteSnapshot,
state: RouterStateSnapshot): boolean {
console.log("canActivate"); //return true

//remove comments to return true

alert('You are not allowed to view this page. You are redirected to Home Page');
this._router.navigate(["home"]);

return false;

} }`

Angular Routing #3

seshubabubatchu — Thu, 14 Apr 2022 04:03:52 +0000

Query Params:

Simple example
<a [routerLink]="['product']" [queryParams]="{ page:2 }">Page 2</a> The router will construct the URL as /product?pageNum=2 <a [routerLink]="['product']" [queryParams]="{ val1:2 , val2:10}">Whatever</a> The router will construct the URL as /product?val1=2&val2=10 Programatically also we can pass queryparams this.router.navigate(['/product'], { queryParams: { page: pageNum } });
here router is of type Router

import { Router } from '@angular/router';

Reading QueryParams

this.sub = this.Activatedroute.queryParamMap
.subscribe(params => {
this.pageNum = +params.get('pageNum')||0;

});
this.Activatedroute.snapshot.queryParamMap.get('pageNum')||0

why snapshot and subscribe and what is difference between them

Remember, the router populates the snapshot, when the component loads for the first time. Hence you will read only the initial value of the query parameter with the snapshot property. You will not be able to retrieve any subsequent changes to the query parameter.

query Params Handling

We have three options to handle these query params they are
Preserve - The Angular preserves or carry forwards the query parameter of the current route to next navigation. Any query parameters of the next route are discarded
Merge - The Angular merges the query parameters from the current route with that of next route before navigating to the next route.
Null - This is default option. The angular removes the query parameter from the URL, when navigating to the next..

Navigate between Routes
We are having 2 ways to navigate Around different routes
Which is one by
and other would be programatic navigation
this._router.navigate(['product/detail/1']
this._router.navigateByUrl('product')
this._router.navigate(['detail'], { queryParams: { pageNum: this.pageNum + 1 }, relativeTo: this._Activatedroute } );
.navigate or .navigateByurl both always uses absolute path
So what is difference between absolute and relative path
absolute contains a / before route like /about
absolute path always appends to the base url like in our case locally it would be
localhost:4000/about
Relative path does not contain a / before it appends the url to currently activates route
if you are in page localhost:4000/career then it would append to this as localhost:4000/career/about

Folder Structure
./ ../ .../ these type of routes can also be used these comes under relative paths and not as absolute paths
this would navigate like
./ - appends given route one level up
../ - appends given route 2 level up
example :
active route is - localhost:4200/about
./home - localhost:4200/about/home
../home - localhost:4200/home

Angular Routing #2

seshubabubatchu — Tue, 12 Apr 2022 06:11:23 +0000

Route Params
Ex:
{ path: 'product/:id/, component: ProductDetailComponent }

<a [routerLink]="['/Product', product.productID]">{{product.name}} </a>
Retriving Params:
ActivatedRoute can be used for this purpose
this.id=this._Activatedroute.snapshot.paramMap.get("id");

this._Activatedroute.paramMap.subscribe(params => { this.id = params.get('id'); });
We usually retrieve the value of the parameter in the ngOninit life cycle hook, when the component initialised.

When the user navigates to the component again, the Angular does not create the new component but reuses the existing instance. In such circumstances, the ngOnInit method of the component is not called again. Hence you need a way to get the value of the parameter.

By subscribing to the observable paramMap property, you will retrieve the latest value of the parameter and update the component accordingly.
can also get the parent params like

this.sub=this._Activatedroute.parent.params.subscribe(params => { this.id = params['id']; let products=this._productService.getProducts(); this.product=products.find(p => p.productID==this.id); });

Simple code snippet:

Angular Routing #1

seshubabubatchu — Tue, 12 Apr 2022 05:07:40 +0000

Location Stratagies

Angular supports two Location Strategies:

HashLocationStrategy

Where URL looks like http://localhost:4200/#/product

PathLocationStrategy

Where URL looks like http://localhost:4200/product

Server Side Routing

General behaviour of web application is it sends every request to the server for loading of each and every request

Client side routing

As angular handles all the routing part without sending each and every request to the server there are also some cons associated with this approach
You won’t be able to refresh the page
You won’t be able to go to a particular view by typing the URL
Sharing the URL with someone is not possible
The Back button will not work as you cannot go back to the previous page
SEO is not possible

The Client-side routing simply mimics server-side routing by running the process in the browser. It changes the URL in the browser address bar and updates the browser history, without actually sending the request to the server

The Client-side routing is handled in two ways

Hash style Routing
HTML 5 Routing(path Location)

Hash Style :

It user a tag #'es to achieve this
http://www.example.com
http://www.example.com/#/about
http://www.example.com/#/contact

HTML 5 Routing :

Using history.pushState() method, we can now programmatically add the browser history entries and change the location without triggering a server page request.

The history.pushState method accepts the following three parameters.

State object: A state object is a JavaScript object which is associated with the new history entry created by pushState()
Title: This is an optional title for the state
URL: The new history entry’s URL. The browser won’t jump to that page.

var stateObj= { message: "some message" };
history.pushState(stateObj, "title", newUrl);

When you request for http://www.example.com the server sends the index.html

Now, When you click on ProductList link, Angular use’s the history.pushState method to push the state and change the URL to http://www.example.com/ProductList

Now, when you click on the specific Product, we again the use history method to push the state and change the URL to http://www.example.com/product/1

Here, when you click the back button, the browser will retrieve the http://www.example.com/ProductList from history and displays it.

But there are cons to this approach

Not all browsers support HTML 5
The older browser does not support HTML5. So if you want to support older browser, you have to stick to the hash style routing
The server support is needed for HTML5 based routing.

Path Location Stratagey

The PathLocationStrategy is the default strategy in Angular application.

To Configure the strategy, we need to add in the

section of root page (index.html) of our application

The Browser uses this element to construct the relative URLs for static resources (images, CSS, scripts) contained in the document.

Hash Location Strategy

You can use the HashLocationStrategy by providing the useHash: true in an object as the second argument of the RouterModule.forRoot in the AppModule.
RouterModule.forRoot(appRoutes, { useHash: true })

Which Location Strategy to Use??

use the HTML 5 style (PathLocationStrategy ) as your location strategy.
It produces clean and SEO Friendly URLs that are easier for users to understand and remember.
You can take advantage of the server-side rendering, which will make our application load faster, by rendering the pages in the server first before delivering it the client
Use hash location strategy only if you have to support the older browsers.

Hope this helps..