TS2551: Property 'option' does not exist on type 'MatSelectionListChange'. Did you mean 'options'?

[monajalal]

Is this a regression?

• Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

No response

Description

(I am new to Angular as of last week)

I am trying to reproduce dimo-labling git repo for Web-based UI of 6D pose annotation tool.

I get the following error:

(dimo-labeling) mona@ada:~/dimo-labeling/frontend$ ng serve
Workspace extension with invalid name (defaultProject) found.
Option "browserTarget" is deprecated: Use 'buildTarget' instead.
⠋ Generating browser application bundles (phase: setup)...    TypeScript compiler options "target" and "useDefineForClassFields" are set to "ES2022" and "false" respectively by the Angular CLI. To control ECMA version and features use the Browserslist configuration. For more information, see https://angular.io/guide/build#configuring-browser-compatibility
    NOTE: You can set the "target" to "ES2022" in the project's tsconfig to remove this warning.
✔ Browser application bundle generation complete.

Initial chunk files   | Names         |  Raw size
vendor.js             | vendor        |   6.66 MB | 
styles.css, styles.js | styles        | 399.99 kB | 
polyfills.js          | polyfills     | 336.44 kB | 
main.js               | main          | 153.51 kB | 
scripts.js            | scripts       |  32.99 kB | 
runtime.js            | runtime       |   6.51 kB | 

                      | Initial total |   7.57 MB

Build at: 2024-03-25T19:10:13.161Z - Hash: 5cadd8a72f282b85 - Time: 4654ms

Warning: /home/mona/dimo-labeling/frontend/src/app/image-render-overlay/image-render-overlay.component.ts depends on 'panzoom'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies



Error: src/app/app.component.html:24:76 - error TS2551: Property 'option' does not exist on type 'MatSelectionListChange'. Did you mean 'options'?

24                             (selectionChange)="selectPositionedPart($event.option.value)">
                                                                              ~~~~~~

  src/app/app.component.ts:18:16
    18   templateUrl: './app.component.html',
                      ~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component AppComponent.




** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **


✖ Failed to compile.

I have:

(dimo-labeling) mona@ada:~/dimo-labeling/frontend$ ng version
Workspace extension with invalid name (defaultProject) found.

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/
    

Angular CLI: 17.3.2
Node: 20.9.0
Package Manager: npm 10.1.0
OS: linux x64

Angular: 17.3.1
... animations, cdk, common, compiler, compiler-cli, core, forms
... material, platform-browser, platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1703.2
@angular-devkit/build-angular   17.3.2
@angular-devkit/core            17.3.2
@angular-devkit/schematics      17.3.2
@angular/cli                    17.3.2
@schematics/angular             17.3.2
rxjs                            7.8.1
typescript                      5.4.3
zone.js                         0.14.4
    

and

(dimo-labeling) mona@ada:~/dimo-labeling/frontend$ cat package.json 
{
  "name": "frontend",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~17.3.1",
    "@angular/cdk": "^17.3.1",
    "@angular/common": "~17.3.1",
    "@angular/compiler": "~17.3.1",
    "@angular/core": "~17.3.1",
    "@angular/forms": "~17.3.1",
    "@angular/material": "^17.3.1",
    "@angular/platform-browser": "~17.3.1",
    "@angular/platform-browser-dynamic": "~17.3.1",
    "@angular/router": "~17.3.1",
    "@types/three": "^0.162.0",
    "panzoom": "^9.4.3",
    "rxjs": "~7.8.1",
    "three": "^0.162.0",
    "tslib": "^2.6.2",
    "zone.js": "~0.14.4"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~17.3.2",
    "@angular/cli": "^17.3.2",
    "@angular/compiler-cli": "~17.3.1",
    "@types/jasmine": "~5.1.4",
    "@types/node": "^20.11.30",
    "jasmine-core": "~5.1.2",
    "karma": "~6.4.3",
    "karma-chrome-launcher": "~3.2.0",
    "karma-coverage": "~2.2.1",
    "karma-jasmine": "~5.1.0",
    "karma-jasmine-html-reporter": "^2.1.0",
    "model": "^0.0.6",
    "typescript": "~5.4.3"
  }
}

