032.1 Navigation aware typescript components for the Third View (Material UI)

Notes

Rdl RV RL Components of the Master Views

Regenerate Interfaces for PhbkEnterpriseView

Regenerate Services for PhbkEnterpriseView

Regenerate Rdl Component for PhbkEnterpriseView

Regenerate Rdl Angular Routes for PhbkEnterpriseView

Test Rdl Component for PhbkEnterpriseView

Run PhBkWebApp for PhbkEnterpriseView
Run Angular App for PhbkEnterpriseView

10 Generating Rl component

10 Batch Action dialog

12 Test Rl Component

12 Run PhBkWebApp
12 Run Angular App

Regenerate RL RV Component for PhbkEnterpriseView

Regenerate Rl Angular Routes for PhbkEnterpriseView

Test Rl Component for PhbkEnterpriseView

Run PhBkWebApp for Rl of PhbkEnterpriseView
Run Angular App for Rl of PhbkEnterpriseView

Notes

PhbkDivisionView-View is our Third View.
The list of Navigation aware component includes
- dialog based component
  - Rdl-component. This component is routed Lform, where Add/Update/Delete/View Item implemented as a popup Dialogs.
- pure navigation based components
  - Rl-component. This component is a routed SForm. It uses Angular routing to navigate to Add/Update/Delete/View Item.
  - RA, RU, RD, RV` components.
    - these components support Angular routing.
    - these components use AForm, UForm, DForm, VForm-components to implement Add/Update/Delete/View Item functionality.
For dialog based components the development process consists of
- Generation code for Rdl-component.
- Generation code for Angular Routes to be inserted in const routes: Routes = [...] of the app-routing.module.ts-file
- Modifying <mat-nav-list>...<mat-nav-list> of the app.component.html-file, to make navigation available for the user
For pure navigation based components the development process consists of
- Generation code for RA, RU, RD, RV, Rdl` components.
- Generation code for Angular Routes to be inserted in const routes: Routes = [...] of the app-routing.module.ts-file
- Modifying <mat-nav-list>...<mat-nav-list> of the app.component.html-file, to make navigation available for the user

07 Generating Rdl component

To generate Rdl
- Run Visual Studio and Open PhonebookSolution solution
- Right Click src/app/components/phbk-division-view of the src-project (Angular project) and select JavaScripts Wizard menu item to open the Wizard dialog
repeat the steps as they described at 01 Generating interfaces until Batch Action dialog
- Note: you do not need to set up UI Form properties and UI List properties again.

07 Batch Action dialog

repeat the steps described in the article

08 Generating code for Rdl Angular Routes

To generate Rdl Angular Routes
- Run Visual Studio and Open PhonebookSolution solution
- Right Click src/app/ of the src-project (Angular project) and select JavaScripts Wizard menu item to open the Wizard dialog
  - Note: We should right click src/app/-folder, since we will insert the generated code in the app-routing.module.ts-file. The last one is in the src/app/-folder.

Click to show the picture

project structure

repeat the steps as they described at 01 Generating interfaces until Batch Action dialog
- Note: you do not need to set up UI Form properties and UI List properties again.

08 Fourth page of the Wizard

repeat the steps described in the article

08 Fifth page of the Wizard

repeat the steps described in the article

08 Sixth page of the Wizard

repeat the steps described in the article

08 Modify AppRouting module file

open app-routing.module.ts- file
modify const routes: Routes = [...]-array as follows (insert generated code from the clipboard):

const routes: Routes = [
///////// begin RDLPhbkDivisionView 
  { path: 'RDLPhbkDivisionView', 
  loadChildren: () => import('./components/phbk-division-view/phbk-division-view-rdl-lazy.routing.module').then(m => m.PhbkDivisionViewRdlLazyRoutingModule),
  data: { vn: 'PhbkDivisionView', va: 'l', ms: true, np: 'RDL', fh: 2, mh: 10, sf: true, /* title: 'Divisions', */  dp: 1, uid: '07a9a5bd782340b297a95c0724df3ceb' }  },
///////// end RDLPhbkDivisionView 

  ...
  { path: 'authentication', loadChildren: () => import('./shared/modules/app-glbl-security.module').then(m => m.AppGlblSecurityModule) },  

  { path: 'home', component: AppGlblHomeComponent }, 
  { path: '',   redirectTo: '/home', pathMatch: 'full' }, 
//  { path: '**', component: AppGlblHomeComponent },
  { path: '**', component: AppGlblPagenotfoundComponent },

];

08 Modify AppComponentHtml file

open app.component.html- file
- inside <mat-nav-list>...</mat-nav-list> insert recommended line

      <mat-nav-list>
        <a mat-list-item [routerLink]="['/home']" routerLinkActive="active"> <mat-icon>home</mat-icon> </a> 

<!--
        <a mat-list-item [routerLink]="['/admin1feature']" routerLinkActive="active">Admin1</a> 
-->
        <a mat-list-item [routerLink]="['RDLPhbkPhoneTypeView']" routerLinkActive="active">List of Phone Types (Dlg)</a>
        <a mat-list-item [routerLink]="['PhbkPhoneTypeView']" routerLinkActive="active">List of Phone Types</a>
        <a mat-list-item [routerLink]="['/simpledictionary']" routerLinkActive="active">Title for SimpleDictionary </a> 

        <a mat-list-item [routerLink]="['RDLPhbkEnterpriseView']" routerLinkActive="active">List of Enterprises (Dlg)</a>
        <a mat-list-item [routerLink]="['PhbkEnterpriseView']" routerLinkActive="active">List of Enterprises</a>

        <a mat-list-item [routerLink]="['RDLPhbkDivisionView']" routerLinkActive="active">List of Divisions (Dlg)</a>
      </mat-nav-list>

09 Test Rdl Component

09 Modify DbContext

open the PhbkDbContext.cs-file of the PhBkContext.csproj-project and modify OnModelCreating-method as follows

        protected override void OnModelCreating(ModelBuilder modelBuilder)
        {
            modelBuilder.Entity<PhbkDivision>().HasKey(p => p.DivisionId);
            modelBuilder.Entity<PhbkEnterprise>().HasAlternateKey(p => p.EntrprsName).HasName("EntrprsNameUK");
            modelBuilder.Entity<PhbkEnterprise>().HasKey(p => p.EntrprsId);
            modelBuilder.Entity<PhbkPhoneType>().HasKey(p => p.PhoneTypeId);
            modelBuilder.Entity<PhbkDivision>().HasOne(d => d.Enterprise)
                .WithMany(m => m.Divisions)
                .HasForeignKey(d => d.EntrprsIdRef)
                .HasPrincipalKey(p => p.EntrprsId)
                .IsRequired(true)
                .OnDelete(DeleteBehavior.NoAction);

            modelBuilder.Entity<PhbkPhoneType>().HasData(new { PhoneTypeId = 1, PhoneTypeName = "Office phone", PhoneTypeDesc = "Office phone (one or more than one)" });
            modelBuilder.Entity<PhbkPhoneType>().HasData(new { PhoneTypeId = 2, PhoneTypeName = "Home phone", PhoneTypeDesc = "Home phone (one or more than one)" });
            modelBuilder.Entity<PhbkPhoneType>().HasData(new { PhoneTypeId = 3, PhoneTypeName = "Office mobile", PhoneTypeDesc = "Office mobile phone (one or more than one)" });
            modelBuilder.Entity<PhbkPhoneType>().HasData(new { PhoneTypeId = 4, PhoneTypeName = "Personal mobile", PhoneTypeDesc = "Personal mobile phone (one or more than one)" });

            modelBuilder.Entity<PhbkEnterprise>().HasData(new { EntrprsId = 1, EntrprsName = "Enterprise 1", EntrprsDesc = "Short description for Enterprise 1" });
            modelBuilder.Entity<PhbkEnterprise>().HasData(new { EntrprsId = 2, EntrprsName = "Enterprise 2", EntrprsDesc = "Short description for Enterprise 2" });
            modelBuilder.Entity<PhbkEnterprise>().HasData(new { EntrprsId = 3, EntrprsName = "Enterprise 3", EntrprsDesc = "Short description for Enterprise 3" });
            modelBuilder.Entity<PhbkEnterprise>().HasData(new { EntrprsId = 4, EntrprsName = "Enterprise 4", EntrprsDesc = "Short description for Enterprise 4" });


            modelBuilder.Entity<PhbkDivision>().HasData(new { DivisionId = 11, EntrprsIdRef = 1, DivisionName = "Division 11", DivisionDesc = "Short description for Division 11" });
            modelBuilder.Entity<PhbkDivision>().HasData(new { DivisionId = 12, EntrprsIdRef = 1, DivisionName = "Division 12", DivisionDesc = "Short description for Division 12" });
            modelBuilder.Entity<PhbkDivision>().HasData(new { DivisionId = 13, EntrprsIdRef = 1, DivisionName = "Division 13", DivisionDesc = "Short description for Division 13" });
            modelBuilder.Entity<PhbkDivision>().HasData(new { DivisionId = 14, EntrprsIdRef = 1, DivisionName = "Division 14", DivisionDesc = "Short description for Division 14" });

            modelBuilder.Entity<PhbkDivision>().HasData(new { DivisionId = 21, EntrprsIdRef = 2, DivisionName = "Division 21", DivisionDesc = "Short description for Division 21" });
            modelBuilder.Entity<PhbkDivision>().HasData(new { DivisionId = 22, EntrprsIdRef = 2, DivisionName = "Division 22", DivisionDesc = "Short description for Division 22" });
            modelBuilder.Entity<PhbkDivision>().HasData(new { DivisionId = 23, EntrprsIdRef = 2, DivisionName = "Division 23", DivisionDesc = "Short description for Division 23" });
            modelBuilder.Entity<PhbkDivision>().HasData(new { DivisionId = 24, EntrprsIdRef = 2, DivisionName = "Division 24", DivisionDesc = "Short description for Division 24" });

            modelBuilder.Entity<PhbkDivision>().HasData(new { DivisionId = 31, EntrprsIdRef = 3, DivisionName = "Division 31", DivisionDesc = "Short description for Division 31" });
            modelBuilder.Entity<PhbkDivision>().HasData(new { DivisionId = 32, EntrprsIdRef = 3, DivisionName = "Division 32", DivisionDesc = "Short description for Division 32" });
            modelBuilder.Entity<PhbkDivision>().HasData(new { DivisionId = 33, EntrprsIdRef = 3, DivisionName = "Division 33", DivisionDesc = "Short description for Division 33" });
            modelBuilder.Entity<PhbkDivision>().HasData(new { DivisionId = 34, EntrprsIdRef = 3, DivisionName = "Division 34", DivisionDesc = "Short description for Division 34" });

            modelBuilder.Entity<PhbkDivision>().HasData(new { DivisionId = 41, EntrprsIdRef = 4, DivisionName = "Division 41", DivisionDesc = "Short description for Division 41" });
            modelBuilder.Entity<PhbkDivision>().HasData(new { DivisionId = 42, EntrprsIdRef = 4, DivisionName = "Division 42", DivisionDesc = "Short description for Division 42" });
            modelBuilder.Entity<PhbkDivision>().HasData(new { DivisionId = 43, EntrprsIdRef = 4, DivisionName = "Division 43", DivisionDesc = "Short description for Division 43" });
            modelBuilder.Entity<PhbkDivision>().HasData(new { DivisionId = 44, EntrprsIdRef = 4, DivisionName = "Division 44", DivisionDesc = "Short description for Division 44" });
        }

09 Run PhBkWebApp

Delete copy of old database on SqlServer
With Visual Studio 2022 launch PhBkWebApp-app

09 Run Angular App

save changes of the app-routing.module.ts- file
save changes of the app.component.html-file
with Visual Studio Code open the terminal and run the command

ng serve -o

Here is a result

