fix: update docs for inject migration (#340)

docs/src/content/docs/utilities/Migrations/inject-migration.md

@@ -27,7 +27,7 @@ The moment you run the schematics, it will look for all the classes that have de
 Before running the schematics:
 
 ```typescript
-import { Component } from '@angular/core';
+import { Attribute, Component } from '@angular/core';
 import { MyService } from './my-service';
 import { MyService2 } from './my-service2';
 import { MyService3 } from './my-service3';
@@ -40,12 +40,13 @@ export class AppComponent {
 		private myService: MyService,
 		private elRef: ElementRef<HtmlImageElement>,
 		private tplRef: TemplateRef<any>,
-		private viewContainerRef: ViewContainerRef,
+		private readonly viewContainerRef: ViewContainerRef,
 		service2: MyService2,
 		@Inject('my-service') private service: MyService,
 		@Inject(MyService4) private service4: MyService4,
 		@Optional() @Inject('my-service2') private service5: MyService5,
 		@Self() @Optional() private service6: MyService6,
+		@Optional() @Attribute('my-attr') private myAttr: string,
 	) {
 		myService.doSomething();
 
@@ -76,36 +77,93 @@ import { MyService5 } from './my-service5';
 
 @Component()
 export class AppComponent {
+	// will keep the private keyword
 	private myService = inject(MyService);
+
+	// will pass the Generic type to the inject function as a type argument
 	private elRef = inject<ElementRef<HtmlImageElement>>(
 		ElementRef<HtmlImageElement>,
 	);
+
 	private tplRef = inject<TemplateRef<any>>(TemplateRef<any>);
-	private viewContainerRef = inject(ViewContainerRef);
-	service2 = inject(MyService2);
-	private service = inject<MyService>('my-service');
+
+	// will keep the readonly keyword
+	private readonly viewContainerRef = inject(ViewContainerRef);
+
+	// will keep the string token but use 'as any' to avoid type errors
+	private service = inject<MyService>(
+		'my-service' as any /* TODO(inject-migration): Please check if the type is correct */,
+	);
+
+	// will simplify the inject function by passing the class type as a type argument
 	private service4 = inject(MyService4);
-	private service5 = inject<MyService5>('my-service2', { optional: true });
+
+	// will keep using the string token but use 'as any' to avoid type errors
+	private service5 = inject<MyService5>(
+		'my-service2' as any /* TODO(inject-migration): Please check if the type is correct */,
+		{ optional: true },
+	);
+
+	// will keep the decorators and the order
 	private service6 = inject(MyService6, { self: true, optional: true });
 
+	// will convert the attribute to a string token using HostAttributeToken
+	myAttr = inject<string>(new HostAttributeToken('my-attr'), {
+		optional: true,
+	});
+
 	constructor() {
+		// will inject inside the constructor body when no scope is used
+		const service2 = inject(MyService2);
+
 		this.myService.doSomething();
 
-		this.service2.doSomethingElse();
+		service2.doSomethingElse();
 
-		this.service2.doSomething();
+		service2.doSomething();
 
 		someList.forEach(() => {
 			// nested scope
 			this.myService.doSomething();
 		});
 
 		// use service in a function call
-		someFunction(this.service2).test(this.myService);
+		someFunction(service2).test(this.myService);
 	}
 }
 ```
 
+### Options
+
+- `--project`: Specifies the name of the project.
+- `--path`: Specifies the path to the file to be migrated.
+- `--includeReadonlyByDefault`: Specifies whether to include the readonly keyword by default for the injections. Default is `false`.
+
+#### Include readonly by default
+
+By default, the migration will not add the `readonly` keyword to the injected dependencies. If you want to add the `readonly` keyword to the injected dependencies you can set the `--includeReadonlyByDefault` option to `true`.
+
+```typescript
+import { Component } from '@angular/core';
+import { MyService } from './my-service';
+
+@Component()
+export class AppComponent {
+	constructor(private myService: MyService) {}
+}
+```
+
+```typescript
+import { Component } from '@angular/core';
+import { MyService } from './my-service';
+
+@Component()
+export class AppComponent {
+	// will add the readonly keyword if the option is set to true
+	private readonly myService = inject(MyService);
+}
+```
+
 ### Usage
 
 In order to run the schematics for all the project in the app you have to run the following script: