---
title: Flexible Working Hours Request Form
product: PDF Generator
description: Get a printable flexible working hours request form in PDF. Create editable or prefilled employee schedule request forms with SurveyJS PDF Generator.
framework: Angular
source: https://surveyjs.io/pdf-generator/examples/pdf-hr-flexible-working-hours-request-form-template/angular
index: https://surveyjs.io/pdf-generator/examples/overview.md
---

# Flexible Working Hours Request Form (Angular)

## Files

### `src/app/components/json.ts`

```ts
export const json = {
  "title": "Flexible Working Hours Request Form",
  "headerView": "advanced",
  "questionsOnPageMode": "singlePage",
  "pages": [
    {
      "name": "page-one",
      "title": "Employee Information",
      "elements": [
        {
          "type": "text",
          "name": "name",
          "title": "Employee Name"
        },
        {
          "type": "text",
          "name": "title",
          "title": "Job Title"
        },
        {
          "type": "text",
          "name": "department",
          "title": "Department / Division / Centre",
          "startWithNewLine": false
        },
        {
          "type": "boolean",
          "name": "number-of-weeks",
          "title": "I have worked continuously for the last 26 weeks.",
          "isRequired": true,
          "displayMode": "checkbox"
        },
        {
          "type": "boolean",
          "name": "previous-requests",
          "title": "I confirm that I have not submitted a flexible working request within the last 12 months.",
          "isRequired": true,
          "displayMode": "checkbox"
        },
        {
          "type": "radiogroup",
          "name": "current-pattern",
          "title": "Current Working Pattern",
          "description": "Select the option that best describes your current working schedule.",
          "colCount": 2,
          "choices": [
            {
              "value": "9-5",
              "text": "Monday to Friday, 9 AM to 5 PM"
            },
            {
              "value": "8-4",
              "text": "Monday to Friday, 8 AM to 4 PM"
            },
            {
              "value": "10-6",
              "text": "Monday to Thursday, 10 AM to 6 PM"
            },
            {
              "value": "7-3",
              "text": "Tuesday to Saturday, 7 AM to 3 PM"
            },
            {
              "value": "12-8",
              "text": "Wednesday to Sunday, 12 PM to 8 PM"
            },
            {
              "value": "weekends",
              "text": "Weekends only, 9 AM to 5 PM"
            },
            {
              "value": "even",
              "text": "Monday, Wednesday, Friday, 9 AM to 5 PM"
            },
            {
              "value": "part-time",
              "text": "Part-time: Monday, Wednesday, Friday, 10 AM to 2 PM"
            }
          ]
        },
        {
          "type": "radiogroup",
          "name": "pattern",
          "title": "Requested Working Pattern",
          "description": "Select the working pattern you would like to request.",
          "colCount": 2,
          "choices": [
            {
              "value": "part-time",
              "text": "Part-time: Monday, Wednesday, Friday, 10 AM to 2 PM"
            },
            {
              "value": "shifting",
              "text": "Shift work: Rotating shifts (7 AM - 3 PM / 3 PM - 11 PM / 11 PM - 7 AM)"
            },
            {
              "value": "flexible",
              "text": "Flexible hours with core hours from 10 AM to 3 PM"
            },
            {
              "value": "compressed",
              "text": "Compressed workweek: Monday to Thursday, 8 AM to 6 PM"
            },
            {
              "value": "remote",
              "text": "Remote work arrangement with flexible hours (typically 9 AM to 5 PM)"
            }
          ]
        },
        {
          "type": "text",
          "name": "start-date",
          "title": "Requested Start Date for the New Working Pattern",
          "description": "The start date must be at least 7 days from today.",
          "validators": [
            {
              "type": "expression",
              "text": "The start date must be at least 7 days from today.",
              "expression": "diffDays({start-date}, today()) > 7 and {start-date} > today()"
            }
          ],
          "inputType": "date"
        },
        {
          "type": "boolean",
          "name": "risk-assessment",
          "title": "If requesting remote work, have you completed a Homeworking Risk Assessment?",
          "description": "Indicate whether a Homeworking Risk Assessment has been completed, if applicable."
        },
        {
          "type": "comment",
          "name": "areas",
          "title": "Impact of the Requested Arrangement",
          "description": "Describe the expected impact of your requested arrangement on the service, your colleagues, and your manager. If there may be challenges, explain how they could be managed. If your request cannot be implemented exactly as proposed, indicate whether you have any flexibility in your preferred arrangement.",
          "autoGrow": true
        },
        {
          "type": "boolean",
          "name": "consent",
          "title": "I understand that if this request is approved, it will result in a permanent change to my employment Terms and Conditions.",
          "isRequired": true,
          "requiredErrorText": "You must confirm your understanding before submitting this request.",
          "displayMode": "checkbox"
        },
        {
          "type": "signaturepad",
          "name": "signature",
          "title": "Employee Signature",
          "signatureHeight": 100
        },
        {
          "type": "text",
          "name": "date",
          "startWithNewLine": false,
          "title": "Date",
          "inputType": "date"
        },
        {
          "type": "html",
          "name": "comment-for-line-manager",
          "html": "<em>For line managers: After receiving this form, please contact your HR Partner to proceed with the application or obtain further guidance.</em>"
        }
      ]
    }
  ]
};
```

