---
title: 360 Degree Feedback Review Form
product: PDF Generator
description: Download a printable 360 degree feedback review form in PDF. Generate editable or prefilled employee evaluation forms with SurveyJS PDF Generator.
framework: Angular
source: https://surveyjs.io/pdf-generator/examples/pdf-hr-360-degree-feedback-review-form-template/angular
index: https://surveyjs.io/pdf-generator/examples/overview.md
---
# 360 Degree Feedback Review Form (Angular)
## Files
### `src/app/components/json.ts`
```ts
export const json = {
"title": "360 Degree Feedback Review Form",
"questionsOnPageMode": "singlePage",
"pages": [
{
"name": "page-one",
"title": "Introduction",
"elements": [
{
"type": "panel",
"name": "intro",
"requiredErrorText": "A response is required for each question in this section.",
"elements": [
{
"type": "text",
"name": "employee-name",
"title": "Employee Name",
"isRequired": true
},
{
"type": "text",
"name": "completed-by",
"title": "Completed By",
"isRequired": true
},
{
"type": "text",
"name": "date",
"title": "Date Completed",
"isRequired": true,
"inputType": "date"
},
{
"type": "text",
"name": "role",
"title": "Role",
"description": "e.g. Self/Supervisor/Peer/Direct Report etc.",
"isRequired": true
}
]
},
{
"type": "panel",
"name": "instructions",
"elements": [
{
"type": "html",
"name": "instructions-text",
"html": "Instructions
In keeping with our organization's goal to continuously improve, we are asking for your candid feedback on the performance of the above individual this past year. A confidential summary of all feedback received will be prepared for each individual so that he or she can use the feedback to learn and develop.
Your individual feedback will be averaged into all responses to protect your anonymity and ensure that the results each individual receives are completely confidential. Our Human Resources team may also prepare an overall summary to assess areas for additional company-provided training.
Select a numerical rating and use the space provided at the end of each section to offer commentary and contextual insights to support and substantiate your rating, as well as to facilitate conversation as part of the recipient's formal performance evaluation.
We recommend rating employee effectiveness using the conversational 5-point scale below. If you do not feel you have sufficient insight to score the employee on a particular measure, please select N/A.
Thank you for your contribution.
"
},
{
"type": "html",
"name": "score-definitions",
"html": "Scoring definitions
1 = Unsatisfactory: Performance consistently fails to meet minimum position requirements; employee lacks skills required or fails to utilize necessary skills.
2 = Inconsistent: Performance meets some, but not all position requirements.
3 = Proficient: Performance consistently meets position requirements.
4 = Highly Effective: Performance frequently exceeds position requirements.
NA = New / Not Applicable: Employee has not been in position long enough to have demonstrated the essential elements of the position and will be reviewed at a later agreed upon date.
"
}
]
}
]
},
{
"name": "customer-service",
"title": "Customer Service Skills",
"elements": [
{
"type": "matrixdropdown",
"name": "customer-service-skills",
"title": "Customer Service Skills",
"showCommentArea": true,
"commentText": "Comments",
"showHeader": false,
"alternateRows": true,
"rowTitleWidth": "60%",
"columns": [
{
"name": "rating",
"cellType": "rating",
"width": "30%",
"resetValueIf": "{row.checkbox} notempty",
"totalType": "avg",
"totalFormat": "Avg score: {0}",
"totalDisplayStyle": "decimal",
"autoGenerate": false,
"rateCount": 4,
"rateValues": [1, 2, 3, 4]
},
{
"name": "checkbox",
"cellType": "checkbox",
"colCount": 0,
"width": "10%",
"resetValueIf": "{row.rating} notempty",
"totalType": "count",
"totalFormat": "Total: {0}",
"choices": [
{
"value": "n-a",
"text": "N/A"
}
]
}
],
"rows": [
{ "value": "client-relations", "text": "Develops meaningful client relationships" },
{ "value": "listen-understand", "text": "Makes an effort to listen to and understand the client" },
{ "value": "eagerness", "text": "Shows eagerness when working with clients" },
{ "value": "satisfaction", "text": "Prioritizes client's satisfaction and looks to provide solutions" },
{ "value": "fix-problems", "text": "Focuses on fixing problems rather than finding someone to blame" }
]
}
]
},
{
"name": "communication-interpersonal-skills",
"title": "Communication & Interpersonal Skills",
"elements": [
{
"type": "matrixdropdown",
"name": "communication",
"title": "Communication & Interpersonal Skills",
"showCommentArea": true,
"commentText": "Comments",
"showHeader": false,
"alternateRows": true,
"rowTitleWidth": "60%",
"columns": [
{
"name": "rating",
"cellType": "rating",
"width": "30%",
"resetValueIf": "{row.checkbox} notempty",
"totalType": "avg",
"totalFormat": "Avg score: {0}",
"totalDisplayStyle": "decimal",
"autoGenerate": false,
"rateCount": 4,
"rateValues": [1, 2, 3, 4]
},
{
"name": "checkbox",
"cellType": "checkbox",
"colCount": 0,
"width": "10%",
"resetValueIf": "{row.rating} notempty",
"totalType": "count",
"totalFormat": "Total: {0}",
"choices": [
{ "value": "n-a", "text": "N/A" }
]
}
],
"rows": [
{ "value": "active", "text": "Is an engaging and active participant during meetings" },
{ "value": "relations", "text": "Develops meaningful relationships with co-workers and peers" },
{ "value": "follows", "text": "Informs, listens and follows direction regularly" },
{ "value": "clear-communication", "text": "Provides clear written and verbal communication" },
{ "value": "reliable", "text": "Demonstrates thoroughness, reliability and trustworthiness" }
]
}
]
},
{
"name": "work-quality",
"title": "Quality of Work",
"elements": [
{
"type": "matrixdropdown",
"name": "quality",
"title": "Quality of Work",
"showCommentArea": true,
"commentText": "Comments",
"showHeader": false,
"alternateRows": true,
"rowTitleWidth": "60%",
"columns": [
{
"name": "rating",
"cellType": "rating",
"width": "30%",
"resetValueIf": "{row.checkbox} notempty",
"totalType": "avg",
"totalFormat": "Avg score: {0}",
"totalDisplayStyle": "decimal",
"autoGenerate": false,
"rateCount": 4,
"rateValues": [1, 2, 3, 4]
},
{
"name": "checkbox",
"cellType": "checkbox",
"colCount": 0,
"width": "10%",
"resetValueIf": "{row.rating} notempty",
"totalType": "count",
"totalFormat": "Total: {0}",
"choices": [
{ "value": "n-a", "text": "N/A" }
]
}
],
"rows": [
{ "value": "accurate", "text": "Consistently provides thorough and accurate work" },
{ "value": "pressure", "text": "Ability to work under pressure and learn from previous mistakes" },
{ "value": "issues", "text": "Accurately checks processes and tasks, handles issues in a timely manner" },
{ "value": "timely", "text": "Ability to work quickly and submit deliverables in a timely manner" },
{ "value": "details", "text": "Manages work details; organized and detailed in work product" }
]
}
]
},
{
"name": "judgements-decisions",
"title": "Judgement & Decision-Making Skills",
"elements": [
{
"type": "matrixdropdown",
"name": "decisions",
"title": "Judgement & Decision-Making Skills",
"showCommentArea": true,
"commentText": "Comments",
"showHeader": false,
"alternateRows": true,
"rowTitleWidth": "60%",
"columns": [
{
"name": "rating",
"cellType": "rating",
"width": "30%",
"resetValueIf": "{row.checkbox} notempty",
"totalType": "avg",
"totalFormat": "Avg score: {0}",
"totalDisplayStyle": "decimal",
"autoGenerate": false,
"rateCount": 4,
"rateValues": [1, 2, 3, 4]
},
{
"name": "checkbox",
"cellType": "checkbox",
"colCount": 0,
"width": "10%",
"resetValueIf": "{row.rating} notempty",
"totalType": "count",
"totalFormat": "Total: {0}",
"choices": [
{ "value": "n-a", "text": "N/A" }
]
}
],
"rows": [
{ "value": "logical-thinking", "text": "Thinks logically and practically before making decisions" },
{ "value": "independent", "text": "Works well independently and with little direction" },
{ "value": "confidential-information", "text": "Ability to handle confidential information" },
{ "value": "independent-thought", "text": "Uses independent thought, reasoning and originality" },
{ "value": "concise-clear", "text": "Makes concise and clear decisions under pressure" }
]
}
]
},
{
"name": "other-competences",
"title": "Other Competencies",
"elements": [
{
"type": "matrixdropdown",
"name": "competencies",
"title": "Other Competencies",
"showCommentArea": true,
"commentText": "Comments",
"showHeader": false,
"alternateRows": true,
"rowTitleWidth": "60%",
"columns": [
{
"name": "rating",
"cellType": "rating",
"width": "30%",
"resetValueIf": "{row.checkbox} notempty",
"totalType": "avg",
"totalFormat": "Avg score: {0}",
"totalDisplayStyle": "decimal",
"autoGenerate": false,
"rateCount": 4,
"rateValues": [1, 2, 3, 4]
},
{
"name": "checkbox",
"cellType": "checkbox",
"colCount": 0,
"width": "10%",
"resetValueIf": "{row.rating} notempty",
"totalType": "count",
"totalFormat": "Total: {0}",
"choices": [
{ "value": "n-a", "text": "N/A" }
]
}
],
"rows": [
{ "value": "contributions", "text": "Demonstrates willingness to make significant contributions to the team" },
{ "value": "proactive", "text": "Proactive and self-starter" },
{ "value": "company-activities", "text": "Encourages and supports involvement in company activities and events" },
{ "value": "changes", "text": "Encourages and embraces changes; maintains positivity in times of change" },
{ "value": "respect-fairness", "text": "Treats everyone with respect and fairness" }
]
},
{
"type": "panel",
"name": "totals",
"readOnly": true,
"title": "FOR HR TEAM ONLY"
},
{
"type": "expression",
"name": "total-average",
"title": "Total average score",
"expression": "{customer-service-skills-total.rating} + {communication-total.rating} + {quality-total.rating} + {decisions-total.rating} + {competencies-total.rating}",
"displayStyle": "decimal",
"maximumFractionDigits": 2,
"minimumFractionDigits": 2
},
{
"type": "expression",
"name": "total-n-a",
"title": "Total 'N/A' answers",
"expression": "{customer-service-skills-total.checkbox} + {communication-total.checkbox}",
"maximumFractionDigits": 2,
"minimumFractionDigits": 2
}
]
}
],
"headerView": "advanced"
};
```
### `src/app/components/pdf.component.css`
```css
/* You can add your custom CSS here. */
```
### `src/app/components/pdf.component.html`
```html
```
### `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
```
### `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
```
### `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-360-degree-feedback-review-form-template/reactjs.md)
- [Vue 3](https://surveyjs.io/pdf-generator/examples/pdf-hr-360-degree-feedback-review-form-template/vue3js.md)
- [jQuery](https://surveyjs.io/pdf-generator/examples/pdf-hr-360-degree-feedback-review-form-template/jquery.md)
- [Vanilla JS](https://surveyjs.io/pdf-generator/examples/pdf-hr-360-degree-feedback-review-form-template/vanillajs.md)