Click to show the picture

project structure

Note: Returning to 06 The possible error you must be aware. The Error is gone!!!

Rdl RV RL Components of the Master Views

Rdl, RV, RL components implement one-to-many functionality. In one-to-many-mode an additional Rdl(or RL) panel for the detail View will be shown on the page of the master View. Selection of the row in the master panel sends event to the Detail panel and Detail panel applies filter and shows only the rows which correspond to the selected master row.
Rdl, RV, RL components implement navigation from the selected master row to the page of the detail View with a defined filter which corresponds to the master row.
To make this functionality to be available we need to regenerate
- Interfaces for the master View
- Services for the master View
- Rdl, RV, RL components for the master View
- Angular Routes to be inserted in const routes: Routes = [...] of the app-routing.module.ts-file for the master View

Regenerate Interfaces for PhbkEnterpriseView

follow the steps described in the article

Regenerate Services for PhbkEnterpriseView

follow the steps described in the article

Regenerate Rdl Component for PhbkEnterpriseView

follow the steps described in the article

Regenerate Rdl Angular Routes for PhbkEnterpriseView

follow the steps described in the article
we need to replace old paths

Click to show the code

...
///////// begin RDLPhbkEnterpriseView
  { path: 'RDLPhbkEnterpriseView', 
  loadChildren: () => import('./components/phbk-enterprise-view/phbk-enterprise-view-rdl-lazy.routing.module').then(m => m.PhbkEnterpriseViewRdlLazyRoutingModule),
  data: { vn: 'PhbkEnterpriseView', va: 'l', ms: true, np: 'RDL', fh: 2, mh: 10, sf: true, /* title: 'Enterprises', */  dp: 1, uid: 'fcc588b4652048b6ae553d1adb6edaae' }  },
///////// end RDLPhbkEnterpriseView
...

with a new paths

Click to show the code

...
///////// begin RDLPhbkEnterpriseView
    { path: 'RDLPhbkEnterpriseView/RDLPhbkDivisionView/:hf2', 
        loadChildren: () => import('./components/phbk-division-view/phbk-division-view-rdl-lazy.routing.module').then(m => m.PhbkDivisionViewRdlLazyRoutingModule),
        data: { vn: 'PhbkDivisionView', va: 'l', ms: true, np: 'RDL', fh: 2, mh: 10, sf: true, /* title: 'Divisions', */ hf: 'hf2',  dp: 2, uid: 'b2b0707159ca456ea5a981ac157b8cf5' }  },

    { path: 'RDLPhbkEnterpriseView', 
        loadChildren: () => import('./components/phbk-enterprise-view/phbk-enterprise-view-rdl-lazy.routing.module').then(m => m.PhbkEnterpriseViewRdlLazyRoutingModule),
        data: { vn: 'PhbkEnterpriseView', va: 'l', ms: true, np: 'RDL', fh: 2, mh: 10, sf: true, /* title: 'Enterprises', */  dp: 1, uid: 'ac1837ed69e1417692a22a635b40993a' }  },
///////// end RDLPhbkEnterpriseView
...

Test Rdl Component for PhbkEnterpriseView

Run PhBkWebApp for PhbkEnterpriseView

Delete copy of old database on SqlServer
With Visual Studio 2022 launch PhBkWebApp-app

Run Angular App for PhbkEnterpriseView

save changes of the app-routing.module.ts- file
save changes of the app.component.html-file
with Visual Studio Code open the terminal and run the command

ng serve -o

Here is a result

Click to show the picture

project structure

check navigation

Click to show the picture

project structure

Now we on the detail page

Click to show the picture

project structure

On detail page we start adding detail row

Click to show the picture

project structure

On Add Item-form master controls already populated with data and they are in read only mode

Click to show the picture

project structure

10 Generating Rl component

To generate Rdl
- Run Visual Studio and Open PhonebookSolution solution
- Right Click src/app/components/phbk-division-view of the src-project (Angular project) and select JavaScripts Wizard menu item to open the Wizard dialog
repeat the steps as they described at 01 Generating interfaces until Batch Action dialog
- Note: you do not need to set up UI Form properties and UI List properties again.

