update example to standalone

AspNetCore.Reporting.Angular/AspNetCore.Reporting.Angular.Client/src/api-authorization/login-menu/login-menu.component.html

@@ -1,16 +1,21 @@
-<ul class="navbar-nav" *ngIf="isAuthenticated | async">
-    <li class="nav-item">
-        <a  class="nav-link text-dark" [routerLink]='["/authentication/profile"]' title="Manage">Hello {{ userName | async }}</a>
-    </li>
-    <li class="nav-item">
-        <a  class="nav-link text-dark" [routerLink]='["/authentication/logout"]' [state]='{ local: true }' title="Logout">Logout</a>
-    </li>
-</ul>
-<ul class="navbar-nav" *ngIf="!(isAuthenticated | async)">
-  <li class="nav-item">
-        <a class="nav-link text-dark" [routerLink]='["/authentication/register"]'>Register</a>
-    </li>
-    <li class="nav-item">
-        <a class="nav-link text-dark" [routerLink]='["/authentication/login"]'>Login</a>
-    </li>
-</ul>
+@if (isAuthenticated | async; as authenticated) {
+  @if (authenticated) {
+    <ul class="navbar-nav">
+        <li class="nav-item">
+            <a  class="nav-link text-dark" [routerLink]='["/authentication/profile"]' title="Manage">Hello {{ userName | async }}</a>
+        </li>
+        <li class="nav-item">
+            <a  class="nav-link text-dark" [routerLink]='["/authentication/logout"]' [state]='{ local: true }' title="Logout">Logout</a>
+        </li>
+    </ul>
+  } @else if (!authenticated) {
+    <ul class="navbar-nav">
+      <li class="nav-item">
+            <a class="nav-link text-dark" [routerLink]='["/authentication/register"]'>Register</a>
+        </li>
+        <li class="nav-item">
+            <a class="nav-link text-dark" [routerLink]='["/authentication/login"]'>Login</a>
+        </li>
+    </ul>
+  }
+}

AspNetCore.Reporting.Angular/AspNetCore.Reporting.Angular.Client/src/api-authorization/login-menu/login-menu.component.ts

@@ -1,13 +1,15 @@
 import { Component, OnInit } from '@angular/core';
 import { AuthorizeService } from '../authorize.service';
 import { Observable } from 'rxjs';
