# Adding Page

You can add new pages to a migrated application, you have to create a new page in the Frontend and the Backend.

### Frontend

For the Frontend, you can easily copy and paste an existing page or generate a [<mark style="color:red;">new component</mark> ](https://angular.io/cli/generate#component)and modify it with the elements you want to show.

Necessary elements for a page to work properly:

**NewPage.html**&#x20;

```html
<div *ngIf='model' class='myClass'>
    <ng-template #head let-model='model'>
    </ng-template>

    <ng-template #ContentPlaceHolder1 let-model='model'>
        <h1>
            <b>
                New Page Component
            </b>
        </h1>         
    </ng-template>
 </div>html
```

Make sure you have a **header** and a **content** section, you have to add a template variable for this (#head and #ContentPlaceHolder1).

**NewPage.ts**

```typescript
@Component({
  selector: 'app-new-page',
  templateUrl: './new-page.component.html',
  styleUrls: ['./new-page.component.css'],
  encapsulation : ViewEncapsulation.None
})
@dataTransfer(["frmPROJECTNAMENewPage"])
export class NewPageComponent extends PageComponent {

  @ViewChild('ContentPlaceHolder1')
  ContentPlaceHolder1 : TemplateRef <any>;

  @ViewChild('head')
  head : TemplateRef <any>;

  constructor (wmservice : WebMapService,changeDetector : ChangeDetectorRef,render2 : Renderer2,elem : ElementRef) {
     super(wmservice,changeDetector,render2,elem);
  }
}
```

Make sure the class has the `@dataTransfer` set with the correct id for the project. In this case, the name is **frmPROJECTNAME** (base project name) + **NewPage** (name of the new page).\
The new page component needs to extend from the base `PageComponent`\
You also need the references to the `head` and the `content`, using Angular's `ViewChild`.

**index.ts**

```typescript
import { Site1MasterComponent } from './site1-master/site1-master.component';
import { SummaryPageComponent } from './validation-summary-page/validation-summary-page.component';

import { NewPageComponent } from './new-page/new-page.component';

export { Site1MasterComponent };
export { SummaryPageComponent };

export { NewPageComponent };
```

**project.module.ts**

```typescript
import { NgModule, CUSTOM_ELEMENTS_SCHEMA  } from '@angular/core';
import { CommonModule } from '@angular/common';
import { BaseComponentsModule } from '@mobilize/base-components';
import { WebMapKendoModule } from '@mobilize/winforms-components';
import { WebMapService, WebMapModule } from '@mobilize/angularclient';
import { WebFormsModule } from '@mobilize/webforms-components';
import { AjaxModule } from '@mobilize/webforms-components';
import * as MyProject from './components/project';

@NgModule({
  imports: [
    CommonModule,
    BaseComponentsModule,
    WebMapKendoModule,
    WebMapModule,
    WebFormsModule,
    AjaxModule,
  ],
  exports: [
    MyProject.Site1MasterComponent,
    MyProject.SummaryPageComponent,
    MyProject.NewPageComponent,
  ],
  declarations: [
    MyProject.Site1MasterComponent,
    MyProject.SummaryPageComponent,
    MyProject.NewPageComponent,
  ],
  bootstrap: [
    MyProject.Site1MasterComponent,
    MyProject.SummaryPageComponent,
    MyProject.NewPageComponent,
  ],
   providers: [WebMapService],
   schemas: [ CUSTOM_ELEMENTS_SCHEMA ]
})
export class OtherValidatorsModule { }
```

Finally, you need to add the page in the project **index** and then in the **module**.

### Backend

In the Backend, you can also copy and paste an existing page and modify it with the necessary properties you need for the controls you added.

In the **Page.designer.cs** file you just have to set the correct MasterPageFile.

```csharp
namespace ProjectName
{
    public partial class NewPage
   {

      public NewPage()
      {
         this.InitializeComponent();
      }

      private void InitializeComponent()
      {
         this.MasterPageFile = "ProjectName.MasterPageSite1";
         this.Name = "NewPage";
         
         // properties initialization
      }
   }
}
```

#### Redirect

To go to the new page you can add a `wm-alink` component in the Frontend with the correct target name.

```html
<wm-alink [Target]="'ProjectName.NewPage'" [model]="model">
   New Page
</wm-alink>
```

Or you can also add a regular wm-link-button and handle the redirect in the Backend.

**PreviousPage.html**

```html
<wm-link-button id="linkbutton1" class="linkbutton" [model]="model.linkbutton1">
</wm-link-button>
```

**PreviousPage.designer.cs**

```csharp
private void InitializeComponent()
{
    this.linkbutton1.Click += new System.EventHandler(this.btnClick);
}
```

**PreviousPage.cs**

```csharp
protected void btnClick(object sender, EventArgs e)
{
    try
    {
        Response.Redirect("ProjectName.NewPage", true);
    }
    catch (Exception ex) { }
}
```