10 Batch Action dialog

On the Batch Action-dialog of the Wizard
- select 01960-Rv.json
- click start-button
- select 01962-Ra.json
- click start-button
- select 01964-Ru.json
- click start-button
- select 01966-Rd.json
- click start-button
- select 01968-Rl.json
- click start-button

Click to show the picture

project structure

11 Generating code for Rl Angular Routes

To generate Rl Angular Routes
- Run Visual Studio and Open PhonebookSolution solution
- Right Click src/app/ of the src-project (Angular project) and select JavaScripts Wizard menu item to open the Wizard dialog
  - Note: We should right click src/app/-folder, since we will insert the generated code in the app-routing.module.ts-file. The last one is in the src/app/-folder.

Click to show the picture

project structure

repeat the steps as they described at 01 Generating interfaces until Batch Action dialog
- Note: you do not need to set up UI Form properties and UI List properties again.

11 Fourth page of the Wizard

On the Fourth page of the Wizard
- select 01980-R-lazy.routes.ts
- click Next-button

Click to show the picture

project structure

11 Fifth page of the Wizard

On the Fourth page of the Wizard
- select r-lazy.routes.ts.t4
- click Next-button

Click to show the picture

project structure

11 Sixth page of the Wizard

Note 1: Do not save the generated file.
- Instead copy the content into the clipboard
Note 2: The generated code contains instructions of how to modify app.component.html and app-routing.module.ts files.

Click to show the picture

project structure

11 Modify AppRouting module file

open app-routing.module.ts- file
modify const routes: Routes = [...]-array as follows (insert generated code from the clipboard):

const routes: Routes = [
...
///////// begin PhbkDivisionView
  { path: 'PhbkDivisionView/ViewPhbkDivisionView/:hf2/:id2', 
  loadChildren: () => import('./components/phbk-division-view/phbk-division-view-rv-lazy.routing.module').then(m => m.PhbkDivisionViewRvLazyRoutingModule),
  data: { vn: 'PhbkDivisionView', va: 'v', /* sf: true,  title: 'View Division', */ hf: 'hf2',  id: 'id2', dp: 2}},

{ path: 'PhbkDivisionView/AddPhbkDivisionView/:hf2', 
  loadChildren: () => import('./components/phbk-division-view/phbk-division-view-ra-lazy.routing.module').then(m => m.PhbkDivisionViewRaLazyRoutingModule),
  data: { vn: 'PhbkDivisionView', va: 'a', /* sf: true,  title: 'Add Division', */ hf: 'hf2',  dp: 2}},

{ path: 'PhbkDivisionView/UpdPhbkDivisionView/:hf2/:id2', 
  loadChildren: () => import('./components/phbk-division-view/phbk-division-view-ru-lazy.routing.module').then(m => m.PhbkDivisionViewRuLazyRoutingModule),
  data: { vn: 'PhbkDivisionView', va: 'u', /* sf: true,  title: 'Update Division', */ hf: 'hf2',  id: 'id2',  dp: 2}},

{ path: 'PhbkDivisionView/DelPhbkDivisionView/:hf2/:id2', 
  loadChildren: () => import('./components/phbk-division-view/phbk-division-view-rd-lazy.routing.module').then(m => m.PhbkDivisionViewRdLazyRoutingModule),
  data: { vn: 'PhbkDivisionView', va: 'd', /* sf: true,  title: 'Delete Division', */ hf: 'hf2',  id: 'id2',  dp: 2}},

{ path: 'PhbkDivisionView', 
  loadChildren: () => import('./components/phbk-division-view/phbk-division-view-rl-lazy.routing.module').then(m => m.PhbkDivisionViewRlLazyRoutingModule),
  data: { vn: 'PhbkDivisionView', va: 'l', ms: true,  fh: 2, mh: 10, sf: true, /* title: 'Divisions', */  dp: 1, uid: '6df2f30a55c94dbaaedc893040b4dec6' }  },
///////// end PhbkDivisionView 
...
]

