javascript – Not Getting the mat-select value with angular virtual scroll

I have shared my code below, please help me out.

<mat-select multiple (openedChange)=”openChange($event)” formControlName=”itemSelect”>

{{ itemTrigger }}

<mat-option *cdkVirtualFor=”let list of skillSet” (value)=”” (onSelectionChange)=”onSelectionChange($event)”>

<mat-error *ngIf=”!addCompany.controls(‘itemSelect’).valid && addCompany.controls(‘itemSelect’).touched”>
{{ titleAlert }}

itemSelect = new FormControl();
public _cdr: ChangeDetectorRef,
private formBuilder: FormBuilder
) {
this.itemSelect.valueChanges.forEach(v => {
console.log(“value changes”, v);
this.selectedItem = v;
this.itemTrigger = v;
console.log(“triggering value: “, this.itemTrigger);

ngOnInit(): void {
selectedItem: any;
_itemTrigger: any;
get itemTrigger(): string {
return this._itemTrigger;
set itemTrigger(v: string) {
this._itemTrigger = v;
openChange($event: boolean) {
console.log(“open change”, $event);
if ($event) {
} else {
onSelectionChange(change: MatOptionSelectionChange) {
if (change.isUserInput) {
console.log(“onSelectionChange”, change.source.value);
this.selectedItem = change.source.value;
console.log(“triggered item “, this.selectedItem);



angular – Mat-select input composed object

I am struggling to input a composed value into a select. Let’s say our object only contain an ID and a name, an usual way to have a working select would be to do :

      <mat-option *ngFor="let i of fooCollection" (value)="">

Now to feed a value, I found this working example in the documentation which simply add a ((value)) option into the mat-select tag, but since we got a composed object here it doesn’t work anymre.

Any idea on how to solve this ? Many thanks !

typescript – How to update the values ​​of the same component during several angular selections using mat-select?

I make a pizza order app and I have a MenuComponent, which lists all of the menu items provided by the restaurant.

Now these items are displayed as individual cards with all the information. I also offer an option to customize the item with multiple trims.

Now the problem here is that I display the base price of the item, as soon as the user makes the selection for an additional trim, I want to update the base price with the 39; addition of additional costs.

Here's what my menu.component.html looks like:



{{}} {{item.category}}
$ {{item.price_large}}
Extra Toppings {{}}

the div the tag is where I display the base price, and also the same place where I want to update it, when additional toppings are chosen. I read somewhere to use the 2-way binding approach, but at the moment I'm not getting any whiplash and I'm stuck and don't know how to continue.

And also how to reflect only the changes for this particular element.

angularjs directives – Angular: @Input does not work with select / mat-select

Hello, I am creating reusable components with angular 8, and I have to change the parameters between them using the @Input decorator, but that does not work when I use native mat-select or select because the options are not available. not appear.

See my code:

Component call:

I-select component:

  // tslint:disable-next-line: component-selector
  selector: 'i-select',
  templateUrl: './select.component.html',
  encapsulation: ViewEncapsulation.None
export class SelectComponent implements OnInit {
  @Input() data: any;

  @Input() label: string;

  @Output() event = new EventEmitter();
  constructor() { }

  ngOnInit() {
    if ( !== undefined) { = JSON.parse(;

And my SelectComponentHtml:


What's wrong?