Use for questions about Angular 2+ directives
Questions tagged [angular2-directives]
1806 questions
13
votes
6 answers
Angular 2 Set focus on first field of form on component load
In my app I want to automatically set focus on first field of form on component load. Can anyone please guide how to achieve this without any repetition as I want this on every form (Reactive Forms) in my app.

Naveed Ahmed
- 10,048
- 12
- 46
- 85
13
votes
2 answers
How to init a component only when its tag is at `*ngIf=true`?
Update:
Günter Zöchbauer provided a very acceptable answer that works perfectly (and thank you!). But I still have a question to check if what I am doing is the correct way of getting the result I seek. Context is given below.
What I expect with my…

Jeahel
- 1,012
- 2
- 13
- 30
13
votes
1 answer
Angular 2 passing parameters to constructor throws DI exception
I'm wanting to setup a string property on a component in my constructor, but when I try something like this
@Component({
selector: 'wg-app',
templateUrl: 'templates/html/wg-app.html'
})
export class AppComponent {
constructor(private…

Simon Trewhella
- 2,124
- 3
- 23
- 23
12
votes
6 answers
How to add "Active" class when input field is not empty
I'm trying to create an Angular 4 Directive that will add class="active" on the label when the textfield is not empty

Jean-Francois
- 1,899
- 4
- 35
- 73
12
votes
1 answer
A directive replacing loading content with spinner in Angular 2+
In Angular 1, it was fairly easy to create a loading directive that replaced content with a spinner and was used like so:
Where contentHasLoaded is a simple boolean value you set in your controller…

ansorensen
- 1,276
- 1
- 14
- 29
12
votes
3 answers
Angular 2 multiple custom value accessor
I am creating an application using angular2.
I need to get a Date from user input using a calendar popover, but I need to put a mask on user input to stay in this format dd-mm-YYYY when he is typing.
I am using two different modules that I got from…

Rafael Andrade
- 495
- 1
- 5
- 22
12
votes
6 answers
Double Tap/ double click Angular2 & ionic
I am searching on many forums and questions, but nobody seems to ask how to double click ou double tap in Angular/ionic 2 ?
In ionic v1 it was available with on-double-tap (see http://ionicframework.com/docs/api/directive/onDoubleTap/)
Does anyone…

luiswill
- 952
- 1
- 11
- 21
12
votes
1 answer
Custom Angular 2 directive not working
Error
Template parse errors:
Can't bind to 'time-delta' since it isn't a known property of 'p'.
Solution in documentation
I have to add the Directive to declarations array. I've done this already.
Now my architecture:
I have three…

CodeWarrior
- 354
- 2
- 3
- 10
12
votes
2 answers
Angular 2 expression parser and ng-init directive
Basically I'm looking for a way to implement a counterpart to Angular 1.x ngInit directive.
I'm aware of ngOnInit hook and the fact that it is the recommended place for initialization code. I consider ngInit directive a quick, declarative way to…

Estus Flask
- 206,104
- 70
- 425
- 565
12
votes
4 answers
Angular 2 Slide Up and Down Animation
I recently built the following Angular 2 Read More component. What this component does is collapse and expand long blocks of text with "Read more" and "Read Less" links. Not on the basis of the character count but on the basis of the specified max…

Naveed Ahmed
- 10,048
- 12
- 46
- 85
12
votes
8 answers
Angular 2 drag and drop directive extremely slow
I am trying to implement a custom drag and drop directive. It works, but it is extremely slow, and I think the slowness can be tracked to Angular 2 because I've never encountered this slowness before. The slowness only occurs when I attach an event…

Aviad P.
- 32,036
- 14
- 103
- 124
12
votes
4 answers
Apply styles from parent
Suppose I have a component with this template:
{{text}}
How can I merge the styles applied to the component,…
Soumya
- 13,677
- 6
- 34
- 49
12
votes
2 answers
How to conditionally insert/remove host DOM element in angular 2 directive
I want to create a directive that will decide whether should or should not its host element apppear on the page. Ideally I would like it to remove the element from the DOM and not just hide/show it with css. Usecase is:

dKab
- 2,658
- 5
- 20
- 35
11
votes
2 answers
Angular custom ngIf directive 'as' syntax
I'm creating a custom *ngIf directive to replace content with a placeholder while it's loading. I have everything working as I want and modeled it after the *ngIf directive…

that_guy
- 2,313
- 4
- 33
- 46
11
votes
1 answer
Angular 2 Cursor jump at the end of textbox when changing data
There is some restrictions in name field so I am trying to validate name field using directive as below. Inside directive I am using regular expression to check valid name and then replacing valid name into textbox using…

Karan Patel
- 2,219
- 3
- 19
- 32