--- title: Patient Medical History product: PDF Generator description: Download a printable patient medical history form in PDF. Generate editable or prefilled healthcare history forms using SurveyJS PDF Generator. framework: Angular source: https://surveyjs.io/pdf-generator/examples/pdf-healthcare-patient-medical-history-form-template/angular index: https://surveyjs.io/pdf-generator/examples/overview.md --- # Patient Medical History (Angular) ## Files ### `src/app/components/json.ts` ```ts export const json = { "title": "Patient Past Medical, Social & Family History", "pages": [ { "name": "introduction", "elements": [ { "type": "panel", "name": "patientName", "questionTitleLocation": "bottom", "title": "Patient Name", "elements": [ { "type": "text", "name": "patientLastName", "title": "(Last)" }, { "type": "text", "name": "patientFirstName", "startWithNewLine": false, "title": "(First)" }, { "type": "text", "name": "patientMiddleName", "title": "(M.I)" } ] }, { "type": "panel", "name": "panel2", "questionTitleLocation": "left", "title": "Social Security & Birth Date", "elements": [ { "type": "text", "name": "socialsecurity", "title": "Social Security #:" }, { "type": "text", "name": "birthDate", "startWithNewLine": false, "title": "Date of birth:", "inputType": "date" }, { "type": "radiogroup", "name": "sex", "title": "Sex:", "choices": [ { "value": "male", "text": "Male" }, { "value": "female", "text": "Female" } ], "colCount": 0 } ] }, { "type": "panel", "name": "panel1", "title": "Form completed by", "elements": [ { "type": "radiogroup", "name": "completedBy", "title": "Who completed this form:", "choices": [ { "value": "patient", "text": "Patient" }, { "value": "spouse", "text": "Spouse" } ], "showOtherItem": true, "otherText": "Other (specify)", "colCount": 0 }, { "type": "text", "name": "completedByOtherName", "startWithNewLine": false, "title": "Name (if other than patient):" } ] } ] }, { "name": "medicalHistory", "title": "Past Medical History", "elements": [ { "type": "radiogroup", "name": "everhospitalized", "title": "Have you ever been hospitalized?", "choices": [ { "value": "no", "text": "No" }, { "value": "yes", "text": "Yes" } ], "colCount": 0 }, { "type": "radiogroup", "name": "injuriesbrokenbones", "title": "Have you had any serious injuries and/or broken bones?", "showCommentArea": true, "commentText": "If yes, describe the injuries:", "choices": [ { "value": "no", "text": "No" }, { "value": "yes", "text": "Yes" } ], "colCount": 0 }, { "type": "radiogroup", "name": "bloodtransfusion", "title": "Have you ever received a blood transfusion?", "showCommentArea": true, "commentText": "If yes, when?", "choices": [ { "value": "no", "text": "No" }, { "value": "yes", "text": "Yes" }, { "value": "unknown", "text": "Unknown" } ], "colCount": 0 }, { "type": "radiogroup", "name": "outsideUSACanada", "title": "Have you ever traveled or lived outside the United States or Canada?", "showCommentArea": true, "commentText": "If yes, where and when?", "choices": [ { "value": "no", "text": "No" }, { "value": "yes", "text": "Yes" } ], "colCount": 0 }, { "type": "matrixdropdown", "name": "immunizations", "title": "Have you received the following IMMUNIZATIONS? If yes, indicate the approximate year it was last given:", "titleLocation": "top", "columns": [ { "name": "answer", "title": "Please select", "cellType": "radiogroup", "choices": [ { "value": "no", "text": "No" }, { "value": "yes", "text": "Yes" }, { "value": "unknown", "text": "Unknown" } ], "allowClear": true }, { "name": "year", "title": "Year of last immunization", "cellType": "text" } ], "rows": [ "Pneumococcal (for pneumonia)", "Hepatitis A", "Hepatitis B", "Tetanus/Diphtheria within last 10 years", "Influenza (flu)", "Measles", "Mumps", "Rubella", "Polio" ] }, { "type": "matrixdropdown", "name": "problems1", "title": "Have you ever had any of the following?", "titleLocation": "top", "columns": [ { "name": "description1", "title": "Describe the problem, if applicable", "cellType": "comment", "rows": 2 } ], "rows": [ "Abnormal chest x-ray", "Anesthesia complications", "Anxiety, depression or mental illness", "Blood problems (abnormal bleeding, anemia, high or low white count)", "Diabetes", "Growth removed from the colon or rectum (polyp or tumor)", "High blood pressure", "High cholesterol or triglycerides", "Sexually transmitted disease", "Stroke or TIA", "Treatment for alcohol and/or drug abuse", "Tuberculosis or positive tuberculin skin test", "Cosmetic or plastic surgery" ] }, { "type": "matrixdropdown", "name": "problems2", "title": "Indicate whether you have ever had a medical problem and/or surgery related to each of the following", "titleLocation": "top", "columns": [ { "name": "type", "title": "Type", "cellType": "checkbox", "choices": [ { "value": "medical", "text": "Medical problem" }, { "value": "surgery", "text": "Surgery" } ] }, { "name": "year", "title": "Year(s) of surgery", "cellType": "text" }, { "name": "describe", "title": "Describe, if applicable", "cellType": "comment", "rows": 2 } ], "rows": [ "Eyes (cataracts, glaucoma)", "Ears, nose, sinuses, or tonsils", "Thyroid or parathyroid glands", "Heart valves or abnormal heart rhythm", "Coronary (heart) arteries (angina)", "Arteries (aorta, arteries to head, arms, legs) ", "Veins or blood clots in the veins", "Lungs", "Esophagus or stomach (ulcer)", "Bowel (small & large intestine)", "Appendix", "Liver or gallbladder (including hepatitis)", "Hernia", "Kidneys or bladder", "Bones, joints or muscles", "Back, neck or spine", "Brain", "Skin", "Breasts", "Females: uterus, tubes, ovaries", "Males: prostate, penis, testes, vasectomy", "Other (describe)" ] } ] }, { "name": "socialHistory", "questionTitleLocation": "left", "title": "Social History", "elements": [ { "type": "panel", "name": "education", "title": "Education", "elements": [ { "type": "text", "name": "schoolYearsCompleted", "title": "How many years of school have you completed?", "inputType": "number", "max": 12, "min": 0 } ] }, { "type": "panel", "name": "occupations", "title": "Occupations", "elements": [ { "type": "radiogroup", "name": "employmentStatus", "title": "Your current employment status:", "choices": [ "Retired", "Unemployed", "Homemaker", "Employed" ], "colCount": 0 }, { "type": "text", "name": "currentOcupation", "title": "Current Ocupation(s):", "description": "Leave blank if you are unemployed.", "descriptionLocation": "underInput" }, { "type": "comment", "name": "previousOccupations", "title": "Previous Occupations/Jobs:" } ] }, { "type": "panel", "name": "disability", "title": "Disability", "elements": [ { "type": "radiogroup", "name": "disabled", "title": "Are you disabled?", "choices": [ "No", "Yes" ], "colCount": 0 }, { "type": "comment", "name": "disableInfo", "title": "Disability details", "description": "Provide any relevant information regarding your disability, including type, duration, or support needs (if applicable).", "descriptionLocation": "underInput" } ] }, { "type": "panel", "name": "abuse", "title": "Abuse", "elements": [ { "type": "radiogroup", "name": "abused", "title": "Have you even been physically, sexually, or emotionally abused?", "choices": [ "No", "Yes" ], "colCount": 0 }, { "type": "comment", "name": "abusedInfo", "title": "Abuse details", "description": "Describe your experience of physical, sexual, or emotional abuse (if applicable).", "descriptionLocation": "underInput" }, { "type": "matrixdropdown", "name": "subsctancesUsing", "title": "Have you used any of the following substances?", "titleLocation": "top", "columns": [ { "name": "current", "title": "Currently?", "cellType": "radiogroup", "width": "200px", "choices": [ "No", "Yes" ], "allowClear": true }, { "name": "previous", "title": "Previously?", "cellType": "radiogroup", "width": "200px", "choices": [ "No", "Yes" ], "allowClear": true }, { "name": "amount", "title": "Type/Amount/Frequency", "cellType": "text", "width": "200px" }, { "name": "long", "title": "How long? (in years)", "cellType": "text", "width": "200px" }, { "name": "stopped", "title": "When stopped? (year)", "cellType": "text", "width": "200px" } ], "rows": [ "Caffeine: coffee, tea, soda", "Tobacco", "Alcohol: beer, wine, liquor", "Recreational/Street drugs" ], "rowTitleWidth": "200px" } ] }, { "type": "panel", "name": "maritalStatus", "title": "Marital Status", "elements": [ { "type": "radiogroup", "name": "currentlyMarried", "title": "Are you currently married?", "choices": [ "No", "Yes" ], "colCount": 0 }, { "type": "text", "name": "currentMarriageYear", "startWithNewLine": false, "title": "If yes, in what year did this marriage occure?" }, { "type": "paneldynamic", "name": "previousMarriages", "title": "List all previous marriages", "templateElements": [ { "type": "text", "name": "previousMarriageYear", "title": "Year married:" }, { "type": "text", "name": "previousMarriageDuration", "startWithNewLine": false, "title": "Duration (in years):" } ], "panelCount": 4, "addPanelText": "Add marriage" }, { "type": "panel", "name": "currentSpouse", "title": "Current Spouse Information", "elements": [ { "type": "radiogroup", "name": "currentSpouseStatus", "title": "Current Status", "choices": [ "Not applicable", "Alive", "Deceased" ], "colCount": 0 }, { "type": "text", "name": "currentSpouseAge", "startWithNewLine": false, "title": "Age", "description": "Enter the age of your spouse. Complete this field only if your spouse is alive.", "descriptionLocation": "underInput" }, { "type": "comment", "name": "currentSpouseHelthProblems", "title": "Health problems or cause of death:", "description": "Enter details about your spouse's health problems or cause of death if your spouse is deceased.", "descriptionLocation": "underInput", "rows": 2 }, { "type": "radiogroup", "name": "currentSpouseEmploymentStatus", "title": "Current employment status:", "description": "Provide information about your spouse's occupation or employment, applicable if the spouse is alive.", "descriptionLocation": "underInput", "choices": [ "Retired", "Unemployed", "Homemaker", "Employed" ], "colCount": 0 } ] }, { "type": "text", "name": "currentSpouseOccupation", "title": "Current occupation(s):", "description": "Provide details about your spouse's job(s) or work activities, applicable only if employed.", "descriptionLocation": "underInput" } ] } ] }, { "name": "familyHistory", "questionTitleLocation": "left", "title": "Family History", "elements": [ { "type": "radiogroup", "name": "adopted", "title": "Are you adopted?", "description": "Select 'Yes' if you were adopted, 'No' if you were raised by your biological parents.", "descriptionLocation": "underInput", "choices": [ "Yes", "No" ], "colCount": 0 }, { "type": "html", "name": "adoptedInfo", "html": "If known, complete the following information about your blood relatives (include children). Exclude adoptive parents, siblings, and adopted children." }, { "type": "paneldynamic", "name": "bloodRelativesInfo", "title": "Blood Relatives Information", "description": "For each blood relative, provide details on their relationship to you, status, age, cause of death if applicable, and health conditions. Use the 'Add Family Member' button to add multiple relatives.", "templateElements": [ { "type": "radiogroup", "name": "relativeType", "title": "Blood relative", "choices": [ "Father", "Mother", "Brother", "Sister", "Son", "Daughter" ], "colCount": 2 }, { "type": "radiogroup", "name": "relativeStatus", "title": "Current status", "choices": [ "Alive", "Deceased", "Unknown" ], "colCount": 0 }, { "type": "text", "name": "relativeAge", "title": "Current age", "description": "Leave blank if the relative is deceased or their status is unknown.", "descriptionLocation": "underInput" }, { "type": "text", "name": "relativeAgeOfDeath", "startWithNewLine": false, "title": "Age at death", "description": "Leave blank if the relative is alive or their status is unknown.", "descriptionLocation": "underInput" }, { "type": "comment", "name": "relativeCauseOfDeathDescription", "title": "Cause of death", "description": "Leave blank if the relative is alive or the cause of death is unknown", "descriptionLocation": "underInput", "rows": 2 }, { "type": "matrixdynamic", "name": "relativeCondition", "title": "Health Conditions", "titleLocation": "top", "description": "List any known illnesses or conditions of this relative. Provide details such as severity, age of onset, treatments, or any other relevant information.", "columns": [ { "name": "condition", "title": "Illness / Condition", "cellType": "text" }, { "name": "description", "title": "Description", "cellType": "comment", "rows": 2 } ], "rowCount": 4 } ], "panelCount": 3, "templateTitle": "Blood relative #{panelIndex}", "panelsState": "firstExpanded" }, { "type": "comment", "name": "relativesAdditionalInfo", "title": "Other information about your family", "description": "Provide any additional details about your family's health history that you think may be important.", "descriptionLocation": "underInput" } ] }, { "name": "healthcareProvider", "title": "Healthcare Provider Information", "elements": [ { "type": "radiogroup", "name": "primaryCareProvider", "title": "Do you have a Primary Care Provider?", "choices": ["No", "Yes"] }, { "type": "panel", "name": "primaryCareProviderInfo", "title": "Primary Care Provider", "elements": [ { "type": "text", "name": "primaryCareProviderName", "title": "Name" }, { "type": "text", "name": "primaryCareProviderPhone", "title": "Phone", "startWithNewLine": false }, { "type": "comment", "name": "primaryCareProviderAddress", "title": "Address" }, { "type": "radiogroup", "name": "primaryCareProviderSent", "title": "Send a summary of your visit to this provider?", "choices": ["No", "Yes"] } ] }, { "type": "radiogroup", "name": "primaryCareProviderRecommend", "title": "Did a non-Vanderbilt physician or healthcare provider recommend or arrange this visit?", "choices": ["No", "Yes"] }, { "type": "panel", "name": "primaryCareProviderRecommendInfo", "title": "Recommendation Details", "elements": [ { "type": "radiogroup", "name": "primaryCareProviderWhoSent", "title": "Who referred you?", "choices": [ { "value": "primary", "text": "Your Primary Care Provider (listed above)" }, { "value": "other", "text": "Another physician or healthcare provider" } ] }, { "type": "panel", "name": "primaryCareProviderOtherInfo", "title": "Other Referring Provider", "elements": [ { "type": "text", "name": "primaryCareProviderOtherName", "title": "Name" }, { "type": "text", "name": "primaryCareProviderOtherPhone", "title": "Phone", "startWithNewLine": false }, { "type": "comment", "name": "primaryCareProviderOtherAddress", "title": "Address" }, { "type": "radiogroup", "name": "primaryCareProviderOtherSent", "title": "Send a summary of your visit to this provider?", "choices": ["No", "Yes"] } ] } ] } ] }, { "name": "medications", "title": "Medications", "elements": [ { "type": "panel", "name": "currentUsingMedication", "title": "Medications Currently Taken", "elements": [ { "type": "radiogroup", "name": "currentMedication", "title": "Are you currently taking any prescription or non-prescription medications, vitamins, supplements, or herbal remedies?", "choices": ["No", "Yes"] }, { "type": "matrixdynamic", "name": "currentMedicationList", "title": "List Current Medications", "rowCount": 5, "columns": [ { "name": "name", "title": "Medication Name", "cellType": "text" }, { "name": "dose", "title": "Dose", "cellType": "text" }, { "name": "often", "title": "How Often Taken", "cellType": "text" } ] } ] }, { "type": "panel", "name": "pnl-recentlyUsedMedication", "title": "Recently Used Medications", "elements": [ { "type": "radiogroup", "name": "recentlyUsedMedication", "title": "Have you recently used other medications?", "choices": ["No", "Yes"] }, { "type": "matrixdynamic", "name": "recentlyUsedMedicationList", "title": "List Recently Used Medications", "rowCount": 5, "columns": [ { "name": "name", "title": "Medication Name", "cellType": "text" }, { "name": "dose", "title": "Dose", "cellType": "text" }, { "name": "often", "title": "How Often Taken", "cellType": "text" } ] } ] }, { "type": "radiogroup", "name": "aspirinContainingProducts", "title": "Have you taken aspirin-containing products in the last two weeks?", "choices": ["No", "Yes"] }, { "type": "radiogroup", "name": "steroidDrugs", "title": "Have you taken steroid or cortisone-type drugs within the last year?", "choices": ["No", "Yes"] } ] }, { "name": "allergies", "title": "Allergies", "elements": [ { "type": "panel", "name": "allergiesMedication", "title": "Medication Allergies", "elements": [ { "type": "radiogroup", "name": "hasAllergiesMedication", "title": "Have you had allergic reactions to medications?", "choices": ["No", "Yes"] }, { "type": "matrixdynamic", "name": "allergiesMedicationList", "title": "List Medications and Reactions", "rowCount": 5, "columns": [ { "name": "name", "title": "Medication Name", "cellType": "text" }, { "name": "description", "title": "Reaction", "cellType": "comment", "rows": 2 } ] } ] }, { "type": "panel", "name": "foodAllergiesInfo", "title": "Food Allergies", "elements": [ { "type": "radiogroup", "name": "hasFoodAllergies", "title": "Do you have food allergies?", "choices": ["No", "Yes"] }, { "type": "comment", "name": "foodAllergiesDescription", "title": "Describe Food Allergies" } ] } ] }, { "name": "selfCare", "title": "Self-Care / Home Environment Assessment", "elements": [ { "type": "matrix", "name": "performingActivities", "title": "Do you have difficulty performing these activities by yourself?", "columns": ["No", "Yes"], "rows": [ "Eating", "Bathing", "Dressing", "Walking", "Using Toilet", "Housekeeping" ], "eachRowRequired": true }, { "type": "radiogroup", "name": "specialDietary", "title": "Do you have any special dietary needs?", "choices": ["No", "Yes"] }, { "type": "comment", "name": "specialDietaryDescription", "title": "Describe your special dietary needs" }, { "type": "radiogroup", "name": "livingArrangement", "title": "Current living arrangement", "choices": ["House", "Apartment", "Nursing Home"], "showOtherItem": true }, { "type": "radiogroup", "name": "liveWithWhom", "title": "Do you live", "choices": ["Alone", "With Spouse/Family", "With others"] }, { "type": "comment", "name": "liveWithWhomDescription", "title": "Describe the people you live with" }, { "type": "comment", "name": "peopleProvidedAssistence", "title": "List family or friends who could assist with homecare if needed" } ] }, { "name": "educationalNeeds", "title": "Educational Needs", "elements": [ { "type": "checkbox", "name": "interestedInTopics", "title": "Topics you would like more information about", "choices": [ "How to stop smoking", "Exercise", "Stress", "Safe sexual practices", "Safety (seat belts, smoke detectors, firearms)", "Nutrition", "Weight control", "Violent or abusive behavior", "Living wills", "Diabetes", "Cancer screening" ], "showOtherItem": true, "colCount": 2 } ] } ], "questionErrorLocation": "bottom", "questionsOnPageMode": "singlePage", "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; } surveyPDF.questionsOnPageMode = "standard"; 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-healthcare-patient-medical-history-form-template/reactjs.md) - [Vue 3](https://surveyjs.io/pdf-generator/examples/pdf-healthcare-patient-medical-history-form-template/vue3js.md) - [jQuery](https://surveyjs.io/pdf-generator/examples/pdf-healthcare-patient-medical-history-form-template/jquery.md) - [Vanilla JS](https://surveyjs.io/pdf-generator/examples/pdf-healthcare-patient-medical-history-form-template/vanillajs.md)