### `src/app/components/pdf.component.css`

```css
/* You can add your custom CSS here. */
```

### `src/app/components/pdf.component.html`

```html
<survey [model]="model"></survey>
```

### `src/app/components/pdf.component.ts`

```ts
import { Component, OnInit } from "@angular/core";
import { Model } from "survey-core";
import { SurveyPDF } from "survey-pdf";
import { json } from "./json";
import "./pdf.component.css";
import "survey-core/survey-core.min.css";

function createSurveyPdfModel (surveyModel) {
    const surveyPDF = new SurveyPDF(json);
    if (surveyModel) {
        surveyPDF.data = surveyModel.data;
        surveyPDF.locale = surveyModel.locale;
        
        
    }
    
    return surveyPDF;
}
function saveSurveyToPdf (filename, surveyModel) {
    const pdfDoc = createSurveyPdfModel(surveyModel);
    if (!pdfDoc) return;

    pdfDoc.save(filename);
}

const previewDiv = document.getElementById("pdf-preview");
const previewEmbed = document.getElementById("pdf-preview-frame");
let pdfBlobUrl;

function showPdfPreview(surveyModel) {
    if (!previewDiv || !previewEmbed) return;

    const pdfDoc = createSurveyPdfModel(surveyModel);
    if (!pdfDoc) return;

    pdfDoc.raw("blob").then((blob) => {
        if (pdfBlobUrl) {
            URL.revokeObjectURL(pdfBlobUrl);
        }
        pdfBlobUrl = URL.createObjectURL(blob);
        previewEmbed.setAttribute("src", pdfBlobUrl);
        previewDiv.style.display = "block";
    });
}

function previewPdf(surveyModel) {
    if (!previewDiv) return;

    if (previewDiv.style.display !== "none") {
        previewDiv.style.display = "none";
        return;
    }

    showPdfPreview(surveyModel);
}

@Component({
    // tslint:disable-next-line:component-selector
    selector: "component-survey",
    templateUrl: "./pdf.component.html",
    styleUrls: ["./pdf.component.css"]
})
export class SurveyPdfComponent implements OnInit {
    model: Model;
    ngOnInit() {
        const survey = new Model(json);
        survey.showCompleteButton = false;
        survey.navigationButtonsLocation = "topBottom";
        survey.addNavigationItem({
            id: "survey_save_as_file",
            title: "Download PDF",
            action: () => {
                saveSurveyToPdf("surveyResult.pdf", survey);
            }
        });
        survey.addNavigationItem({
            id: "survey_pdf_preview",
            title: "Preview PDF",
            visible: window.navigator.pdfViewerEnabled,
            action: () => {
                previewPdf(survey);
            }
        });
        this.model = survey;
    }
}
```

### `src/app/components/theme.ts`

```ts
export const themeJson = {};
```

### `src/app/app.component.css`

```css

```

### `src/app/app.component.html`

```html
<component-survey></component-survey>
```

### `src/app/app.component.ts`

```ts
import { Component } from "@angular/core";

@Component({
    selector: "app-root",
    templateUrl: "./app.component.html",
    styleUrls: ["./app.component.css"]
})
export class AppComponent {
    title = "CodeSandbox";
}
```

### `src/app/app.module.ts`

```ts
import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";

import { AppComponent } from "./app.component";
import { SurveyModule } from "survey-angular-ui";
import { SurveyPdfComponent } from "./components/pdf.component";

@NgModule({
    declarations: [AppComponent, SurveyPdfComponent],
    imports: [BrowserModule, SurveyModule],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule { }
```

### `src/environments/environment.prod.ts`

```ts
export const environment = {
    production: true
};
```

### `src/environments/environment.ts`

```ts
// The file contents for the current environment will overwrite these during build.
// The build system defaults to the dev environment which uses `environment.ts`, but if you do
// `ng build --env=prod` then `environment.prod.ts` will be used instead.
// The list of which env maps to which file can be found in `.angular-cli.json`.

export const environment = {
    production: false
};
```

### `src/index.html`

```html
<div style="display: flex;">
    <div id="surveyElement" style="flex: 1 1 0%; height: 100%; min-width: 0;">
        <app-root></app-root>
    </div>
    <div id="pdf-preview" style="flex: 0.7 0.7 0%; display: none">
        <embed id="pdf-preview-frame" type="application/pdf" style="width:100%; height:100%;" />
    </div>
</div>
```

### `src/main.ts`

```ts
import { enableProdMode } from "@angular/core";
import { platformBrowserDynamic } from "@angular/platform-browser-dynamic";

import { AppModule } from "./app/app.module";
import { environment } from "./environments/environment";

if (environment.production) {
    enableProdMode();
}

platformBrowserDynamic()
    .bootstrapModule(AppModule)
    .catch(err => console.log(err));
```

