Angular2 @Input to a property with get/set

Question

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();
}

How and where to do you bind to [allowDay]="....". If the field (setter) name and the property name you want to use for binding are the same, you can omit the parameter for @Input(...)`. — Günter Zöchbauer
– Günter Zöchbauer, Commented Apr 16, 2016 at 10:29
I would be curious to see how yo set up your unit test if you went the route of using get set as shown in the accepted answer. — Winnemucca
– Winnemucca, Commented Jan 8, 2018 at 22:12
Whatever you end up doing make sure to put a breakpoint, or debug statement, or counter inside your setter to make sure it is only firing once as expected. I just found mine was being updated for every change detection run causing horrible performance and quirky behavior. — Simon_Weaver
– Simon_Weaver, Commented Feb 14, 2018 at 23:53

Yuri · Accepted Answer · 2020-09-10 15:37:36Z

496

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.

edited Sep 10, 2020 at 15:37

Yuri

4,5482 gold badges32 silver badges48 bronze badges

answered Apr 15, 2016 at 17:48

Thierry Templier

203k44 gold badges407 silver badges365 bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

Paul Cavacas Over a year ago

I get the following error Can't bind to 'allowDay' since it isn't a known native property. See updated question for exactly what I changed the code to

Thierry Templier Over a year ago

Are you sure? It works for me. I added a plunkr. Perhaps you forgot to add the directive into the directives attribute of the component where you want to use it... I updated my answer.

user24950814234 Over a year ago

This is a bad idea because if you use the setter, ngOnChanges doesn't fire.

PaulCo Over a year ago

On angular Fundamentals pages

Nickofthyme Over a year ago

WARNING: The setter will NOT be triggered by mutations to values which are passed by reference (i.e. pushing to an array, mutating an object, etc.). You would need to replace the whole value being passed as an Input for the setter to trigger again.

|

Martin Schneider · Accepted Answer · 2024-10-14 07:31:34Z

102

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;
}

edited Oct 14, 2024 at 7:31

answered Nov 23, 2016 at 12:04

Martin Schneider

15.7k8 gold badges63 silver badges64 bronze badges

8 Comments

Mese Over a year ago

Just curious, is there any benefit for using ngOnChanges vs not using the set property if you are only interested on a setter logic?

Martin Schneider Over a year ago

There is no difference in "using ngOnChanges vs not using set"... ;) Joking aside: One benefit is, if your component has multiple @Input properties and you want to call a routine when any of them has changed. So less code needed.

Mese Over a year ago

Ups, had a typo hehe. But ok, thought it might had more relevance. Thanks for the answer tho :)

Simon_Weaver Over a year ago

@MA-Maddin I suppose you could also set a debounced observable if you were expecting multiple changes all at the same time that would each result in a routine needing to be run.

David Duman Over a year ago

Heads up... if your input type is an Interface, OnChanges does not catch attribute value changes.

|

George Kagan · Accepted Answer · 2016-11-21 20:18:41Z

14

@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

edited Nov 21, 2016 at 20:18

George Kagan

6,1448 gold badges50 silver badges50 bronze badges

answered Nov 21, 2016 at 19:52

maxi-code

3212 silver badges8 bronze badges

2 Comments

maxi-code Over a year ago

This bug got me crazy, I finally found that you should define the Input() first (getter or setter but the input decorator must go first)

maxi-code Over a year ago

Here's other reference that may help https://github.com/angular/angular/issues/5477

Chellappan வ · Accepted Answer · 2023-06-03 14:19:13Z

4

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

answered Jun 3, 2023 at 14:19

Chellappan வ

27.9k4 gold badges39 silver badges69 bronze badges

3 Comments

Anurag Dec 5, 2024 at 11:59

Can we also add custom logic to format the input?

Chellappan வ Dec 6, 2024 at 9:40

@Anurag yes you can

Anurag Dec 9, 2024 at 6:14

Filtering the data here in any way doesn't work. I'm receiving the dataSource for a dropdown here. And if I filter it in any way, the items are no longer clickable in the dropdown. The only way that work is creating a second data-member to store the filtered data. @Input set dataInput(value) { this.data = value; }

desertnaut · Accepted Answer · 2022-08-17 20:48:12Z

1

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.

edited Aug 17, 2022 at 20:48

desertnaut

60.8k32 gold badges155 silver badges183 bronze badges

answered Dec 17, 2018 at 13:41

Luckylooke

4,6694 gold badges39 silver badges61 bronze badges

Collectives™ on Stack Overflow

Angular2 @Input to a property with get/set

5 Answers 5

10 Comments

8 Comments

2 Comments

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

10 Comments

8 Comments

2 Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related