Questions tagged [angular2-hostbinding]
56 questions
24
votes
3 answers
Angular 2: Get position of HTML element
I'm trying to implement a custom directive in Angular 2 for moving an arbitrary HTML element around. So far everything is working except that I don't now how to get the initial position of the HTML element when I click on it and want to start…
tzwickl
- 1,341
- 2
- 15
- 31
18
votes
3 answers
Use @HostBindings instead host in angular 4
I just try to make animation with angular 4 and I saw tutorial that use host in the component
import { Component, OnInit, HostBinding } from '@angular/core';
import { AngularFire, AuthProviders, AuthMethods } from 'angularfire2';
import { Router }…
Manspof
- 598
- 26
- 81
- 173
17
votes
5 answers
onbeforeunload confirm dialog not showing when angular2 @HostListener is used
Using @HostListener hook, but confirm dialog (that asks: Do you want to Leave this page? ...or Do you want to Reload this page?) is not showing.
The code works, but the confirm dialog is not showing.
Here what I have: …
raneshu
- 363
- 2
- 16
- 46
12
votes
2 answers
Inject Style Declarations Using Hostbinding in Angular
Do you guys know how I can batch inject style declarations in a component using the @HostBinding decorator?
What I am trying is:
@HostBinding('style')
get style(): CSSStyleDeclaration {
return {
background: 'red',
color: 'lime'
} as…
Andrei Voicu
- 740
- 1
- 6
- 13
12
votes
2 answers
Conditional @HostBinding depending on @Input()
I'm trying to bind the CSS class foo to my host component, using @HostBinding depending on a test I do on a dynamic variable.
But can't manage to make it work properly.
Here's what I already tried:
export class MyComponent {
@Input()
public…
Alexis Facques
- 1,783
- 11
- 19
8
votes
2 answers
Apply attribute directive on component in Angular 4
I have created img-pop component which has @Input() bind property src.
I have created authSrc directive which has @HostBinding() property src.
@Component({
selector: 'img-pop',
template: `![]()
…
Naveen raj
- 891
- 1
- 10
- 18
7
votes
2 answers
Dynamically add classes to host elements using @HostBinding in Angular?
Question:
Is it possible to use @HostBinding in such a way to add, remove, or toggle classes on a host element and not remove preexisting classes, in particular when the classes need to be dynamically toggled ?
For example, this will add light class…
Armeen Moon
- 18,061
- 35
- 120
- 233
6
votes
3 answers
Set Angular animation param with Host Binding
I have been trying to set animation param using @HostBinding decorative, but it seems not to work, what am I missing
animations: [
trigger('animateMe', [
state('void', style({ opacity: 0 })),
transition(':enter, :leave', [ // void…
Sibiraj
- 4,486
- 7
- 33
- 57
5
votes
1 answer
mouseenter / mouseleave with @HostListener
The flickering is killing me and after reading all the jQuery related threads and mdn I still cannot figure it out.
So I have this @Directive for showing a tooltip and this is how I bind it to the elements:
@HostListener('mouseenter', ['$event'])…
pop
- 3,464
- 3
- 26
- 43
4
votes
1 answer
How to add a class to the invoked Angular component itself?
If my main/parent component has the following:
CPHPython
- 12,379
- 5
- 59
- 71
4
votes
4 answers
Angular @HostBinding, simple example and fundamentals
I would understand very well the Angular @HostBinding concept. Unfortunately, my book is very good but this concept is not very clearly explained.
See please the code:
@Component({
selector: 'app-test-component',
templateUrl:…
Archimede
- 699
- 3
- 15
- 28
4
votes
2 answers
no-unused-variable TSLint rule does not work with private @HostBinding
In my TSLint file, I have:
"no-unused-variable": true
In my components, I sometimes have:
// tslint:disable-next-line:no-unused-variable
@HostBinding('class') private classes = 'my-theme';
Because classes is private, TSLint complains, so I have to…
Dolan
- 1,519
- 4
- 16
- 36
4
votes
2 answers
What could I have like parameter to @HostBinding decorator?
Can't find documentation for it.
From examples I got 3 cases:
@HostBinding("attr.something")
@HostBinding("class.something")
@HostBinding("style.something")
but is there more?
Stepan Suvorov
- 25,118
- 26
- 108
- 176
3
votes
1 answer
What should I use instead of @HostBinding("@grow") in Angular 9?
I have this directive that I use to animate changes in height of components. But since we updated from Angular 8 to 9 it almost looks like the hostPropertyName @grow is no longer supported. This is the directive:
import {
Directive,
OnChanges,
…
Douwe de Vries
- 101
- 1
- 5
2
votes
1 answer
How do I use @Hostbinding in Angular to style a dynamic component?
I'm currently working on an Angular project that creates a bunch of dynamic components and I want each one to have a different color based upon the results of a call to a service that it makes on initialization. The code for the component is as…
JCrew0
- 89
- 1
- 13