I'm looking to create a custom, reusable Angular Material component for a slide toggle. I want to be able to pass different click functions into it and get the MatSlideToggleChange object back. Instead I get 'undefined'.

Here is my custom component ts and html files:

```
<mat-slide-toggle
[id]="toggleId"
color="primary"
labelPosition="after"
[required]="isRequired"
[formControlName]="controlName"
(change)="toggleClick.emit($event)"
[tabIndex]="tabNumber"
[disabled]="isDisabled"
[matTooltip]="toolTip"
>{{toggleText}}</mat-slide-toggle>

export class CustomSlideToggleComponent {

  @Input() public toolTip: string = '';
  @Input() public isDisabled: boolean = false;
  @Input() public isRequired: boolean = false;
  @Input() public toggleText: string = '';
  @Input() public tabNumber: number = null;
  @Input() public toggleId: string;
  @Input() public controlName: string = '';

  @Output() public readonly toggleClick = new EventEmitter<MatSlideToggleChange>();

  public constructor() { }
}

```

I've tried to implement it this way using this html:

```
<custom-slide-toggle
        [toggleId]="'enable_user'"
        [controlName]="'enableUser'"
        [toggleClick]="onEnableUser(toggleEvent)"
        [tabNumber]="5"
        [toggleText]="'A custom slide toggle'"
      ></custom-slide-toggle>

```

and this in the typescript:

```
public toggleEvent: MatSlideToggleChange;

public onEnableUser($event: MatSlideToggleChange) {
   console.log('toggle was clicked' + $event);
}

```

When I click on the slide toggle $event always comes back 'undefined'. How can I use different click functions with this custom component?
['https://Stackoverflow.com/questions/67794186', 'https://Stackoverflow.com', 'https://Stackoverflow.com/users/2026659/']
I see two potential issues with your usage of the `custom-slide-toggle`:

1. `toggleClick` should be binded with `(toggleClick)` as it's only an `Output`:

```html
        (toggleClick)="onEnableUser(toggleEvent)"

```

2. `toggleEvent` is not the event variable, it should be `$event`:

```html
        (toggleClick)="onEnableUser($event)"

```
Event binding is with parentheses so i think that

```
(toggleClick)="onEnableUser(toggleEvent)"

```

should work.