### `src/polyfills.ts`

```ts
/**
 * This file includes polyfills needed by Angular and is loaded before the app.
 * You can add your own extra polyfills to this file.
 *
 * This file is divided into 2 sections:
 *   1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
 *   2. Application imports. Files imported after ZoneJS that should be loaded before your main
 *      file.
 *
 * The current setup is for so-called "evergreen" browsers; the last versions of browsers that
 * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
 * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
 *
 * Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html
 */

/***************************************************************************************************
 * BROWSER POLYFILLS
 */

/** IE9, IE10 and IE11 requires all of the following polyfills. **/
// import 'core-js/es6/symbol';
// import 'core-js/es6/object';
// import 'core-js/es6/function';
// import 'core-js/es6/parse-int';
// import 'core-js/es6/parse-float';
// import 'core-js/es6/number';
// import 'core-js/es6/math';
// import 'core-js/es6/string';
// import 'core-js/es6/date';
// import 'core-js/es6/array';
// import 'core-js/es6/regexp';
// import 'core-js/es6/map';
// import 'core-js/es6/weak-map';
// import 'core-js/es6/set';

/** IE10 and IE11 requires the following for NgClass support on SVG elements */
// import 'classlist.js';  // Run `npm install classlist.js`.

/** IE10 and IE11 requires the following for the Reflect API. */
// import 'core-js/es6/reflect';

/** Evergreen browsers require these. **/
// Used for reflect-metadata in JIT. If you use AOT (and only Angular decorators), you can remove.
import "core-js/proposals/reflect-metadata";

/**
 * Required to support Web Animations `@angular/platform-browser/animations`.
 * Needed for: All but Chrome, Firefox and Opera. http://caniuse.com/#feat=web-animation
 **/
// import 'web-animations-js';  // Run `npm install web-animations-js`.

/***************************************************************************************************
 * Zone JS is required by default for Angular itself.
 */
import "zone.js/dist/zone"; // Included with Angular CLI.

/***************************************************************************************************
 * APPLICATION IMPORTS
 */
```

### `src/styles.css`

```css

```

### `src/typings.d.ts`

```ts
/* SystemJS module definition */
declare var module: NodeModule;
interface NodeModule {
    id: string;
}
```

### `.angular-cli.json`

```json
{
  "apps": [
    {
      "root": "src",
      "outDir": "dist",
      "assets": [ "assets", "favicon.ico" ],
      "index": "index.html",
      "main": "main.ts",
      "polyfills": "polyfills.ts",
      "prefix": "app",
      "styles": [ "styles.css" ],
      "scripts": [ ],
      "environmentSource": "environments/environment.ts",
      "environments": {
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts"
      }
    }
  ]
}
```

### `_tsconfig.json`

```json
{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "allowSyntheticDefaultImports": true,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "moduleResolution": "node",
    "importHelpers": true,
    "resolveJsonModule": true,
    "target": "es2015",
    "module": "es2020",
    "lib": [
      "es2018",
      "dom"
    ]
  }
}
```

### `package.json`

```json
{
  "name": "surveyjs-angular",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build --prod",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "14.1.1",
    "@angular/cdk": "14.1.1",
    "@angular/common": "14.1.1",
    "@angular/compiler": "14.1.1",
    "@angular/core": "14.1.1",
    "@angular/forms": "14.1.1",
    "@angular/platform-browser": "14.1.1",
    "@angular/platform-browser-dynamic": "14.1.1",
    "@angular/router": "14.1.1",
    "core-js": "3.6.4",
    "rxjs": "6.5.4",
    "survey-core": "latest",
    "survey-angular-ui": "latest",
    "survey-pdf": "latest",
    "tslib": "1.13.0",
    "zone.js": "0.11.7"
  },
  "devDependencies": {
    "@angular/cli": "1.6.6",
    "@angular/compiler-cli": "^5.2.0",
    "@angular/language-service": "^5.2.0",
    "@types/core-js": "0.9.46",
    "@types/jasmine": "~2.8.3",
    "@types/jasminewd2": "~2.0.2",
    "@types/node": "~6.0.60",
    "codelyzer": "^4.0.1",
    "jasmine-core": "~2.8.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~2.0.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "^1.2.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.1.2",
    "ts-node": "~4.1.0",
    "tslint": "~5.9.1",
    "typescript": "3.9.7"
  },
  "keywords": [ "angular", "surveyjs" ],
  "description": "SurveyJS-Angular example project"
}
```

## Other Frameworks

- [React](https://surveyjs.io/pdf-generator/examples/pdf-hr-flexible-working-hours-request-form-template/reactjs.md)
- [Vue 3](https://surveyjs.io/pdf-generator/examples/pdf-hr-flexible-working-hours-request-form-template/vue3js.md)
- [jQuery](https://surveyjs.io/pdf-generator/examples/pdf-hr-flexible-working-hours-request-form-template/jquery.md)
- [Vanilla JS](https://surveyjs.io/pdf-generator/examples/pdf-hr-flexible-working-hours-request-form-template/vanillajs.md)