How to use @HostBinding with @Input properties in Angular 2?

Question

(Angular 2 RC4)

With @HostBinding we should be able to modify properties of the host, right? My question is, does this apply to @Input() properties as well and if so, what is the correct usage? If not, is there another way to achieve this?

I made a Plunker here to illustrate my problem: https://embed.plnkr.co/kQEKbT/

Suppose I have a custom component:

@Component({
  selector: 'custom-img',
  template: `
    <img src="{{src}}">
  `
})
export class CustomImgComponent {
  @Input() src: string;
}

And I want to feed the src property with an attribute directive:

@Directive({
  selector: '[srcKey]'
})
export class SrcKeyDirective implements OnChanges {
  
  @Input() srcKey: string;
  @HostBinding() src;
  
  ngOnChanges() {
    this.src = `https://www.google.com.mt/images/branding/googlelogo/2x/${this.srcKey}_color_272x92dp.png`;
  }
}

Why can't this directive change the [src] input property of the custom component?

@Component({
  selector: 'my-app',
  directives: [CustomImgComponent, SrcKeyDirective],
  template: `<custom-img [srcKey]="imageKey"></custom-img>`
})
export class AppComponent {
  imageKey = "googlelogo";
}

Thanks!

khollenbeck · Accepted Answer · 2017-02-02 21:05:01Z

119

You need to combine the decorators like this:

@HostBinding('class.active') @Input() active: boolean = false;

edited Feb 2, 2017 at 21:05

khollenbeck

16.2k18 gold badges68 silver badges102 bronze badges

answered Aug 26, 2016 at 8:25

Piizei

1,2791 gold badge8 silver badges10 bronze badges

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

4 Comments

hugo der hungrige Over a year ago

What would I do if my input is an object and I want to bind a property of this object?

Robert Koritnik Over a year ago

@hugoderhungrige Did you happen to resolve this issue? How to do host binding on a property of an object...

SystemR Over a year ago

@RobertKoritnik check my answer, it allows you to use property of an object

Jesse Dhillon Over a year ago

Classic Stack Overflow: scroll to the bottom to find the right answer.

BuZZ-dEE · Accepted Answer · 2021-01-16 00:50:58Z

20

If your @Input is an object, you can do:

@Input() settings: Settings;

@HostBinding('class.active')
public get isActive(): boolean {
  return this.settings.isActive;
}

edited Jan 16, 2021 at 0:50

BuZZ-dEE

7,15316 gold badges75 silver badges105 bronze badges

answered Feb 8, 2018 at 18:12

SystemR

3132 silver badges8 bronze badges

1 Comment

Frank N Over a year ago

Gave me trouble. See my answer above

Günter Zöchbauer · Accepted Answer · 2016-08-04 15:50:16Z

9

@HostBinding() doesn't create property bindings to properties of the host component. That might be worth a bug report though ;-)

I got it working by a workaround with exportAs and a template variable but that is quite ugly. https://plnkr.co/edit/TobNVn?p=preview

After some consideration, I think it should work. Otherwise I wouldn't know what @HostBinding() src; would do at all.

@HostBinding('attr.src') src; or @HostBinding('class.src') src; are the more common cases.

answered Aug 4, 2016 at 15:50

Günter Zöchbauer

661k235 gold badges2.1k silver badges1.6k bronze badges

3 Comments

Laurens Over a year ago

Thank you for the quick response. I made a bug report here: github.com/angular/angular/issues/10499

Patrick Hillert Over a year ago

This answer has too much text noise, it's a bit unclear what's the solution.

minigeek Over a year ago

not applicable in 2021, check Piizei 's answer

BuZZ-dEE · Accepted Answer · 2021-01-16 23:58:57Z

6

declare hostbinding property with input property.

@HostBinding('attr.aaa') @Input() aaa: boolean = false;

set hostbinding property to input property

@Input() aaa: string;
@HostBinding('attr.bbb') ccc: string;

ngOnInit(){
  this.ccc = this.aaa;
}

edited Jan 16, 2021 at 23:58

BuZZ-dEE

7,15316 gold badges75 silver badges105 bronze badges

answered Feb 26, 2020 at 3:29

dabeng

1,51219 silver badges8 bronze badges

1 Comment

Frank N Over a year ago

as of Angular 8.2, Hostbinding (in my case: for Angular animation) does work like this: @HostBinding('@childAnim') @Input() shrink = false;

nvvetal · Accepted Answer · 2021-10-13 15:01:11Z

3

@Input() appFallback: string;

@HostBinding('attr.src') @Input() src: string;

@HostListener('error') loadFallback(): void {

  if (this.src === this.appFallback) {
    return;
  }
  this.src = this.appFallback;
}

answered Oct 13, 2021 at 15:01

nvvetal

1,7931 gold badge17 silver badges22 bronze badges

Comments

Frank N · Accepted Answer · 2020-10-10 12:33:27Z

BEWARE on using get with hostbinding.

At least I an endless recursion (thousands of cycles). Put a console.log in the get function to check:

@HostBinding('@someAnim') get whatever() {
    console.log('#### traffic.....');
    return true;
}

I even got that trouble, when just changing some class (so nothing around fancy Angular animation) and not even relying on any other class member whatsoever:

@HostBinding('class.foobar') get _____() {
    console.log('#### more traffic.....');
    return true;
}

An addition, it doesn't hurt to have this in your component while developing (as a “free flow canary”):

ngOnChanges(changes: SimpleChanges) {
    console.log('#### more traffic.....');
}

You should only see one log entry per, say, state-change and instantiated component, anyway not thousands...

—At last— I had luck with this one:

distinct variable for incoming (@Input) and outgoing (@HostBinding)
changing the outgoing upon change
→ no „free flow“

    @Input() animTileAttrib = false;
    @HostBinding('@animTile') paramPack: AnimParams = { value: false, params: {}};

    ngOnChanges(changes: SimpleChanges) {
        console.log('#### traffic.....');
        if ('animTileAttrib' in changes) {
            this.paramPack = { value: changes.animTileAttrib.currentValue, params: {} };
        }
    }

Collectives™ on Stack Overflow

How to use @HostBinding with @Input properties in Angular 2?

6 Answers 6

4 Comments

1 Comment

3 Comments

1 Comment

Comments

BEWARE on using get with hostbinding.

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

4 Comments

1 Comment

3 Comments

1 Comment

Comments

BEWARE on using get with hostbinding.

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related