Issue
I am trying to display a list of chips with predefined values to a user, and let user select some of them. My goal is selection of multiple chips by clicking, with reaction in accordance.
The problem is, that not a single event is emitted.
What I am doing wrong?
manage-roles.component.html
<mat-chip-list [selectable]="true" [multiple]="true"
(change)="onChange($event)">
<mat-chip *ngFor="let role of possibleRoles"
[selectable]="true" (selectionChange)="onChipSelect($event)">
{{role}}
</mat-chip>
</mat-chip-list>
manage-roles.component.html
@Component({
selector: 'hr-manage-roles',
templateUrl: './manage-roles.component.html'
})
export class ManageRolesComponent implements AfterViewInit {
@ViewChild(MatChipList) chipList: MatChipList;
possibleRoles: string[] = Roles; // some const
ngAfterViewInit(): void {
this.chipList.chipSelectionChanges.subscribe(change => {
console.log(change); // not fires
})
}
onChange(change: MatChipListChange){
console.log(change); // not fires
}
onChipSelect(change: MatChipSelectionChange) {
console.log(change); // not fires
}
}
package.json
"dependencies": {
"@angular/animations": "^5.0.0",
"@angular/cdk": "^5.0.0",
"@angular/common": "^5.1.0",
"@angular/compiler": "^5.1.0",
"@angular/core": "^5.1.0",
"@angular/flex-layout": "^2.0.0-beta.10-4905443",
"@angular/forms": "^5.0.0",
"@angular/http": "^5.1.0",
"@angular/material": "^5.0.0",
"@angular/platform-browser": "^5.0.2",
"@angular/platform-browser-dynamic": "^5.0.0",
"@angular/router": "^5.0.0",
"core-js": "^2.4.1",
"rxjs": "^5.5.2",
"zone.js": "^0.8.14"
},
"devDependencies": {
"@angular/cli": "1.5.2",
"@angular/compiler-cli": "^5.0.0",
"@angular/language-service": "^5.0.0",
"@types/jasmine": "~2.5.53",
"@types/jasminewd2": "~2.0.2",
"@types/node": "~6.0.60",
"codelyzer": "~3.2.0",
"jasmine-core": "~2.6.2",
"jasmine-spec-reporter": "~4.1.0",
"karma": "~1.7.0",
"karma-chrome-launcher": "~2.1.1",
"karma-cli": "~1.0.1",
"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": "~3.2.0",
"tslint": "~5.7.0",
"typescript": "~2.4.2"
}
Solution
Tried using (click)
instead of selectionChange event and it worked. I had several similar issues while working with material components. Anyway, if you are happy with just the data on the Chip and not the actual component, you can achieve what you want doing this:
<mat-chip-list class="mat-chip-list-stacked" [selectable]="true" [multiple]="true">
<mat-chip *ngFor="let chip of availableColors" (click)="selectMe(chip)">
{{chip.name}}
</mat-chip>
</mat-chip-list>
public selectMe(event: any) {
console.log(event);
}
Demo here
Answered By - jpgrassi
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.