If I change

(selectionChange)="selectPositionedPart($event.option.value)">

to

                  `(selectionChange)="selectPositionedPart($event.options[0].value)">`

the UI works but doesn't load Scenes or Images, as shown below,

(dimo-labeling) mona@ada:~/dimo-labeling/frontend$ ng serve
Workspace extension with invalid name (defaultProject) found.
Option "browserTarget" is deprecated: Use 'buildTarget' instead.
⠋ Generating browser application bundles (phase: setup)...    TypeScript compiler options "target" and "useDefineForClassFields" are set to "ES2022" and "false" respectively by the Angular CLI. To control ECMA version and features use the Browserslist configuration. For more information, see https://angular.io/guide/build#configuring-browser-compatibility
    NOTE: You can set the "target" to "ES2022" in the project's tsconfig to remove this warning.
✔ Browser application bundle generation complete.

Initial chunk files   | Names         |  Raw size
vendor.js             | vendor        |   6.66 MB | 
styles.css, styles.js | styles        | 399.99 kB | 
polyfills.js          | polyfills     | 336.44 kB | 
main.js               | main          | 153.52 kB | 
scripts.js            | scripts       |  32.99 kB | 
runtime.js            | runtime       |   6.51 kB | 

                      | Initial total |   7.57 MB

Build at: 2024-03-25T19:13:06.165Z - Hash: c1ff3d16f683b71f - Time: 4131ms

Warning: /home/mona/dimo-labeling/frontend/src/app/image-render-overlay/image-render-overlay.component.ts depends on 'panzoom'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies



** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **


✔ Compiled successfully.

I have:

In this UI, clicking on Scenes or Images is not responsive but I am able to click on Part and select 1.

More details pderoovere/dimo-labeling#5

Reproduction

StackBlitz link:
Steps to reproduce:
1.
2.
Please check description

Expected Behavior

To be able to see what the dimo-labeling author shows in his video (able to click on Scene and Image and select the numbers)

Currently, when I click, it only gets blue but the numbers don't show

Actual Behavior

Scene and Image gets selected but I can't see the numbers.

Environment

• Angular:
• CDK/Material:
• Browser(s):
• Operating System (e.g. Windows, macOS, Ubuntu):

(dimo-labeling) mona@ada:~/dimo-labeling/frontend$ ng version
Workspace extension with invalid name (defaultProject) found.

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/
    

Angular CLI: 17.3.2
Node: 20.9.0
Package Manager: npm 10.1.0
OS: linux x64

Angular: 17.3.1
... animations, cdk, common, compiler, compiler-cli, core, forms
... material, platform-browser, platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1703.2
@angular-devkit/build-angular   17.3.2
@angular-devkit/core            17.3.2
@angular-devkit/schematics      17.3.2
@angular/cli                    17.3.2
@schematics/angular             17.3.2
rxjs                            7.8.1
typescript                      5.4.3
zone.js                         0.14.4

Browser: Chrome Version 118.0.5993.88 (Official Build) (64-bit)

OS:

(base) mona@ada:~$ uname -a
Linux ada 6.5.0-25-generic #25~22.04.1-Ubuntu SMP PREEMPT_DYNAMIC Tue Feb 20 16:09:15 UTC 2 x86_64 x86_64 x86_64 GNU/Linux

(base) mona@ada:~$ lsb_release -a
LSB Version:	core-11.1.0ubuntu4-noarch:security-11.1.0ubuntu4-noarch
Distributor ID:	Ubuntu
Description:	Ubuntu 22.04.3 LTS
Release:	22.04
Codename:	jammy

[crisbeto]

It's because the event emitted by selectionChange doesn't have an option field. You should read the option that was toggled through the options field instead.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}