CODEWITHSUNDEEP
angular
Paul Cavacas
Paul Cavacas

Reputation: 4454

Angular2 @Input to a property with get/set

I have an Angular2 component in that component it currently has a bunch fields that have @Input() applied before them to allow binding to that property, i.e.

@Input() allowDay: boolean;

What I would like to do is actually bind to a property with get/set, so that I can do some other logic in the setter, something like the following

_allowDay: boolean;
get allowDay(): boolean {
    return this._allowDay;
}
set allowDay(value: boolean) {
     this._allowDay = value;
     this.updatePeriodTypes();
}

how would I do this in Angular2?

Based on Thierry Templier suggestion I changed it to, but that throws the error Can't bind to 'allowDay' since it isn't a known native property :

//@Input() allowDay: boolean;
_allowDay: boolean;
get allowDay(): boolean {
    return this._allowDay;
}
@Input('allowDay') set allowDay(value: boolean) {
    this._allowDay = value;
    this.updatePeriodTypes();
}

Upvotes: 301

Views: 419863

Answers (5)

Martin Schneider
Martin Schneider

Reputation: 15378

If you are mainly interested in implementing logic to the setter only:

import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';

// [...]

export class MyClass implements OnChanges {
  @Input() allowDay: boolean;

  ngOnChanges(changes: SimpleChanges): void {
    if(changes['allowDay']) {
      this.updatePeriodTypes();
    }
  }
}

The import of SimpleChanges is not needed if it doesn't matter which input property was changed or if you have only one input property.

Angular Docs: OnChanges

otherwise:

private _allowDay: boolean;

@Input() set allowDay(value: boolean) {
  this._allowDay = value;
  this.updatePeriodTypes();
}
get allowDay(): boolean {
  // other logic
  return this._allowDay;
}

Upvotes: 102

Chellappan வ
Chellappan வ

Reputation: 27293

In angular v16.1.0-next.3🎉

We can use transform property on inputs. If an input has a transform function, any values set through the template will be passed through the function before being assigned to the directive instance.

The example from above can be rewritten to the following:

@Input({ transform: booleanAttribute }) allowDay = false;

Example

Upvotes: 4

Luckylooke
Luckylooke

Reputation: 4539

Updated accepted answer to angular 7.0.1 on stackblitz here: https://stackblitz.com/edit/angular-inputsetter?embed=1&file=src/app/app.component.ts

directives are no more in Component decorator options. So I have provided sub directive to app module.

Upvotes: 1

Thierry Templier
Thierry Templier

Reputation: 202138

You could set the @Input on the setter directly, as described below:

_allowDay: boolean;
get allowDay(): boolean {
    return this._allowDay;
}
@Input() set allowDay(value: boolean) {
    this._allowDay = value;
    this.updatePeriodTypes();
}

See this Plunkr: https://plnkr.co/edit/6miSutgTe9sfEMCb8N4p?p=preview.

Upvotes: 493

maxi-code
maxi-code

Reputation: 321

@Paul Cavacas, I had the same issue and I solved by setting the Input() decorator above the getter.

  @Input('allowDays')
  get in(): any {
    return this._allowDays;
  }

  //@Input('allowDays')
  // not working
  set in(val) {
    console.log('allowDays = '+val);
    this._allowDays = val;
  }

See this plunker: https://plnkr.co/edit/6miSutgTe9sfEMCb8N4p?p=preview

Upvotes: 14

Related Questions