After doing that, copy the form element from create-tenant-modal.component.html into div with "m-portlet__body" class. Now, there are still modal related html code in our file, so we need to remove them.

First, remove the html item with modal-header class since we don't need it anymore.

Now, move all content of the div with class modal-body into the form tag. After that, we can remove the div with class modal-body.

Finally, change the class of the div which contains Save and Cancel buttons from modal-footer to m--margin-top-40.

Create tenant page ts

Create a new file next to html file we have just created using the name create-tenant.component.ts. Copy the content of create-tenant-modal.component.ts to newly created file. Change the component name from CreateTenantModalComponent to CreateTenantComponent.

Modal page uses two methods named show and onShown which are not available in regular pages. So, we will implement OnInit and AfterViewInit in our Angular component and move the code of show method into ngOnInit and move the code of onShown into ngAfterViewInit. After doing that, we can delete empty show and onShown methods.

Import OnInit and AfterViewInit and move lines from show to ngOnInit and move lines from onShown to ngAfterViewInit.

Then, change the value of templateUrl from ./create-tenant-modal.component.html to ./create-tenant.component.html. You can also delete selector property of component definition since it is not mandatory.

Since we are using animation when routing to create tenant page, import appModuleAnimation into the component and use it as the value for animations of the component definition.

Also delete modal and modalSave properties since we don't need them anymore. Also, delete their usages in the component.

When the tenant is created, instead of closing the modal, we need to redirect user to tenant list. In order to do that, inject Router into our component and add below line into the close method of the component.

this._router.navigate(['app/admin/tenants']);

After all, you can delete create-tenant-modal.component.ts from your project.

After doing that, copy the form element from edit-tenant-modal.component.html into div with "m-portlet__body" class. Now, there are still modal related html code in our file, so we need to remove them.

First, remove the html item with modal-header class since we don't need it anymore.

Now, move all content of the div with class modal-body into the form tag. After that, we can remove the div with class modal-body.

Finally, change the class of the div which contains Save and Cancel buttons from modal-footer to m--margin-top-40.

Edit tenant page ts

Create a new file next to html file we have just created using the name edit-tenant.component.ts. Copy the content of edit-tenant-modal.component.ts to newly created file. Change the component name from EditTenantModalComponent to EditTenantComponent.

Modal page uses two methods named show and onShown which are not available in regular pages. So, we will implement OnInit and AfterViewInit in our Angular component and move the code of show method into ngOnInit and move the code of onShown into ngAfterViewInit. After doing that, we can delete empty show and onShown methods.

Import OnInit and AfterViewInit and move lines from show to ngOnInit and move lines from onShown to ngAfterViewInit.

Then, change the value of templateUrl from ./edit-tenant-modal.component.html to ./edit-tenant.component.html. You can also delete selector property of component definition since it is not mandatory.

Since we are using animation when routing to create tenant page, import appModuleAnimation into the component and use it as the value for animations of the component definition.

EditTenantModalComponent was getting tenantId as a parameter of it's show method. We will be getting tenantId parameter from query string. In order to do this, first inject ActivatedRoute into EditTenantComponent like below;

Also delete tenantId parameter from ngOnInit method since we are now getting it from query parameters.

Also delete modal and modalSave properties since we don't need them anymore. Also, delete their usages in the component.

When the tenant is edited, instead of closing the modal, we need to redirect user to tenant list. In order to do that, inject Router into our component and add below line into the close method of the component.

this._router.navigate(['app/admin/tenants']);

After all, you can delete edit-tenant-modal.component.ts from your project.

and use EditTenantComponent instead of EditTenantModalComponent in the imports list of AdminModule.

Navigate to the tenant edit page

Router was already injected into TenantsComponent when converting create modal to a page. We can use it to navigate to tenant edit page. In order to do that, create a new method named editTenant in tenants.component.ts like below;