Migration for inject function

Author: NeoScript

webapp/src/app/components/index/index.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, inject } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
 import { Observable, filter } from 'rxjs';
 import { PubsubService } from 'src/app/services/pubsub.service';
@@ -16,10 +16,15 @@ import { MatIcon } from '@angular/material/icon';
     imports: [MatButton, RouterLink, MatIcon, AsyncPipe]
 })
 export class IndexComponent implements OnInit {
+  private pubsub = inject(PubsubService);
+  private matDialog = inject(MatDialog);
+
 
   projectList$: Observable<string[]>
 
-  constructor(private pubsub: PubsubService, private matDialog: MatDialog) {
+  constructor() {
+    const pubsub = this.pubsub;
+
     this.projectList$ = pubsub.projectList$
   }
 

webapp/src/app/components/input-dialog/input-dialog.component.ts

@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, inject } from '@angular/core';
 import { FormControl, ReactiveFormsModule, Validators } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
 import { MatDialogModule, MatDialogRef } from '@angular/material/dialog';
@@ -13,12 +13,10 @@ import { MatInputModule } from '@angular/material/input';
   styleUrl: './input-dialog.component.scss'
 })
 export class InputDialogComponent {
+  private dialogRef = inject<MatDialogRef<InputDialogComponent>>(MatDialogRef);
 
-  input = new FormControl('', Validators.required)
-
-  constructor(private dialogRef: MatDialogRef<InputDialogComponent>){
 
-  }
+  input = new FormControl('', Validators.required)
 
   save(){
     this.dialogRef.close({user_input: this.input.value})

webapp/src/app/components/navbar/navbar.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, inject } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
 import {  Observable, filter } from 'rxjs';
 import { PubsubService } from 'src/app/services/pubsub.service';
@@ -17,9 +17,14 @@ import { AsyncPipe } from '@angular/common';
     imports: [MatToolbar, MatIconButton, RouterLink, MatIcon, AsyncPipe]
 })
 export class NavbarComponent implements OnInit {
+  private pubsub = inject(PubsubService);
+  private dialog = inject(MatDialog);
+
 
   currentHost: Observable<string>
-  constructor(private pubsub: PubsubService, private dialog: MatDialog) {
+  constructor() {
+    const pubsub = this.pubsub;
+
     this.currentHost = pubsub._currentHost$.asObservable();
   }
 

webapp/src/app/components/projects/projects.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, inject } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { EMPTY, Observable, tap } from 'rxjs';
 import { PubsubMessage, PubsubService, Subscription, Topic } from 'src/app/services/pubsub.service';
@@ -17,6 +17,9 @@ import { TopicDetailsComponent } from '../topic-details/topic-details.component'
     imports: [TopicListComponent, SubscriptionListComponent, NgClass, SubscriptionDetailsComponent, TopicDetailsComponent, AsyncPipe]
 })
 export class ProjectsComponent implements OnInit {
+  private route = inject(ActivatedRoute);
+  private pubsub = inject(PubsubService);
+
 
 
   topicList$: Observable<Topic[]> = EMPTY
@@ -27,8 +30,6 @@ export class ProjectsComponent implements OnInit {
   currentTopic?: Topic
   currentSubscription?: Subscription
 
-  constructor(private route: ActivatedRoute, private pubsub: PubsubService) { }
-
   ngOnInit(): void {
     this.route.queryParamMap.subscribe(qpm => {
       this.currentProject = qpm.get("project") ?? ""

webapp/src/app/components/subscription-details/subscription-details.component.ts

@@ -1,4 +1,4 @@
-import { Component, Input, OnInit } from '@angular/core';
+import { Component, Input, OnInit, inject } from '@angular/core';
 import { EMPTY, firstValueFrom, map, Observable } from 'rxjs';
 import { PubsubService, ReceivedMessage, Subscription } from 'src/app/services/pubsub.service';
 import { AsyncPipe, DatePipe } from '@angular/common';
@@ -14,14 +14,14 @@ import { MatSuffix } from '@angular/material/form-field';
     imports: [MatButton, MatIcon, MatSuffix, AsyncPipe, DatePipe]
 })
 export class SubscriptionDetailsComponent implements OnInit {
+  private pubsub = inject(PubsubService);
+
 
   @Input() subscriptionPath?: string
 
   details: Observable<Subscription> = EMPTY
   messages: ReceivedMessage[] = []
 
-  constructor(private pubsub: PubsubService) { }
-
   ngOnInit(): void {
     this.details = this.pubsub.getSubscriptionDetails(this.subscriptionPath!)
   }

webapp/src/app/components/subscription-list/new-subscription-dialog/new-subscription-dialog.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, inject } from '@angular/core';
 import { UntypedFormControl, Validators, ReactiveFormsModule } from '@angular/forms';
 import { MatDialogRef } from '@angular/material/dialog';
 import { PushConfig, Topic } from 'src/app/services/pubsub.service';
@@ -18,15 +18,15 @@ import { MatButton } from '@angular/material/button';
     imports: [MatStepper, MatStep, MatStepLabel, MatActionList, MatListItem, MatStepperNext, MatIcon, MatFormField, MatLabel, MatHint, MatInput, ReactiveFormsModule, MatButton]
 })
 export class NewSubscriptionDialogComponent implements OnInit {
+  private ref = inject<MatDialogRef<NewSubscriptionDialogComponent, NewSubscriptionRequest>>(MatDialogRef);
+
 
   configType?: string
   topic?: Topic
 
   subscriptionForm = new UntypedFormControl('', Validators.required)
   endpointForm = new UntypedFormControl('', Validators.required)
 
-  constructor(private ref: MatDialogRef<NewSubscriptionDialogComponent, NewSubscriptionRequest>) { }
-
   ngOnInit(): void {
   }
 

webapp/src/app/components/subscription-list/subscription-list.component.ts

@@ -1,4 +1,4 @@
-import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { Component, EventEmitter, Input, OnInit, Output, inject } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
 import { firstValueFrom } from 'rxjs';
 import { Subscription, Topic } from 'src/app/services/pubsub.service';
@@ -15,14 +15,15 @@ import { MatIcon } from '@angular/material/icon';
     imports: [MatActionList, MatListItem, NgClass, MatIcon]
 })
 export class SubscriptionListComponent implements OnInit {
+  private dialog = inject(MatDialog);
+
 
   @Input() subscriptions?: Subscription[]
   @Input() topic?: Topic
 
   @Input() currentSubscription?: Subscription
   @Output() currentSubscriptionChange = new EventEmitter<Subscription>()
   @Output() newSubscriptionRequest = new EventEmitter<NewSubscriptionRequest>()
-  constructor(private dialog: MatDialog) { }
 
   ngOnInit(): void {
 

webapp/src/app/components/topic-list/new-topic-dialog/new-topic-dialog.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, inject } from '@angular/core';
 import { UntypedFormControl, Validators, ReactiveFormsModule } from '@angular/forms';
 import { MatDialog, MatDialogRef } from '@angular/material/dialog';
 import { MatCardHeader, MatCardTitle, MatCardSubtitle, MatCardContent } from '@angular/material/card';
@@ -14,9 +14,10 @@ import { MatButton } from '@angular/material/button';
     imports: [MatCardHeader, MatCardTitle, MatCardSubtitle, MatCardContent, MatFormField, MatInput, ReactiveFormsModule, MatButton]
 })
 export class NewTopicDialogComponent implements OnInit {
+  private ref = inject<MatDialogRef<NewTopicDialogComponent>>(MatDialogRef);
+
 
   topicName = new UntypedFormControl('', Validators.required)
-  constructor(private ref: MatDialogRef<NewTopicDialogComponent>) { }
 
   ngOnInit(): void {
   }

webapp/src/app/components/topic-list/topic-list.component.ts

@@ -1,4 +1,4 @@
-import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { Component, EventEmitter, Input, OnInit, Output, inject } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
 import { firstValueFrom } from 'rxjs';
 import { Topic } from 'src/app/services/pubsub.service';
@@ -15,13 +15,14 @@ import { MatIcon } from '@angular/material/icon';
     imports: [MatActionList, MatListItem, NgClass, MatIcon]
 })
 export class TopicListComponent implements OnInit {
+  private dialog = inject(MatDialog);
+
 
   @Input() topics: Topic[] = []
 
   @Input() currentTopic?: Topic
   @Output() currentTopicChange = new EventEmitter<Topic>()
   @Output() newTopicRequest = new EventEmitter<string>()
-  constructor(private dialog: MatDialog) { }
 
   ngOnInit(): void {
   }

webapp/src/app/services/pubsub.service.ts

@@ -1,12 +1,14 @@
 import { HttpClient } from '@angular/common/http';
-import { Injectable } from '@angular/core';
+import { Injectable, inject } from '@angular/core';
 import { BehaviorSubject, EMPTY, map, Observable, ReplaySubject } from 'rxjs';
 import { NewSubscriptionRequest } from '../components/subscription-list/new-subscription-dialog/new-subscription-dialog.component';
 
 @Injectable({
   providedIn: 'root'
 })
 export class PubsubService {
+  private http = inject(HttpClient);
+
   public _currentHost$ = new BehaviorSubject<string>("http://localhost:8681")
 
   private _projectList = new BehaviorSubject<string[]>([])
@@ -20,7 +22,7 @@ export class PubsubService {
   public currentTopic$ = this._currentTopic.asObservable()
   public currentSubscription$ = this._currentSubscription.asObservable()
 
-  constructor(private http: HttpClient) {
+  constructor() {
     const prevHost = localStorage.getItem("host")
     if(prevHost){
       console.log('loaded previous host', prevHost)