Questions tagged [angular2-hostbinding]

56 questions
2
votes
1 answer

Why @HostBinding is triggered continuously even though the variable didn't changed? (Angular)

I joined a new Angular project and on the app.component.ts are some @HostBindings that are called non-stop even though there is no direct event that is triggered. Ex.: settings = { layout: { isCollapsed: false…
2
votes
1 answer

HostBinding not binding to CSS variable

I am trying to bind a variable in my angular component to a variable inside a CSS keyframe that I am using to animate a div dynamically. I came across HostBinding as a potential solution however I (think) I followed the declaration correctly but the…
MF Boom
  • 23
  • 3
2
votes
0 answers

Angular 6: Host binding in directive is not two way binding?

I am working on Angular 6 on a pretty simple example. I am creating a Directive that I can put on my textareas so that they resize themselves automatically. However, I have an issue using host binding. I want to check if resize is needed before…
Max
  • 21
  • 2
2
votes
3 answers

Angular 6 HostBinding with multiple values?

I have successfully used @HostBinding in my Angular 6 app to apply properties to the host component, as in applying a class when a variable is true: @HostBinding('class.compact-ui') isCompact; Now, however, I need to assign one of 4 possible classes…
Steve
  • 14,401
  • 35
  • 125
  • 230
2
votes
2 answers

Angular HostBinding (get with parameter?)

I have a component with a numeric input. And based on that input value, I want to set a width to the component. I need to do it via class, because the width is calculated through sass variables and it is possible that it will be changed. So I have…
Laker
  • 1,622
  • 4
  • 20
  • 32
2
votes
1 answer

How can I add an unknown class with HostBinding?

I want to use HostBinding decorator in order to add a class, which cannot be hardcoded like @HostBinding('class.myClass'). I know there is a possibility to bind it to the whole class attribute like @HostBinding('class'), but that will obviously…
Clem
  • 11,334
  • 8
  • 34
  • 48
2
votes
0 answers

Using HostBinding, HostListener rather than :host

I'm building a service and I need to remove the host property. I know this isn't going to break my application, but how would I go about doing this. I currently have @Directive({ selector: '[phoneMask]', host: { …
Rafael
  • 3,593
  • 3
  • 17
  • 27
2
votes
1 answer

Using Angular @HostBinding inside directive to set and update attribute values on host

So, let's say I have the following directive:
import { Directive, HostBinding } from '@angular/core'; @Directive({ selector: '[foo]' }); export class FooDirective { x: number; constructor() { this.x = 100; …
katyusha
  • 151
  • 1
  • 11
2
votes
1 answer

Angular 2 : @HostBinding with an Input object property

Is it possible to bind a @HostBinding value like this example ? @Input() user: User; @HostBinding("class.temp") user.role == "Admin" I know I can do this : private _user: User; @Input() set user(user: User) { this._user = user; this.temp =…
Mattew Eon
  • 1,722
  • 1
  • 21
  • 38
1
vote
0 answers

Why is my *ngFor list being reloaded when @HostListener event fires

I have a custom directive using a HostListener to detect when the mouse enters a list element, and using HostBinding to change the background color of the element. @HostBinding('style.backgroundColor') backgroundColor: string; …
njran
  • 11
  • 2
1
vote
0 answers

Angular: ChangeDetection Interferes with HostBinding

I'm trying to implement an Animate On Scroll library/helper based on this idea Wizdm Genesys I have a service that emits an IntersectionInfo (IsIntersecting, Direction, IsEntering, etc. ) object when an element intersects with the viewport. I…
1
vote
1 answer

Set an HTML class to host in an Angular directive

How would you do to add and set an HTML class that can be changed with a parameter, with an Angular directive ? Let's say we have a div with an already existing class, but no directive :
Now, we want to attach a…
1
vote
1 answer

HostBinding a FormControl to a input within a Directive

I am having trouble adding a formControl to a input via a HostBinding inside a directive attached to the Input. Please let me know if this is a possible approach and if so how to do it. Input The Directive…
1
vote
1 answer

@HostBinding initial @Input value ignored

I have a directive that helps with adding toggle effects to various elements. export class AlloyToggleDirective { private toggled = false; @Input('alloyToggled') @HostBinding('class.alloy-toggled') get isToggled() { return…
Anthony
  • 7,638
  • 3
  • 38
  • 71
1
vote
2 answers

Angular 6 what is the difference between @HostBinding('class') and @HostBinding('attr.class')

I'm inspecting the source code of an Angular 6 project and saw the usage of both @HostBinding('class') and @HostBinding('attr.class'). I changed one of the implementations from @HostBinding('class') to @HostBinding('attr.class') and did not notice…
KlavierCat
  • 168
  • 2
  • 14