032.1 Navigation aware typescript components for the Third View (Material UI) - chempkovsky/CS82ANGULAR GitHub Wiki
- 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
- 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
-
PhbkDivisionView
-View is our Third View. -
The list of Navigation aware component includes
- dialog based component
-
Rdl
-component. This component is routedLform
, whereAdd/Update/Delete/View Item
implemented as a popup Dialogs.
-
- pure navigation based components
-
Rl
-component. This component is a routedSForm
. It uses Angular routing to navigate toAdd/Update/Delete/View Item
. -
RA
,RU
,RD
, RV` components.- these components support Angular routing.
- these components use
AForm, UForm, DForm, VForm
-components to implementAdd/Update/Delete/View Item
functionality.
-
- dialog based component
-
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 theapp-routing.module.ts
-file - Modifying
<mat-nav-list>...<mat-nav-list>
of theapp.component.html
-file, to make navigation available for the user
- Generation code for
-
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 theapp-routing.module.ts
-file - Modifying
<mat-nav-list>...<mat-nav-list>
of theapp.component.html
-file, to make navigation available for the user
- Generation code for
-
To generate Rdl
- Run Visual Studio and Open
PhonebookSolution
solution - Right Click
src/app/components/phbk-division-view
of thesrc
-project (Angular project) and selectJavaScripts Wizard
menu item to open the Wizard dialog
- Run Visual Studio and Open
-
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
andUI List properties
again.
-
Note: you do not need to set up
- repeat the steps described in the article
- To generate Rdl Angular Routes
- Run Visual Studio and Open
PhonebookSolution
solution - Right Click
src/app/
of thesrc
-project (Angular project) and selectJavaScripts Wizard
menu item to open the Wizard dialog-
Note: We should right click
src/app/
-folder, since we will insert the generated code in theapp-routing.module.ts
-file. The last one is in thesrc/app/
-folder.
-
Note: We should right click
- Run Visual Studio and Open
Click to show the picture
- 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
andUI List properties
again.
-
Note: you do not need to set up
- repeat the steps described in the article
- repeat the steps described in the article
- repeat the steps described in the article
- 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 },
];
- open
app.component.html
- file- inside
<mat-nav-list>...</mat-nav-list>
insert recommended line
- inside
<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>
- open the
PhbkDbContext.cs
-file of thePhBkContext.csproj
-project and modifyOnModelCreating
-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" });
}
- Delete copy of old database on SqlServer
- With Visual Studio 2022 launch
PhBkWebApp
-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
- Note: Returning to 06 The possible error you must be aware. The Error is gone!!!
-
Rdl
,RV
,RL
components implementone-to-many
functionality. Inone-to-many
-mode an additionalRdl
(orRL
) 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 theapp-routing.module.ts
-file for the master View
- follow the steps described in the article
- follow the steps described in the article
- 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 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
...
- Delete copy of old database on SqlServer
- With Visual Studio 2022 launch
PhBkWebApp
-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
- check navigation
Click to show the picture
- Now we on the detail page
Click to show the picture
- On detail page we start adding detail row
Click to show the picture
- On
Add Item
-form master controls already populated with data and they are in read only mode
Click to show the picture
-
To generate Rdl
- Run Visual Studio and Open
PhonebookSolution
solution - Right Click
src/app/components/phbk-division-view
of thesrc
-project (Angular project) and selectJavaScripts Wizard
menu item to open the Wizard dialog
- Run Visual Studio and Open
-
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
andUI List properties
again.
-
Note: you do not need to set up
- 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
- To generate Rl Angular Routes
- Run Visual Studio and Open
PhonebookSolution
solution - Right Click
src/app/
of thesrc
-project (Angular project) and selectJavaScripts Wizard
menu item to open the Wizard dialog-
Note: We should right click
src/app/
-folder, since we will insert the generated code in theapp-routing.module.ts
-file. The last one is in thesrc/app/
-folder.
-
Note: We should right click
- Run Visual Studio and Open
Click to show the picture
- 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
andUI List properties
again.
-
Note: you do not need to set up
- On the Fourth page of the Wizard
- select
01980-R-lazy.routes.ts
- click
Next
-button
- select
Click to show the picture
- On the Fourth page of the Wizard
- select
r-lazy.routes.ts.t4
- click
Next
-button
- select
Click to show the picture
-
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
andapp-routing.module.ts
files.
Click to show the picture
- 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
...
]
- open
app.component.html
- file- inside
<mat-nav-list>...</mat-nav-list>
insert recommended line
- inside
<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>
- With Visual Studio 2022 launch
PhBkWebApp
-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
- On
Add Item
-page controls of the master View are empty and in thewrite
mode
Click to show the picture
- follow the steps described in the article
-
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
...
- Delete copy of old database on SqlServer
- With Visual Studio 2022 launch
PhBkWebApp
-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 in detail panel
Click to show the picture
- controls of the master View populated with data and are in
ReadOnly
-mode