11 Modify AppComponentHtml file

open app.component.html- file
- inside <mat-nav-list>...</mat-nav-list> insert recommended line

      <mat-nav-list>
        <a mat-list-item [routerLink]="['/home']" routerLinkActive="active"> <mat-icon>home</mat-icon> </a> 

<!--
        <a mat-list-item [routerLink]="['/admin1feature']" routerLinkActive="active">Admin1</a> 
-->
        <a mat-list-item [routerLink]="['RDLPhbkPhoneTypeView']" routerLinkActive="active">List of Phone Types (Dlg)</a>
        <a mat-list-item [routerLink]="['PhbkPhoneTypeView']" routerLinkActive="active">List of Phone Types</a>
        <a mat-list-item [routerLink]="['/simpledictionary']" routerLinkActive="active">Title for SimpleDictionary </a> 

        <a mat-list-item [routerLink]="['RDLPhbkEnterpriseView']" routerLinkActive="active">List of Enterprises (Dlg)</a>
        <a mat-list-item [routerLink]="['PhbkEnterpriseView']" routerLinkActive="active">List of Enterprises</a>

        <a mat-list-item [routerLink]="['RDLPhbkDivisionView']" routerLinkActive="active">List of Divisions (Dlg)</a>
        <a mat-list-item [routerLink]="['PhbkDivisionView']" routerLinkActive="active">List of Divisions</a>
      </mat-nav-list>

12 Test Rl Component

12 Run PhBkWebApp

With Visual Studio 2022 launch PhBkWebApp-app

12 Run Angular App

save changes of the app-routing.module.ts- file
save changes of the app.component.html-file
with Visual Studio Code open the terminal and run the command

ng serve -o

Here is a result. We are going to navigate to Add Item-page

Click to show the picture

project structure

On Add Item-page controls of the master View are empty and in the write mode

Click to show the picture

project structure

Regenerate Rl RV Component for PhbkEnterpriseView

follow the steps described in the article

Regenerate Rl Angular Routes for PhbkEnterpriseView

follow the steps described in the article
follow the steps described in the article
we need to replace old paths

Click to show the code

///////// begin PhbkEnterpriseView  
  { path: 'PhbkEnterpriseView/ViewPhbkEnterpriseView/:hf2/:id2', 
  loadChildren: () => import('./components/phbk-enterprise-view/phbk-enterprise-view-rv-lazy.routing.module').then(m => m.PhbkEnterpriseViewRvLazyRoutingModule),
  data: { vn: 'PhbkEnterpriseView', va: 'v', /* sf: true,  title: 'View Enterprise', */ hf: 'hf2',  id: 'id2', dp: 2}},

{ path: 'PhbkEnterpriseView/AddPhbkEnterpriseView/:hf2', 
  loadChildren: () => import('./components/phbk-enterprise-view/phbk-enterprise-view-ra-lazy.routing.module').then(m => m.PhbkEnterpriseViewRaLazyRoutingModule),
  data: { vn: 'PhbkEnterpriseView', va: 'a', /* sf: true,  title: 'Add Enterprise', */ hf: 'hf2',  dp: 2}},

{ path: 'PhbkEnterpriseView/UpdPhbkEnterpriseView/:hf2/:id2', 
  loadChildren: () => import('./components/phbk-enterprise-view/phbk-enterprise-view-ru-lazy.routing.module').then(m => m.PhbkEnterpriseViewRuLazyRoutingModule),
  data: { vn: 'PhbkEnterpriseView', va: 'u', /* sf: true,  title: 'Update Enterprise', */ hf: 'hf2',  id: 'id2',  dp: 2}},

{ path: 'PhbkEnterpriseView/DelPhbkEnterpriseView/:hf2/:id2', 
  loadChildren: () => import('./components/phbk-enterprise-view/phbk-enterprise-view-rd-lazy.routing.module').then(m => m.PhbkEnterpriseViewRdLazyRoutingModule),
  data: { vn: 'PhbkEnterpriseView', va: 'd', /* sf: true,  title: 'Delete Enterprise', */ hf: 'hf2',  id: 'id2',  dp: 2}},

