migrates sample app to standalone API

Author: udos86

src/app/app.component.ts

@@ -1,11 +1,14 @@
 import { Component } from "@angular/core";
 // import { Response, ResponseOptions } from "@angular/http";
 // import { MockBackend } from "@angular/http/testing";
-import { Router, NavigationEnd } from "@angular/router";
+import { Router, NavigationEnd, RouterOutlet, RouterLink } from "@angular/router";
+import { NgStyle } from "@angular/common";
 
 @Component({
     selector: "app-root",
-    templateUrl: "./app.component.html"
+    templateUrl: "./app.component.html",
+    standalone: true,
+    imports: [RouterOutlet, RouterLink, NgStyle]
 })
 export class AppComponent {
     routeData: any = {};

src/app/app.module.ts

@@ -1,13 +1,12 @@
-import { NgModule } from "@angular/core";
-import { Route, RouterModule } from "@angular/router";
+import { Route } from "@angular/router";
 import { BasicSampleFormComponent } from "./ui-basic/basic-sample-form.component";
 import { FoundationSampleFormComponent } from "./ui-foundation/foundation-sample-form.component";
 import { MaterialSampleFormComponent } from "./ui-material/material-sample-form.component";
 import { NGBootstrapSampleFormComponent } from "./ui-ng-bootstrap/ng-bootstrap-sample-form.component";
 import { NgxBootstrapSampleFormComponent } from "./ui-ngx-bootstrap/ngx-bootstrap-sample-form.component";
 import { PrimeNGSampleFormComponent } from "./ui-primeng/primeng-sample-form.component";
 
-const APP_ROUTES: Route[] = [
+export const appRoutes: Route[] = [
     {
         path: "",
         redirectTo: "/material-sample-form",
@@ -73,10 +72,3 @@ const APP_ROUTES: Route[] = [
         loadChildren: () => import("./lazy-loaded/lazy-loaded-form.module").then(module => module.LazyLoadedFormModule)
     }
 ];
-
-@NgModule({
-    imports: [RouterModule.forRoot(APP_ROUTES)],
-    exports: [RouterModule]
-})
-export class AppRoutingModule {
-}

src/app/app-routing.module.ts renamed to src/app/app.routes.ts

@@ -1,10 +1,14 @@
 import { Component } from "@angular/core";
 import { DynamicFormService, DynamicFormControlModel } from "@ng-dynamic-forms/core";
 import { LAZY_LOADED_FORM_MODEL } from "./lazy-loaded-form.model";
+import { ReactiveFormsModule } from "@angular/forms";
+import { DynamicBootstrapFormControlContainerComponent } from "@ng-dynamic-forms/ui-bootstrap";
 
 @Component({
     selector: "dynamic-lazy-loaded-form",
-    templateUrl: "./lazy-loaded-form.component.html"
+    templateUrl: "./lazy-loaded-form.component.html",
+    standalone: true,
+    imports: [ReactiveFormsModule, DynamicBootstrapFormControlContainerComponent]
 })
 export class LazyLoadedFormComponent {
     formModel: DynamicFormControlModel[] = LAZY_LOADED_FORM_MODEL;

src/app/lazy-loaded/lazy-loaded-form.component.ts

@@ -1,21 +1,9 @@
 import { NgModule } from "@angular/core";
-import { DynamicFormsBootstrapUIModule } from "@ng-dynamic-forms/ui-bootstrap";
-import { LazyLoadedFormRoutingModule } from "./lazy-loaded-form.routing.module";
-import { NG_VALIDATORS, ReactiveFormsModule } from "@angular/forms";
-import { CommonModule } from "@angular/common";
-import { LazyLoadedFormComponent } from "./lazy-loaded-form.component";
-import { DYNAMIC_VALIDATORS, DynamicFormsCoreModule, Validator, ValidatorFactory } from "@ng-dynamic-forms/core";
+import { NG_VALIDATORS } from "@angular/forms";
+import { DYNAMIC_VALIDATORS, Validator, ValidatorFactory } from "@ng-dynamic-forms/core";
 import { customLazyLoadedValidator } from "./lazy-loaded-form.validators";
 
 @NgModule({
-    imports: [
-        LazyLoadedFormRoutingModule,
-        CommonModule,
-        ReactiveFormsModule,
-        DynamicFormsCoreModule,
-        DynamicFormsBootstrapUIModule
-    ],
-    declarations: [LazyLoadedFormComponent],
     providers: [
         {
             provide: NG_VALIDATORS,

src/app/lazy-loaded/lazy-loaded-form.module.ts

@@ -1,15 +1,21 @@
 import { Component } from "@angular/core";
-import { UntypedFormArray } from "@angular/forms";
+import { JsonPipe, NgFor } from "@angular/common";
+import { ReactiveFormsModule, UntypedFormArray } from "@angular/forms";
 import {
     DynamicFormService,
     DynamicFormArrayModel,
-    DynamicFormControlEvent
+    DynamicFormControlEvent,
+    DynamicTemplateDirective
 } from "@ng-dynamic-forms/core";
+import { DynamicBasicFormControlContainerComponent } from "@ng-dynamic-forms/ui-basic";
 import { BASIC_SAMPLE_FORM_MODEL, BASIC_SAMPLE_FORM_ARRAY_MODEL } from "./basic-sample-form.model";
 
+
 @Component({
     selector: "dynamic-basic-sample-form",
-    templateUrl: "./basic-sample-form.component.html"
+    templateUrl: "./basic-sample-form.component.html",
+    standalone: true,
+    imports: [NgFor, JsonPipe, ReactiveFormsModule, DynamicBasicFormControlContainerComponent, DynamicTemplateDirective]
 })
 export class BasicSampleFormComponent {
     formModel1 = this.formService.fromJSON(JSON.stringify(BASIC_SAMPLE_FORM_MODEL));

src/app/ui-basic/basic-sample-form.component.ts

@@ -1,20 +1,24 @@
 import { Component, ViewEncapsulation } from "@angular/core";
-import { UntypedFormArray } from "@angular/forms";
+import { FormGroup, ReactiveFormsModule, UntypedFormArray } from "@angular/forms";
 import {
     DynamicFormArrayModel,
     DynamicFormControlEvent,
     DynamicFormControlModel,
     DynamicFormLayout,
-    DynamicFormService
+    DynamicFormService, DynamicTemplateDirective
 } from "@ng-dynamic-forms/core";
 import { FOUNDATION_SAMPLE_FORM_MODEL } from "./foundation-sample-form.model";
 import { FOUNDATION_SAMPLE_FORM_LAYOUT } from "./foundation-sample-form.layout";
+import { DynamicFoundationFormComponent } from "@ng-dynamic-forms/ui-foundation";
+import { JsonPipe } from "@angular/common";
 
 @Component({
     selector: "dynamic-foundation-sample-form",
     styleUrls: ["../../../node_modules/foundation-sites/dist/css/foundation.css"],
     templateUrl: "./foundation-sample-form.component.html",
-    encapsulation: ViewEncapsulation.None
+    encapsulation: ViewEncapsulation.None,
+    standalone: true,
+    imports: [JsonPipe, ReactiveFormsModule, DynamicFoundationFormComponent, DynamicTemplateDirective]
 })
 export class FoundationSampleFormComponent {
     formModel: DynamicFormControlModel[] = FOUNDATION_SAMPLE_FORM_MODEL;

src/app/ui-foundation/foundation-sample-form.component.ts

@@ -1,9 +1,15 @@
 import { Component, ViewEncapsulation } from "@angular/core";
+import { JsonPipe } from "@angular/common";
+import { ReactiveFormsModule } from "@angular/forms";
+import { MatCardModule } from "@angular/material/card";
+import { MatNativeDateModule } from "@angular/material/core";
+import { DynamicMaterialFormComponent } from "@ng-dynamic-forms/ui-material";
 import {
     DynamicFormService,
     DynamicFormControlModel,
     DynamicFormLayout,
-    DynamicFormControlEvent
+    DynamicFormControlEvent,
+    DynamicTemplateDirective
 } from "@ng-dynamic-forms/core";
 import { MATERIAL_SAMPLE_FORM_MODEL } from "./material-sample-form.model";
 import { MATERIAL_SAMPLE_FORM_LAYOUT } from "./material-sample-form.layout";
@@ -12,7 +18,9 @@ import { MATERIAL_SAMPLE_FORM_LAYOUT } from "./material-sample-form.layout";
     selector: "dynamic-material-sample-form",
     styleUrls: ["../../../node_modules/@angular/material/prebuilt-themes/indigo-pink.css"],
     templateUrl: "./material-sample-form.component.html",
-    encapsulation: ViewEncapsulation.None
+    encapsulation: ViewEncapsulation.None,
+    standalone: true,
+    imports: [JsonPipe, MatNativeDateModule, MatCardModule, ReactiveFormsModule, DynamicMaterialFormComponent, DynamicTemplateDirective]
 })
 export class MaterialSampleFormComponent {
     formModel: DynamicFormControlModel[] = MATERIAL_SAMPLE_FORM_MODEL;

src/app/ui-material/material-sample-form.component.ts

@@ -9,12 +9,16 @@ import {
 import { NG_BOOTSTRAP_SAMPLE_FORM_MODEL } from "./ng-bootstrap-sample-form.model";
 import { NG_BOOTSTRAP_SAMPLE_FORM_LAYOUT } from "./ng-bootstrap-sample-form.layout";
 import { DynamicNGBootstrapFormComponent } from "@ng-dynamic-forms/ui-ng-bootstrap";
+import { JsonPipe } from "@angular/common";
+import { ReactiveFormsModule } from "@angular/forms";
 
 @Component({
     selector: "dynamic-ng-bootstrap-sample-form",
     styleUrls: [],
     templateUrl: "./ng-bootstrap-sample-form.component.html",
-    encapsulation: ViewEncapsulation.None
+    encapsulation: ViewEncapsulation.None,
+    standalone: true,
+    imports: [JsonPipe, ReactiveFormsModule, DynamicNGBootstrapFormComponent]
 })
 export class NGBootstrapSampleFormComponent {
     formModel: DynamicFormControlModel[] = NG_BOOTSTRAP_SAMPLE_FORM_MODEL;

src/app/ui-ng-bootstrap/ng-bootstrap-sample-form.component.ts

@@ -1,22 +1,27 @@
 import { Component, ViewEncapsulation } from "@angular/core";
-import { UntypedFormGroup, UntypedFormArray } from "@angular/forms";
+import { UntypedFormGroup, UntypedFormArray, ReactiveFormsModule } from "@angular/forms";
 import {
     DynamicFormArrayModel,
     DynamicFormControlModel,
     DynamicFormGroupModel,
     DynamicFormLayout,
     DynamicFormService,
     DynamicFormValueControlModel,
-    DynamicInputModel
+    DynamicInputModel,
+    DynamicTemplateDirective
 } from "@ng-dynamic-forms/core";
 import { NGX_BOOTSTRAP_SAMPLE_FORM_MODEL } from "./ngx-bootstrap-sample-form.model";
 import { NGX_BOOTSTRAP_SAMPLE_FORM_LAYOUT } from "./ngx-bootstrap-sample-form.layout";
 import { DynamicFormControlEvent } from "../../../projects/ng-dynamic-forms/core/src/lib/component/dynamic-form-control-event";
+import { JsonPipe } from "@angular/common";
+import { DynamicNGxBootstrapFormComponent } from "@ng-dynamic-forms/ui-ngx-bootstrap";
 
 @Component({
     selector: "dynamic-ngx-bootstrap-sample-form",
     templateUrl: "./ngx-bootstrap-sample-form.component.html",
-    encapsulation: ViewEncapsulation.None
+    encapsulation: ViewEncapsulation.None,
+    standalone: true,
+    imports: [JsonPipe, ReactiveFormsModule, DynamicNGxBootstrapFormComponent, DynamicTemplateDirective]
 })
 export class NgxBootstrapSampleFormComponent {
     formModel: DynamicFormControlModel[] = NGX_BOOTSTRAP_SAMPLE_FORM_MODEL;