Stack Overflow
Stack Overflow

Questions tagged [angular2-directives]

Use for questions about Angular 2+ directives

1806 questions
24
votes
3 answers

One Component Multiple Templates based on Condition

So here's the deal. I have a component thats very well written and being used in a lot of places. Now I need to use the same component, but want a different template to be rendered, based upon a condition. I tried a lot. 1) Tried using multiple…
Varun Joshi
  • 241
  • 1
  • 2
  • 3
23
votes
2 answers

Injecting ngControl in custom validator directive, causes cyclic dependency

i'm trying to create custom angular 2 validator directive, which inject NgControl like this : @Directive({ selector: '[ngModel][customValidator]', providers: [{provide: NG_VALIDATORS, useExisting: CustomValidatorDirective, multi:…
Krasimir Kirilov
  • 485
  • 2
  • 5
  • 14
23
votes
10 answers

Angular 2 Read More Directive

I need to build a readmore directive in Angular2. What this directive will do is for collapse and expand long blocks of text with "Read more" and "Close" links. Not on the basis of the character count but on the basis of the specified max…
Naveed Ahmed
  • 10,048
  • 12
  • 46
  • 85
22
votes
4 answers

How to add/remove class from directive

Using a custom directive how would you add/remove a class on the host element based on a specific conditions? Example: @Directive({ selector: '[customDirective]' }) export class CustomDirective { constructor(service: SomService) { // code to…
Napas
  • 2,692
  • 3
  • 28
  • 33
22
votes
2 answers

Angular 2 Input Directive Modifying Form Control Value

I have a simple Angular 2 directive that modifies the input value of a textbox. Note that i'm using the Model-Driven form approach. @Directive({ selector: '[appUpperCase]' }) export class UpperCaseDirective{ constructor(private el: ElementRef,…
Mike Lunn
  • 2,310
  • 3
  • 21
  • 24
22
votes
4 answers

Angular 2 Best approach to use FileSaver.js

I need to use the FileSaver.js (https://github.com/eligrey/FileSaver.js/) in my Angular2 application. I know I can add it as a script file in main html page and it will work. But I was wondering what would be the best approach in case of an Angular…
Naveed Ahmed
  • 10,048
  • 12
  • 46
  • 85
22
votes
2 answers

how to do responsive components in Angular2

I'm wading my way into Angular2. My objective is to create a responsive app that loads different components in response to different media-queries for device widths. My working example has a MatchMediaService: import { Injectable } from…
Tom Schreck
  • 5,177
  • 12
  • 68
  • 122
22
votes
7 answers

Uncaught exception in promise when when trying to use nested components

I am getting this exception when trying to use nested components: EXCEPTION: Error: Uncaught (in promise): TypeError: Cannot set property 'endSourceSpan' of null XCEPTION: Error: Uncaught (in promise): TypeError: Cannot set property 'endSourceSpan'…
Nicu
  • 3,476
  • 4
  • 23
  • 43
22
votes
5 answers

How to implement a draggable div in Angular 2 using Rx

I've been trying to get a draggable div working using Angular 2. I'm using this example from the angular2-examples repo as a starting point, only really adjusting the code to account for the removal of the toRx() method. The code works, but it…
Chris
  • 1,657
  • 1
  • 13
  • 20
21
votes
1 answer

Detect Click outside element in angular 4 using directives

I have used a custom directive to detect click outside an element in angular 2 but the same is not possible in angular 4. [plunkr] https://plnkr.co/edit/aKcZVQ?p=info When I try using the same code in angular-4 I get the following errors: 1.…
Ronit Oommen
  • 3,040
  • 4
  • 17
  • 25
21
votes
2 answers

Use directive in host of another Directive

I want to add a directive to an element from another directive by using the host property, but there doesn't seem to be a way to reference the other directive. @Directive({ selector: '[one]', host: { '[two]': '"some-value"' } // How can…
Yona Appletree
  • 8,801
  • 6
  • 35
  • 52
21
votes
3 answers

Angular2, TypeScript, How to read/bind attribute value to component class (undefined in ngOnInit)

can someone please advice me how to read/bind attribute value to @component class, which seems to be undefined in ngOnInit method? Here's a plunker demo: http://plnkr.co/edit/4FoFNBFsOEvvOkyfn0lw?p=preview I'd like to read value of "someattribute"…
Tomino
  • 5,969
  • 6
  • 38
  • 50
19
votes
9 answers

ngFor Directive Not Found

I am using Angular 4.3.3 with the JIT compiler and get the error below when I run my application: Property binding ngforOf not used by any directive on an embedded template. Make sure that the property name is spelled correctly and all directives…
Graham
  • 5,488
  • 13
  • 57
  • 92
19
votes
7 answers

How to restrict special characters in the input field using Angular 2 / Typescript

I am new to Angular 2. I need to prevent special characters from being typed in the input field. If I type alphanumerics, it must accept them, while special characters should be blocked. Can anyone help please. I am sharing the code here. In…
Bhrungarajni
  • 2,415
  • 11
  • 44
  • 88
19
votes
2 answers

Can I access child elements within a directive in Angular2?

I'm trying to create a directive that accepts in input a icon property which would be the icon name. So the directive internally would try to find a span element where it will apply a class. I wonder if this is possible from within the directive…
Caius
  • 2,084
  • 6
  • 31
  • 47
1 2 3
…
99 100