Use for questions about Angular 2+ directives
Questions tagged [angular2-directives]
1806 questions
19
votes
9 answers
Angular 2 Focus on first invalid input after Click/Event
I have an odd requirement and was hoping for some help.
I need to focus on the first found invalid input of a form after clicking a button (not submit). The form is rather large, and so the screen needs to scroll to the first invalid input.
This…

Jared Martinez
- 191
- 1
- 1
- 3
19
votes
4 answers
Check if user has scrolled to the bottom in Angular 2
What is the best practice to check if user has scrolled to the bottom of the page in Angular2 without jQuery? Do I have access to the window in my app component? If not should i check for scrolling to the bottom of the footer component, and how…

C. Kearns
- 1,531
- 3
- 13
- 18
18
votes
3 answers
Pass parameter to Angular 4 directive on input
I have an input text field like this
and my directive is:
import { Directive, Input, HostListener } from '@angular/core';
@Directive({
selector:…

TSG
- 4,242
- 9
- 61
- 121
18
votes
2 answers
Directive that works as ng-if (Angular 2)
I'm trying to create a directive that works as a ngIf to control if the user with the correct permission is allow to see specific content, something like this:
…

Daniel Soublett
- 849
- 2
- 8
- 23
18
votes
7 answers
How to import jQuery to Angular2 TypeScript projects?
I want to wrap some jQuery code in an Angular2 directive.
I installed jQuery library for Typings into my project with the following command:
typings install dt~jquery --save --global
So now i have jquery folder under typings/global folder in my…

smartmouse
- 13,912
- 34
- 100
- 166
18
votes
1 answer
Component as Injectable?
I am trying to build my own Modal component, that I would be able to reuse throughout my Angular2 Apps. I am considering different approaches, and I am wondering if it is possible to create @Component that also serves as @Injectable? I am…

alegrowski
- 261
- 2
- 3
- 8
18
votes
1 answer
How to create a link to external URL in Angular 2
I am new to Angular. I am starting with ver. 2.
I need to link to a file://... URL.
I tried normal href:
Note: app is a model object of the web which deals with applications.
no link…

Ondra Žižka
- 43,948
- 41
- 217
- 277
18
votes
1 answer
Globally register a directive in Angular
I am developing an Angular application. I need to add special behavior to all links. In AngularJS would just write a directive like this:
angular.module('whatever.module', []).directive('href', function() {
return {
restrict: 'A',
…

kamilkp
- 9,690
- 6
- 37
- 56
17
votes
2 answers
Generic type 'Array' requires 1 type argument(s). - Angular2
I have been trying to implement a simple ngFor with Angular2 but I don't know what went wrong which lead to error 'Generic TYpe Array requires one argument(s). PLease favour
import { Component } from '@angular/core';
@Component({
…

Gayathri
- 1,776
- 5
- 23
- 50
17
votes
2 answers
Building a wrapper directive (wrap some content / component) in angular2
I'm pretty new building directives with Angular2. What I want is to create a popup directive that will wrap the content with some css classes.
Content
Content can be pure text and headers like:
Header
Content to…
Mikkel
- 1,771
- 11
- 35
- 59
17
votes
2 answers
Difference between Renderer and ElementRef in angular 2
What is the difference between Renderer and ElementRef? In Angular both are used for DOM Manipulation. I am currently using ElementRef alone for writing Angular 2 directives. If I get more info about Renderer, I can use that in my future…

Niyaz
- 2,677
- 3
- 21
- 40
16
votes
4 answers
directive click outside angular 6
I upgraded my Angular from 4 to 6, and consequently had a problem with my click-off policy, it stopped working on all components.
my directive:
import { Directive, Output, EventEmitter, ElementRef, HostListener } from '@angular/core';
…

André Montório
- 311
- 1
- 4
- 14
16
votes
2 answers
Angular2 - ViewChild from a Directive
I have a component with the name EasyBoxComponent,
and a @Directive with this @Viewchild:
@ViewChild(EasyBoxComponent) myComponent: EasyBoxComponent;
I thought this was the correct syntax, but this.myComponent is always undefined.
Here's the whole…

Michalis
- 6,686
- 13
- 52
- 78
16
votes
2 answers
Passing context to template through ngOutletContext in Angular2
I have a component to which I am passing a template. Inside of this component I would like to pass context so that I could display data.
@Component({
selector: 'my-component',
providers: [],
template: `

Tukkan
- 1,574
- 2
- 18
- 33
16
votes
4 answers
Angular 2 Change Class On Condition
I have three buttons in a view and on page load I am displaying the first buttons content. Once a button is clicked the button becomes active but on page load the initial button is not set to active. In order to show the first button active I added…

wuno
- 9,547
- 19
- 96
- 180