---
title: Change Row and Column Visibility in a Multi-Select Matrix
product: Form Library
description: With SurveyJS, you can make certain question elements (e.g. choice options in close-ended questions, or rows and columns in a matrix table question) visible or invisible with expression properties. View a free demo for JavaScript to learn how to use properties that affect visibility of question elements with expressions as their values.
framework: Angular
source: https://surveyjs.io/form-library/examples/change-visibility-of-rows-in-matrix-table/angular
index: https://surveyjs.io/form-library/examples/overview.md
---

# Change Row and Column Visibility in a Multi-Select Matrix (Angular)

Matrix questions allow you to dynamically manage the visibility of matrix rows and columns. In this demo, matrix rows list car brands, and matrix columns display different qualities that you can rate. Use the checkboxes below to select the car brands and qualities that should appear in the matrix.

To implement conditional visibility for matrix rows or columns, follow these steps:

1. Prepopulate the matrix's [`columns`](https://surveyjs.io/form-library/documentation/api-reference/matrix-table-with-dropdown-list#columns) and [`rows`](https://surveyjs.io/form-library/documentation/api-reference/matrix-table-with-dropdown-list#rows) arrays with choice options from the main questions.          
In this demo, the `rows` array contains a copy of choice options from the `cars` question, while the `columns` array is populated with all choice options from the `qualities` question.

1. Specify the [`columnsVisibleIf`](https://surveyjs.io/form-library/documentation/api-reference/matrix-table-with-dropdown-list#columnsVisibleIf) and [`rowsVisibleIf`](https://surveyjs.io/form-library/documentation/api-reference/matrix-table-with-dropdown-list#rowsVisibleIf) expressions.          
These expressions are used as a filter for columns and rows. Use the `{item}` placeholder to reference a row or column being evaluated within the expression. As an alternative, you can specify a `visibleIf` expression for individual columns or rows.

Refer to the survey JSON schema for a code example.

## Files

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

```ts
export const json = {
  "elements": [
    {
      "type": "checkbox",
      "name": "cars",
      "title": "Which cars have you been driven?",
      "choices": [
        "Audi", "BMW", "Citroen",
        "Ford", "Mercedes-Benz", "Nissan",
        "Peugeot", "Tesla", "Toyota",
        "Vauxhall", "Volkswagen"
      ],
      "defaultValue": [ "Tesla", "Nissan" ],
      "colCount": 3
    },
    {
      "type": "checkbox",
      "name": "qualities",
      "visibleIf": "{cars} notempty",
      "title": "Which qualities of these cars you would like to rate?",
      "choices": [
        "Style", "Performance",
        "Comfort", "Safety",
        "Overall quality"
      ],
      "defaultValue": [ "Comfort", "Safety" ],
      "colCount": 2
    },
    {
      "type": "matrixdropdown",
      "name": "car-ratings",
      "visibleIf": "{cars} notempty and {qualities} notempty",
      "title": "Please rate the selected cars",
      "columnsVisibleIf": "{qualities} contains {item}",
      "rowsVisibleIf": "{cars} contains {item}",
      "cellType": "rating",
      "columns": [
        {
          "name": "Style",
          "rateType": "stars",
          "rateCount": 3,
          "rateMax": 3
        },
        {
          "name": "Performance",
          "rateType": "stars",
          "rateCount": 3,
          "rateMax": 3
        },
        {
          "name": "Comfort",
          "rateType": "stars",
          "rateCount": 3,
          "rateMax": 3
        },
        {
          "name": "Safety",
          "rateType": "stars",
          "rateCount": 3,
          "rateMax": 3
        },
        {
          "name": "Overall quality",
          "rateType": "stars",
          "rateCount": 3,
          "rateMax": 3
        }
      ],
      "rows": [
        "Audi", "BMW", "Citroen",
        "Ford", "Mercedes-Benz", "Nissan",
        "Peugeot", "Tesla", "Toyota",
        "Vauxhall", "Volkswagen"
      ]
    }
  ]
};
```

### `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";

@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);
        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/change-visibility-of-rows-in-matrix-table/reactjs.md)
- [Vue 3](https://surveyjs.io/form-library/examples/change-visibility-of-rows-in-matrix-table/vue3js.md)
- [jQuery](https://surveyjs.io/form-library/examples/change-visibility-of-rows-in-matrix-table/jquery.md)
- [Vanilla JS](https://surveyjs.io/form-library/examples/change-visibility-of-rows-in-matrix-table/vanillajs.md)