---
title: Skip Logic
product: Form Library
description: Skip logic lets you control the flow of your survey based on given answers. Your form can automatically skip irrelevant questions, show or hide certain form fields, or navigate a respondent to the Thank You page. View this demo to learn how to end a survey when a certain condition is met.
framework: Angular
source: https://surveyjs.io/form-library/examples/add-skip-logic-to-survey/angular
index: https://surveyjs.io/form-library/examples/overview.md
---

# Skip Logic (Angular)

Skip logic enables you to guide respondents to the next relevant question based on their previous answers, ensuring they only see questions that are relevant to them. In SurveyJS, you can implement skip logic using [conditional visibility](/form-library/examples/implement-conditional-logic-to-change-question-visibility/) or conditional actions, known as triggers. This example demonstrates the use of a Complete trigger, which ends a survey when a certain condition is met. In this demo, the survey prompts a user to submit their response if their estimated age is under 21.

To configure a trigger, add an object to the [`triggers`](/form-library/documentation/api-reference/survey-data-model#triggers) array. This object should specify the `type` and `expression` properties. Set `type` to `"complete"` for the Complete trigger and assign a Boolean [expression](/form-library/documentation/design-survey/conditional-logic#expressions) to the `expression` property. A survey will end when this expression evaluates to `true`. For a code example, refer to the survey JSON schema (`json.js` file).

For more information about triggers, refer to the following help topic:

[Conditional Survey Logic (Triggers)](/form-library/documentation/design-survey/conditional-logic#conditional-survey-logic-triggers (linkStyle))

## Files

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

```ts
export const json = {
  "title": "Alcohol Use Disorders Identification Test (AUDIT)",
  "description": "This simple test will help you identify unhealthy drinking patterns.",
  "triggers": [{
    "type": "complete",
    "expression": "age({birthdate}) < 21"
  }],
  "completedHtmlOnCondition": [{
    "expression": "age({birthdate}) < 21",
    "html": "You must be 21 or older to take this test."
  }, {
    "expression": "{totalScore} <= 7",
    "html": "You probably do not have a problem with alcohol. Continue drinking in moderation or not at all."
  }, {
    "expression": "{totalScore} >= 8 and {totalScore} <= 15",
    "html": "You may drink too much on occasion. This may put you or others at risk. Try to cut down on alcohol or stop drinking completely."
  }, {
    "expression": "{totalScore} >= 16 and {totalScore} <= 19",
    "html": "Your drinking could lead to harm, if it has not already. It is important that you cut down on alcohol or stop drinking completely. Ask your doctor or nurse for advice on how best to cut down."
  }, {
    "expression": "{totalScore} >= 20",
    "html": "It is likely that your drinking is causing harm. Speak to your doctor or nurse or an addiction specialist. Ask about medications and counseling that can help you stop drinking. If you are dependent on alcohol, do not stop drinking without the help of a health care professional."
  }],
  "pages": [{
    "name": "page1",
    "elements": [{
      "type": "text",
      "name": "birthdate",
      "title": "Please enter your birthdate",
      "showNumber": false,
      "isRequired": true,
      "inputType": "date"
    }]
  }, {
    "name": "page2",
    "elements": [{
      "type": "radiogroup",
      "name": "how-often-do-you-drink",
      "title": "How often do you have a drink containing alcohol?",
      "choices": [{
        "value": "never",
        "text": "Never",
        "score": 0
      }, {
        "value": "monthly",
        "text": "Monthly or less",
        "score": 1
      }, {
        "value": "2-to-4-times-a-month",
        "text": "2 to 4 times a month",
        "score": 2
      }, {
        "value": "2-to-3-times-a-week",
        "text": "2 to 3 times a week",
        "score": 3
      }, {
        "value": "4-or-more-times-a-week",
        "text": "4 or more times a week",
        "score": 4
      }]
    }, {
      "type": "radiogroup",
      "name": "how-many-drinks-a-day",
      "title": "How many drinks containing alcohol do you have on a typical day when you are drinking?",
      "choices": [{
        "value": "1-or-2",
        "text": "1 or 2",
        "score": 0
      }, {
        "value": "3-or-4",
        "text": "3 or 4",
        "score": 1
      }, {
        "value": "5-or-6",
        "text": "5 or 6",
        "score": 2
      }, {
        "value": "7-to-9",
        "text": "7 to 9",
        "score": 3
      }, {
        "value": "10-or-more",
        "text": "10 or more",
        "score": 4
      }]
    }, {
      "type": "radiogroup",
      "name": "5-or-more-drinks",
      "title": "How often do you have 5 or more drinks on one occasion?",
      "choices": [{
        "value": "never",
        "text": "Never",
        "score": 0
      }, {
        "value": "less-than-monthly",
        "text": "Less than monthly",
        "score": 1
      }, {
        "value": "monthly",
        "text": "Monthly",
        "score": 2
      }, {
        "value": "weekly",
        "text": "Weekly",
        "score": 3
      }, {
        "value": "daily-or-almost-daily",
        "text": "Daily or almost daily",
        "score": 4
      }]
    }, {
      "type": "radiogroup",
      "name": "couldnt-stop-drinking",
      "title": "How often during the last year have you found that you were not able to stop drinking once you had started?",
      "choicesFromQuestion": "5-or-more-drinks"
    }, {
      "type": "radiogroup",
      "name": "failed-tasks-due-to-drinking",
      "title": "How often during the last year have you failed to do what was normally expected of you because of drinking?",
      "choicesFromQuestion": "5-or-more-drinks"
    }, {
      "type": "radiogroup",
      "name": "needed-a-drink-in-the-morning",
      "title": "How often during the last year have you needed a first drink in the morning to get yourself going after a heavy drinking session?",
      "choicesFromQuestion": "5-or-more-drinks"
    }, {
      "type": "radiogroup",
      "name": "felt-guilt-after-drinking",
      "title": "How often during the last year have you had a feeling of guilt or remorse after drinking?",
      "choicesFromQuestion": "5-or-more-drinks"
    }, {
      "type": "radiogroup",
      "name": "unable-to-remember-last-night",
      "title": "How often during the last year have you been unable to remember what happened the night before because you had been drinking?",
      "choicesFromQuestion": "5-or-more-drinks"
    }, {
      "type": "radiogroup",
      "name": "injured-someone",
      "title": "Have you or someone else been injured as a result of your drinking?",
    "choices": [{
        "value": "no",
        "text": "No",
        "score": 0
      }, {
        "value": "yes-but-not-in-the-last-year",
        "text": "Yes, but not in the last year",
        "score": 2
      }, {
        "value": "yes-during-the-last-year",
        "text": "Yes, during the last year",
        "score": 4
      }]
    }, {
      "type": "radiogroup",
      "name": "someone-concerned-about-your-drinking",
      "title": "Has a relative, a friend, a doctor, or another health worker been concerned about your drinking or suggested you cut down?",
      "choicesFromQuestion": "injured-someone"
    }]
  }],
  "showPrevButton": false,
  "showQuestionNumbers": "onPage",
  "checkErrorsMode": "onValueChanged",
  "validateVisitedEmptyFields": true
};
```

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

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

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

```html
<survey [model]="model" style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; height:100%"></survey>
```

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

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

// Add a custom `score` property to choice options
Serializer.addProperty("itemvalue", {
    name: "score:number"
});
@Component({
    // tslint:disable-next-line:component-selector
    selector: "component-survey",
    templateUrl: "./survey.component.html",
    styleUrls: ["./survey.component.css"]
})
export class SurveyComponent implements OnInit {
    model: Model;
    ngOnInit() {
        const survey = new Model(json);
        function calculateTotalScore(data) {
            var totalScore = 0;
            data.forEach((item) => {
                totalScore += item.data ? item.data[0].score : 0;
            });
            return totalScore;
        }
        survey.onCompleting.add((sender) => {  
            const plainData = sender.getPlainData({
                calculations: [{ propertyName: "score" }]
            });
            const totalScore = calculateTotalScore(plainData);
            sender.setValue("totalScore", totalScore);
        });
        survey.onComplete.add((sender, options) => {
            console.log(JSON.stringify(sender.data, null, 3));
        });
        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 { SurveyComponent } from "./components/survey.component";

@NgModule({
    declarations: [AppComponent, SurveyComponent],
    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
<app-root></app-root>
```

### `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
/* You can add your custom CSS here. */
```

### `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",
    "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/form-library/examples/add-skip-logic-to-survey/reactjs.md)
- [Vue 3](https://surveyjs.io/form-library/examples/add-skip-logic-to-survey/vue3js.md)
- [jQuery](https://surveyjs.io/form-library/examples/add-skip-logic-to-survey/jquery.md)
- [Vanilla JS](https://surveyjs.io/form-library/examples/add-skip-logic-to-survey/vanillajs.md)