Angular ReUsable mat-select component with onSelectionChange event

0
votes

I want to make a generic reusable mat-select component, so I can use it accross multiple components in my Angular app. So far I have got it working, but only challenge Im facing now is how to make the "onSelectionChange($event)" to run on different implementations.

reusable-select-component.html

<mat-form-field>
  <mat-select>
    <mat-option *ngFor="let option of options" [value]="option.value">
      {{ option.text }}
    </mat-option>
  </mat-select>
</mat-form-field>

reusable-select-component.ts

import { Component, OnInit, Input } from '@angular/core';
import { FormControl, Validators } from '@angular/forms';
import { DropdownOption } from '../../models/DropdownOption';

@Component({
  selector: 'reusable-select',
  templateUrl: './reusable-select-component.html',
  styleUrls: ['./reusable-select-component.scss'],
})
export class ReusableSelectComponent implements OnInit {
  @Input() control: FormControl;
  @Input() options: DropdownOption[];

  constructor() {}

  ngOnInit() {}
}

page-component.html

<reusable-select
    [control]="control"
    [options]="dropDownOptions"
    (selectionChange)="onChange($event)"
  ></reusable-select>

page-component.ts

@Input() control: FormControl;
@Input() dropDownOptions: DropdownOption[] = [];

public ngOnInit() {
    this.dropDownOptions.push({
      value: 1,
      text: 'Test 1',
    });

    this.dropDownOptions.push({
      value: 2,
      text: 'Test 2',
    });

    this.dropDownOptions.push({
      value: 3,
      text: 'Test 3',
    });
}

My question is how do I call onSelectionChange() in the pages I implement? onSelectionChange will be different from one implementation to other, so I cant define that on the component itself, but the function should be implemented on the page which implement this reusable component.

There will be also some pages where the onSelectionChange is not needed, but just act like normal dropdown without function call.

1
angular

1 Answers

1
votes

reusable-select-component.html

<mat-form-field>
  <mat-select (selectionChange)="onSelectionChange($event)">
    <mat-option *ngFor="let option of options" [value]="option.value">
      {{ option.text }}
    </mat-option>
  </mat-select>
</mat-form-field>

reusable-select-component.ts

import { Component, EventEmitter, OnInit, Output } from '@angular/core';
import { MatSelectChange } from '@angular/material/select';
import { FormControl, Validators } from '@angular/forms';
import { DropdownOption } from '../../models/DropdownOption';

@Component({
  selector: 'reusable-select',
  templateUrl: './reusable-select-component.html',
  styleUrls: ['./reusable-select-component.scss'],
})
export class ReusableSelectComponent implements OnInit {
  @Input() control: FormControl;
  @Input() options: DropdownOption[];
  @Output() selectionChange = new EventEmitter<MatSelectChange>();

  constructor() {}

  ngOnInit() {}

  onSelectionChange(event) {
    this.selectionChange.next(event);
  }
}

page-component.ts

  onSelectionChange(event) {
    console.log(event)
  }

page-component.html

<reusable-select (selectionChange)="onSelectionChange($event)></reusable-select>