-import { map, tap } from 'rxjs/operators';
+import { map } from 'rxjs/operators';
+import { RouterLink } from '@angular/router';
+import { AsyncPipe } from '@angular/common';
 
 @Component({
     selector: 'app-login-menu',
     templateUrl: './login-menu.component.html',
     styleUrls: ['./login-menu.component.css'],
-    standalone: false
+    imports: [RouterLink, AsyncPipe]
 })
 export class LoginMenuComponent implements OnInit {
   public isAuthenticated!: Observable<boolean>;

AspNetCore.Reporting.Angular/AspNetCore.Reporting.Angular.Client/src/api-authorization/login/login.component.ts

@@ -4,6 +4,7 @@ import { ActivatedRoute, Router } from '@angular/router';
 import { BehaviorSubject } from 'rxjs';
 import { LoginActions, QueryParameterNames, ApplicationPaths, ReturnUrlType } from '../api-authorization.constants';
 import { environment } from '../../environments/environment';
+import { AsyncPipe } from '@angular/common';
 
 // The main responsibility of this component is to handle the user's login process.
 // This is the starting point for the login process. Any component that needs to authenticate
@@ -13,7 +14,7 @@ import { environment } from '../../environments/environment';
     selector: 'app-login',
     templateUrl: './login.component.html',
     styleUrls: ['./login.component.css'],
-    standalone: false
+    imports: [AsyncPipe]
 })
 export class LoginComponent implements OnInit {
   public message = new BehaviorSubject<string | null>(null);

AspNetCore.Reporting.Angular/AspNetCore.Reporting.Angular.Client/src/api-authorization/logout/logout.component.ts

@@ -4,6 +4,7 @@ import { BehaviorSubject } from 'rxjs';
 import { ActivatedRoute, Router } from '@angular/router';
 import { take } from 'rxjs/operators';
 import { LogoutActions, ApplicationPaths, ReturnUrlType } from '../api-authorization.constants';
+import { AsyncPipe } from '@angular/common';
 
 // The main responsibility of this component is to handle the user's logout process.
 // This is the starting point for the logout process, which is usually initiated when a
@@ -12,7 +13,7 @@ import { LogoutActions, ApplicationPaths, ReturnUrlType } from '../api-authoriza
     selector: 'app-logout',
     templateUrl: './logout.component.html',
     styleUrls: ['./logout.component.css'],
-    standalone: false
+    imports: [AsyncPipe]
 })
 export class LogoutComponent implements OnInit {
   public message = new BehaviorSubject<string | null>(null);

AspNetCore.Reporting.Angular/AspNetCore.Reporting.Angular.Client/src/app/app.component.ts

@@ -1,9 +1,11 @@
 import { Component } from '@angular/core';
+import { RouterOutlet } from '@angular/router';
+import { NavMenuComponent } from './nav-menu/nav-menu.component';
 
 @Component({
     selector: 'app-root',
     templateUrl: './app.component.html',
-    standalone: false
+    imports: [NavMenuComponent, RouterOutlet]
 })
 export class AppComponent {
   title = 'app';

AspNetCore.Reporting.Angular/AspNetCore.Reporting.Angular.Client/src/app/home/home.component.ts

@@ -2,8 +2,7 @@ import { Component } from '@angular/core';
 
 @Component({
     selector: 'app-home',
-    templateUrl: './home.component.html',
-    standalone: false
+    templateUrl: './home.component.html'
 })
 export class HomeComponent {
 }

AspNetCore.Reporting.Angular/AspNetCore.Reporting.Angular.Client/src/app/nav-menu/nav-menu.component.html

@@ -10,14 +10,13 @@
         data-toggle="collapse"
         data-target=".navbar-collapse"
         aria-label="Toggle navigation"
-        [attr.aria-expanded]="isExpanded"
-        (click)="toggle()"
+        [attr.aria-expanded]="isExpanded()"
+        (click)="toggle()" >
       >
         <span class="navbar-toggler-icon"></span>
       </button>
       <div
-        class="navbar-collapse collapse d-sm-inline-flex justify-content-end"
-        [ngClass]="{ show: isExpanded }"
+        class="navbar-collapse collapse d-sm-inline-flex justify-content-end" [class.show]="isExpanded()"
       >
         <app-login-menu></app-login-menu>
         <ul class="navbar-nav flex-grow">

AspNetCore.Reporting.Angular/AspNetCore.Reporting.Angular.Client/src/app/nav-menu/nav-menu.component.ts

@@ -1,19 +1,21 @@
-import { Component } from '@angular/core';
+import { Component, signal } from '@angular/core';
+import { LoginMenuComponent } from '../../api-authorization/login-menu/login-menu.component';
+import { RouterLink, RouterLinkActive } from '@angular/router';
 
 @Component({
     selector: 'app-nav-menu',
     templateUrl: './nav-menu.component.html',
     styleUrls: ['./nav-menu.component.css'],
-    standalone: false
+    imports: [RouterLink, LoginMenuComponent, RouterLinkActive]
 })
 export class NavMenuComponent {
-  isExpanded = false;
+  protected readonly isExpanded = signal(false);
 
   collapse() {
-    this.isExpanded = false;
+    this.isExpanded.set(false);
   }
 
   toggle() {
-    this.isExpanded = !this.isExpanded;
+    this.isExpanded.update(value => !value);
   }
 }

AspNetCore.Reporting.Angular/AspNetCore.Reporting.Angular.Client/src/app/report-list/report.list.component.html

@@ -1,12 +1,14 @@
 <h2>Reports</h2>
 <ul class="Reports">
-  <li class="list-group-item d-flex justify-content-between align-items-center" *ngFor="let reportItem of reportList">
-    <span>{{reportItem.title}}</span>
-    <div class="float-right action-buttons">
-      <div class="btn-group float-right">
-        <a class="btn btn-primary btn-xs" routerLink="/viewer" [queryParams]="{reportId: reportItem.id}" routerLinkActive="active">Show</a>
-        <a class="btn btn-primary btn-xs" routerLink="/designer" [queryParams]="{reportId: reportItem.id}" routerLinkActive="active">Edit</a>
+  @for (reportItem of reportList; track reportItem.id) {
+    <li class="list-group-item d-flex justify-content-between align-items-center">
+      <span>{{reportItem.title}}</span>
+      <div class="float-right action-buttons">
+        <div class="btn-group float-right">
+          <a class="btn btn-primary btn-xs" routerLink="/viewer" [queryParams]="{reportId: reportItem.id}" routerLinkActive="active">Show</a>
+          <a class="btn btn-primary btn-xs" routerLink="/designer" [queryParams]="{reportId: reportItem.id}" routerLinkActive="active">Edit</a>
+        </div>
       </div>
-    </div>
-  </li>
+    </li>
+  }
 </ul>

AspNetCore.Reporting.Angular/AspNetCore.Reporting.Angular.Client/src/app/report-list/report.list.component.ts

@@ -1,11 +1,12 @@
-import { Component, Inject } from '@angular/core';
+import { Component } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
 import { environment } from '../../environments/environment';
+import { RouterLink, RouterLinkActive } from '@angular/router';
 
 @Component({
     selector: 'report-list-component',
     templateUrl: './report.list.component.html',
-    standalone: false
+    imports: [RouterLink, RouterLinkActive]
 })
 export class ReportListComponent {
   reportList?: ReportItem[];

AspNetCore.Reporting.Angular/AspNetCore.Reporting.Angular.Client/src/app/reportdesigner/report-designer.html

@@ -1,4 +1,4 @@
-<dx-report-designer [reportUrl]="reportUrl" height="800px">
+<dx-report-designer [reportUrl]="reportUrl()" height="800px">
 	<dxrd-callbacks>
 	</dxrd-callbacks>
 	<dxrd-request-options [getDesignerModelAction]="getDesignerModelAction" [host]="hostUrl"></dxrd-request-options>

AspNetCore.Reporting.Angular/AspNetCore.Reporting.Angular.Client/src/app/reportdesigner/report-designer.ts

@@ -1,9 +1,9 @@
 import { fetchSetup } from "@devexpress/analytics-core/analytics-utils"
-import { Component, Inject, ViewEncapsulation, OnInit } from '@angular/core';
+import { Component, ViewEncapsulation, OnInit, signal } from '@angular/core';
+import { environment } from "../../environments/environment";
 import { AuthorizeService } from '../../api-authorization/authorize.service';
-import * as ko from 'knockout';
 import { ActivatedRoute } from '@angular/router';
-import { environment } from "../../environments/environment";
+import { DxReportDesignerModule, DxReportViewerModule } from "devexpress-reporting-angular";
 
 @Component({
     selector: 'report-designer',
@@ -19,19 +19,13 @@ import { environment } from "../../environments/environment";
         "../../../node_modules/devexpress-reporting/dist/css/dx-webdocumentviewer.css",
         "../../../node_modules/devexpress-reporting/dist/css/dx-reportdesigner.css"
     ],
-    standalone: false
+    imports: [DxReportDesignerModule, DxReportViewerModule]
 })
 
 export class ReportDesignerComponent implements OnInit {
   getDesignerModelAction = "api/ReportDesignerSetup/GetReportDesignerModel";
   hostUrl = environment.serverUri;
-  get reportUrl() {
-    return this.koReportUrl();
-  };
-  set reportUrl(newUrl) {
-    this.koReportUrl(newUrl);
-  }
-  koReportUrl = ko.observable('');
+  reportUrl = signal('');
 
   constructor(private authorize: AuthorizeService, private activateRoute: ActivatedRoute) {
     this.authorize.getAccessToken()
@@ -46,7 +40,7 @@ export class ReportDesignerComponent implements OnInit {
 
   ngOnInit() {
     if(this.activateRoute.snapshot.queryParams['reportId']) {
-      this.reportUrl = this.activateRoute.snapshot.queryParams['reportId'];
+      this.reportUrl.set(this.activateRoute.snapshot.queryParams['reportId']);
     }
   }
 }

AspNetCore.Reporting.Angular/AspNetCore.Reporting.Angular.Client/src/app/reportviewer/report-viewer.html

@@ -1,4 +1,4 @@
-<dx-report-viewer [reportUrl]="reportUrl" height="800px">
+<dx-report-viewer [reportUrl]="reportUrl()" height="800px">
   <dxrv-callbacks></dxrv-callbacks>
   <dxrv-request-options [invokeAction]="invokeAction" [host]="hostUrl"></dxrv-request-options>
   <dxrv-export-settings [useSameTab]="useSameTabExport" [useAsynchronousExport]="useAsynchronousExport"></dxrv-export-settings>

AspNetCore.Reporting.Angular/AspNetCore.Reporting.Angular.Client/src/app/reportviewer/report-viewer.ts

@@ -1,8 +1,8 @@
-import { Component, Inject, OnInit, ViewEncapsulation } from '@angular/core';
+import { Component, Inject, OnInit, ViewEncapsulation, signal } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { fetchSetup } from '@devexpress/analytics-core/analytics-utils';
-import * as ko from 'knockout';
 import { AuthorizeService } from '../../api-authorization/authorize.service';
+import { DxReportViewerModule, DxReportDesignerModule } from 'devexpress-reporting-angular';
 
 @Component({
     selector: 'report-viewer',
@@ -14,16 +14,10 @@ import { AuthorizeService } from '../../api-authorization/authorize.service';
         "../../../node_modules/@devexpress/analytics-core/dist/css/dx-analytics.material.blue.light.css",
         "../../../node_modules/devexpress-reporting/dist/css/dx-webdocumentviewer.css"
     ],
-    standalone: false
+    imports: [DxReportViewerModule, DxReportDesignerModule]
 })
 export class ReportViewerComponent implements OnInit {
-  get reportUrl() {
-    return this.koReportUrl();
-  };
-  set reportUrl(newUrl) {
-    this.koReportUrl(newUrl);
-  }
-  koReportUrl = ko.observable('');
+  reportUrl = signal('');
   invokeAction: string = '/DXXRDVAngular';
 
   useSameTabExport = true;
@@ -42,7 +36,7 @@ export class ReportViewerComponent implements OnInit {
 
   ngOnInit() {
     if(this.activateRoute.snapshot.queryParams['reportId']) {
-      this.reportUrl = this.activateRoute.snapshot.queryParams['reportId'];
+      this.reportUrl.set(this.activateRoute.snapshot.queryParams['reportId']);
     }
   }
 }