Questions tagged [angular2-hostbinding]
56 questions
1
vote
1 answer
Angular: toggle HostBinding from different component?
I have a component app-layout that holds a sidenav and a router outlet for my pages:
This app-layout has a HostBinding on it to…
Steve
- 14,401
- 35
- 125
- 230
1
vote
1 answer
Angular 2+ append class in directive
I have Angular 6.0.0 application. Need to dynamically append classes to html elements. Ideally, this should be implemented via directive.
Currently I have something like this and it works OK.
I want to…
Mike Kovetsky
- 1,638
- 1
- 14
- 24
1
vote
1 answer
Angular5 - @HostBinding instead of :host
I read that its better to use @HostBinding instead of :host. So i think about change my component.ts
@Component({
host: {
'class': 'cover',
'[class.uploading]': 'uploadProgress > 0',
}
})
This works fine, but when i change…
Budi
- 678
- 2
- 6
- 27
1
vote
2 answers
Set Angular HostBinding css class to value with function?
I have a component that uses @HostBinding to set a class:
@HostBinding('class.dark-1') true;
Which works fine. However, now I need to create a function in my component to change the class dynamically.
For example, from dark-1 to light-2 when a…
Steve
- 14,401
- 35
- 125
- 230
1
vote
3 answers
How do I add a background-image to an Angular 2+ Directive using @HostBinding?
I need to create an Angular 2+ (I'm in 4.x) Directive (NOT a Component) that adds a background image via @HostBinding. I know I'm close, but when I inspect it I see background-image: none in Chrome's inspector.
import { Directive, HostBinding }…
jkyoutsey
- 1,969
- 2
- 20
- 31
1
vote
0 answers
Alternative to ElementRef - Angular
In my ng2 application, I am using an external library which hasn't exposed its HTML elements.
I am using it as:
Now when it renders…
Title
Content
Rahul
- 5,594
- 7
- 38
- 92
1
vote
0 answers
Dynamic change of pseudo-element's style in Angular2 directive
There is a way to dynamic change of pseudoelement's style by @HostBinding or other way in Angular2?
I wrote a directive for range inputs, and I would like to changing slider color depend on value.
export class AwesomeRangeDirective implements…
Jaroslaw K.
- 5,224
- 2
- 39
- 65
1
vote
1 answer
Angular2 how to change background color when drag & drop
I have a drag and drop container written in Angular 2 typescript. I want to change the background color of the drag & drop container while I am dragging a file into the container.
Typescript:
@HostListener('dragover', ['$event']) public…
Matt-pow
- 946
- 4
- 18
- 31
1
vote
1 answer
Using HostListener/Binding with a NgFor Element in Angular 2
I have list of users. I want that when the cursor hover on the button, it sets *ngIf to true and then displays information about the user (and false when the cursor leave the button).
user-list.html:
…
SolidCanary
- 1,133
- 1
- 8
- 15
1
vote
1 answer
Change host class when mouseenter/mouseleave on templates child element with @HostBinding in Angular 2
Is there a way to use @HostBinding dynamically when we trigger mouseeneter/mouseleave event on child element in a template, that is:
in template.component.html
anna olchowik
- 11
- 1
0
votes
0 answers
Unconditionally assign a class to an Angular component's host element
I have some Angular component to which I want to unconditionally assign a class. This can be done using the host property on the @Component decorator:
import { Component } from '@angular/core';
@Component({
selector: 'app-my-component',
…
Mikkel R. Lund
- 2,336
- 1
- 31
- 44
0
votes
1 answer
What is best practice to assign multiple css classes to a component based on several conditions?
I am currently creating a components library. I am facing the problem how to apply multiple classes to it's host element based on several conditions.
Assuming I have the following component:
@Component({
selector: 'abc-button',
templateUrl:…
magdeyemoody
- 7
- 2
0
votes
1 answer
What "@" means in this host binding in Angular?
I have a component that uses this code in component decorator
host: {
'[@.disabled]': 'config.clNoAnimation'
}
What does actually means? I want to convert it to HostBinding/Hostlistener
Michalis
- 6,686
- 13
- 52
- 78
0
votes
3 answers
Access mat-raised-button disabled attribute
i try to access (read) the disabled attribute of a mat-raised-button Button inside of a directive.
If disabled is set true, inside my directive, during ngOnInit, disabled is still false, but the material button is rendered as disabled…
Andresch Serj
- 35,217
- 15
- 59
- 101