{ path: 'PhbkEnterpriseView', 
  loadChildren: () => import('./components/phbk-enterprise-view/phbk-enterprise-view-rl-lazy.routing.module').then(m => m.PhbkEnterpriseViewRlLazyRoutingModule),
  data: { vn: 'PhbkEnterpriseView', va: 'l', ms: true,  fh: 2, mh: 10, sf: true, /* title: 'Enterprises', */  dp: 1, uid: '00f49a2e5d0945f6bb083b33a22dc6bd' }  },
///////// end PhbkEnterpriseView

...

with a new paths

Click to show the code

...
///////// begin PhbkEnterpriseView  
{ path: 'PhbkEnterpriseView/PhbkDivisionView/:hf2/ViewPhbkDivisionView/:hf3/:id3', 
loadChildren: () => import('./components/phbk-division-view/phbk-division-view-rv-lazy.routing.module').then(m => m.PhbkDivisionViewRvLazyRoutingModule),
data: { vn: 'PhbkDivisionView', va: 'v', /* sf: true,  title: 'View Division', */ hf: 'hf3',  id: 'id3', dp: 3}},

{ path: 'PhbkEnterpriseView/PhbkDivisionView/:hf2/AddPhbkDivisionView/:hf3', 
loadChildren: () => import('./components/phbk-division-view/phbk-division-view-ra-lazy.routing.module').then(m => m.PhbkDivisionViewRaLazyRoutingModule),
data: { vn: 'PhbkDivisionView', va: 'a', /* sf: true,  title: 'Add Division', */ hf: 'hf3',  dp: 3}},

{ path: 'PhbkEnterpriseView/PhbkDivisionView/:hf2/UpdPhbkDivisionView/:hf3/:id3', 
loadChildren: () => import('./components/phbk-division-view/phbk-division-view-ru-lazy.routing.module').then(m => m.PhbkDivisionViewRuLazyRoutingModule),
data: { vn: 'PhbkDivisionView', va: 'u', /* sf: true,  title: 'Update Division', */ hf: 'hf3',  id: 'id3',  dp: 3}},

{ path: 'PhbkEnterpriseView/PhbkDivisionView/:hf2/DelPhbkDivisionView/:hf3/:id3', 
loadChildren: () => import('./components/phbk-division-view/phbk-division-view-rd-lazy.routing.module').then(m => m.PhbkDivisionViewRdLazyRoutingModule),
data: { vn: 'PhbkDivisionView', va: 'd', /* sf: true,  title: 'Delete Division', */ hf: 'hf3',  id: 'id3',  dp: 3}},

{ path: 'PhbkEnterpriseView/PhbkDivisionView/:hf2', 
loadChildren: () => import('./components/phbk-division-view/phbk-division-view-rl-lazy.routing.module').then(m => m.PhbkDivisionViewRlLazyRoutingModule),
data: { vn: 'PhbkDivisionView', va: 'l', ms: true,  fh: 2, mh: 10, sf: true, /*  title: 'Divisions', */ hf: 'hf2',  dp: 2, uid: '1b380eb939294c62a575d45cf68469bd' }  },


{ path: 'PhbkEnterpriseView/ViewPhbkEnterpriseView/:hf2/:id2', 
loadChildren: () => import('./components/phbk-enterprise-view/phbk-enterprise-view-rv-lazy.routing.module').then(m => m.PhbkEnterpriseViewRvLazyRoutingModule),
data: { vn: 'PhbkEnterpriseView', va: 'v', /* sf: true,  title: 'View Enterprise', */ hf: 'hf2',  id: 'id2', dp: 2}},

{ path: 'PhbkEnterpriseView/AddPhbkEnterpriseView/:hf2', 
loadChildren: () => import('./components/phbk-enterprise-view/phbk-enterprise-view-ra-lazy.routing.module').then(m => m.PhbkEnterpriseViewRaLazyRoutingModule),
data: { vn: 'PhbkEnterpriseView', va: 'a', /* sf: true,  title: 'Add Enterprise', */ hf: 'hf2',  dp: 2}},

