Questions tagged [angular2-hostbinding]
56 questions
0
votes
2 answers
Angular routerLink HostBinding
I want to add a routerLink to the Host Element in an Angular Component like this:
@HostBinding('routerLink') routerLink = '/my-route'
But when I click the component, it wont navigate to the specified route. What am I doing wrong? Is this even…
SanderThunder
- 63
- 9
0
votes
2 answers
How to use Show Class on DropDown in Angular
I am trying to use a Directive to activate dropdown menu in my Angular project. The class "open" has been deprecated since bootstrap 3 but I am currently using bootstrap 5 and how to use 'show' class instead of 'open'?
my Directive:
import {…
0
votes
2 answers
How to animate the :host element on :leave event using animations in Angular 12?
We have a very simple component that should be faded in and out on :enter and :leave events:
import { Component, HostBinding } from '@angular/core';
import { animate, style, transition, trigger } from '@angular/animations';
@Component({
selector:…
lampshade
- 2,470
- 3
- 36
- 74
0
votes
1 answer
Angular HostBinding in a custom directive not working inside an *ngFor
I have created a custom directive that adds / removes a class selector with a click event. Should be pretty straight forward, and it works fine as long as I'm using the directive outside an ngFor loop.
The directive is composed of the code…
Ahmed Yousry
- 25
- 7
0
votes
1 answer
How to toggle the text with a button that hides and shows password value in Angular
I am using an Angular Directive to toggle showing and hiding password fields in a form.
I have been able to achieve the overall objective of toggling the password's value however, I cannot seem to be able to toggle the text that is rendered in the…
kajoe14
- 3
- 2
0
votes
1 answer
Host Binding rearranges applied classes
I am using @HostBinding('class') to inject classes into the host element. The classes to be injected are generated based on user-supplied parameters. The problem I ran into and I could not find anyone else experiencing is that the classes are…
Bolorunduro Winner-Timothy
- 321
- 6
- 14
0
votes
1 answer
Why can I not use @HostBinding on shorthand CSS grid properties?
When using @HostBinding on shorthand CSS grid properties (e.g. using grid-row instead of grid-row-start and grid-row-end) the bindings don't work:
export class MyComponent {
@HostBinding('style.grid-row')
row = '1 / 2';
}
However using the…
Mike Jerred
- 9,551
- 5
- 22
- 42
0
votes
1 answer
Angular 6 component, apply css to class applied with hostbinding?
I normally use a global SCSS file in my apps, but today I wanted to make some scss scoped to just my component.
I have set a class on the component via @HostBinding (of class.card).
I can style items inside my component, such as the caard-body, but…
Steve
- 14,401
- 35
- 125
- 230
0
votes
1 answer
ExpressionChangedAfterItHasBeenCheckedError when passing the width of an element to my own directive.
I created my own directive for table header (thead tag). That makes that header of table is "sticky" (has fixed position and is visible during scroll table). It looks like that:
sticky.directive.ts
const NAVBAR_HEIGHT = 55;
@Directive({
…
Jaroslaw K.
- 5,224
- 2
- 39
- 65
0
votes
1 answer
Angular @Hostbinding does not work
i've similar problem with @Hostbinding like other questions, but i could not solve that.
My template:
And my directive
@Directive({
…
Roma Kap
- 517
- 1
- 8
- 23
0
votes
1 answer
Angular2 host binding issue in AoT compilation
Using the latest Angular2 Webpack Starter (v5.4.1. / Angular 2.4.6) I'm trying to build my code with the AoT compiler. In a custom form input component I have this host binding
@Component({
selector: 'my-selector',
templateUrl:…
Jan B.
- 6,030
- 5
- 32
- 53