{ path: 'PhbkEnterpriseView/UpdPhbkEnterpriseView/:hf2/:id2', 
loadChildren: () => import('./components/phbk-enterprise-view/phbk-enterprise-view-ru-lazy.routing.module').then(m => m.PhbkEnterpriseViewRuLazyRoutingModule),
data: { vn: 'PhbkEnterpriseView', va: 'u', /* sf: true,  title: 'Update Enterprise', */ hf: 'hf2',  id: 'id2',  dp: 2}},

{ path: 'PhbkEnterpriseView/DelPhbkEnterpriseView/:hf2/:id2', 
loadChildren: () => import('./components/phbk-enterprise-view/phbk-enterprise-view-rd-lazy.routing.module').then(m => m.PhbkEnterpriseViewRdLazyRoutingModule),
data: { vn: 'PhbkEnterpriseView', va: 'd', /* sf: true,  title: 'Delete Enterprise', */ hf: 'hf2',  id: 'id2',  dp: 2}},

{ path: 'PhbkEnterpriseView', 
loadChildren: () => import('./components/phbk-enterprise-view/phbk-enterprise-view-rl-lazy.routing.module').then(m => m.PhbkEnterpriseViewRlLazyRoutingModule),
data: { vn: 'PhbkEnterpriseView', va: 'l', ms: true,  fh: 2, mh: 10, sf: true, /* title: 'Enterprises', */  dp: 1, uid: '67db59389b314054a243b9a40eddc997' }  },
///////// end PhbkEnterpriseView

...

Run PhBkWebApp for Rl of PhbkEnterpriseView

Delete copy of old database on SqlServer
With Visual Studio 2022 launch PhBkWebApp-app

Run Angular App for Rl of PhbkEnterpriseView

save changes of the app-routing.module.ts- file
save changes of the app.component.html-file
with Visual Studio Code open the terminal and run the command

ng serve -o

Here is a result. We are going to navigate to Add Item-page in detail panel

Click to show the picture

project structure

controls of the master View populated with data and are in ReadOnly-mode

Click to show the picture

project structure

032.1 Navigation aware typescript components for the Third View (Material UI) - chempkovsky/CS82ANGULAR GitHub Wiki

Notes

07 Generating Rdl component

07 Batch Action dialog

08 Generating code for Rdl Angular Routes

08 Fourth page of the Wizard

08 Fifth page of the Wizard

08 Sixth page of the Wizard

08 Modify AppRouting module file

08 Modify AppComponentHtml file

09 Test Rdl Component

09 Modify DbContext

09 Run PhBkWebApp

09 Run Angular App

Rdl RV RL Components of the Master Views

Regenerate Interfaces for PhbkEnterpriseView

Regenerate Services for PhbkEnterpriseView

Regenerate Rdl Component for PhbkEnterpriseView

Regenerate Rdl Angular Routes for PhbkEnterpriseView

Test Rdl Component for PhbkEnterpriseView

Run PhBkWebApp for PhbkEnterpriseView

Run Angular App for PhbkEnterpriseView

10 Generating Rl component

10 Batch Action dialog

11 Generating code for Rl Angular Routes

11 Fourth page of the Wizard

11 Fifth page of the Wizard

11 Sixth page of the Wizard

11 Modify AppRouting module file

11 Modify AppComponentHtml file

12 Test Rl Component

12 Run PhBkWebApp

12 Run Angular App

Regenerate Rl RV Component for PhbkEnterpriseView

Regenerate Rl Angular Routes for PhbkEnterpriseView

Run PhBkWebApp for Rl of PhbkEnterpriseView

Run PhBkWebApp for Rl of PhbkEnterpriseView

Run Angular App for Rl of PhbkEnterpriseView

⚠️ **GitHub.com Fallback** ⚠️

⚠️ GitHub.com Fallback ⚠️