Use for questions about Angular 2+ directives
Questions tagged [angular2-directives]
1806 questions
44
votes
2 answers
How to Unit Test a Directive In Angular 2?
Problem: I would like to be able to unit test a directive in Angular 2 to make sure that it properly compiles.
In Angular 1, it was possible to use$compile(angular.element(myElement) service and call $scope.$digest() after that. I specifically want…
daniel.caspers
- 1,660
- 1
- 18
- 22
36
votes
5 answers
Angular2 How to get reference of HTML elements generated dynamically
I have this inputs generated dynamically:
Please notice id=my-input-{{i}} I would…
CommonSenseCode
- 23,522
- 33
- 131
- 186
36
votes
4 answers
How to get width of (DOM) Element in Angular2
there a some similiar threads but I couldn't find a suitable answer
for my needs. So that direct DOM access should be strictly avoided
in angular2 I'm just wondering whats best practice for this.
What I wan't to achieve is a resize of a element…
Kevin Regenrek
- 842
- 2
- 8
- 17
35
votes
4 answers
HTML check variable undefined with ngIf excluding case when value is 0
I am using Angular 2 and would like to check if a variable value is undefined using the htm *ngIf condition.
If I use , it also covers the case when variable testvar = 0, but I would like to exclude the case when it is 0.
The…
user1892775
- 2,001
- 6
- 37
- 58
34
votes
4 answers
Angular2: replace host element with component's template
I'm new to angular in general and to angular2 specifically. I'm trying to write a container component, which should have child components in it.
For example, container component:
@Component({
selector: 'my-list',
template: `
-
…
Denis Itskovich
- 4,383
- 3
- 32
- 53
32
votes
1 answer
How to append dynamic DOM elements from a directive in Angular 2?
I have an Angular 1.x directive that appends an element. In short:
app.directive('mydirective', function() {
template: '
user11081980
- 3,059
- 4
- 30
- 48
30
votes
2 answers
How to trigger a change event manually - angular2
Given the following components:
@Component({
selector: 'compA',
template: template: `
suat
- 4,239
- 3
- 28
- 51
30
votes
3 answers
Angular2 get window width onResize
Trying to figure out how to get window width on resizing events in Angular2. Here is my code:
export class SideNav {
innerWidth: number;
constructor(private window: Window){
let getWindow = function(){
return…
Spencer Bigum
- 1,811
- 3
- 17
- 28
29
votes
9 answers
How to find the count of items in an ngFor after the pipes have been applied
I have an ngFor creating rows in a table that is both filtered and paged.
There is another element on the page that displays the number of records…
Angular 4 Can't bind to
ghawkes
- 553
- 1
- 5
- 14
27
votes
4 answers
Accessing `selector` from within an Angular 2 component
I'm trying to figure out how I can access the selector that we pass into the @Component decorator.
For example
@Component({
selector: 'my-component'
})
class MyComponent {
constructor() {
// I was hoping for something like the following…
Ruan Mendes
- 90,375
- 31
- 153
- 217
26
votes
6 answers
How to Include moment-timezone in Angular 2 App
I realize, this question is repeated but previous once does not provide apt answer
moment package was already installed
1.Installed package
npm install moment-timezone --save
Inside node_modules…
Sandeep Chikhale
- 1,505
- 2
- 21
- 36
24
votes
4 answers
Angular 4 Can't bind to since it isn't a known property of
I'm trying to create my own directive in Angular 4. But, I got this error when bind the property of class into component template.
Console error:
Unhandled Promise rejection: Template parse errors: Can't bind to
'data' since it isn't a known…
Justinus Hermawan
- 1,194
- 1
- 23
- 44
24
votes
1 answer
Property 'clientX' does not exist on type 'Event'. Angular2 Directive
I'm trying to listen to the X position of my mouse in an Angular2 Directive like this:
@HostListener('mousemove', ['$event'])
onMousemove(event: Event): void {
console.log(event.clientX)
}
but I get the error
Property 'clientX' does not exist…
Nate May
- 3,814
- 7
- 33
- 86
24
votes
6 answers
Angular2 way of converting plain text to url (anchor links)
I sometimes have a component that can receive text like this:
text www.website.com
But I would like to convert it to a url if it is a link. Like this.
text www.website.com
I read this SO answer that suggests using 3rd party libs such as…
CommonSenseCode
- 23,522
- 33
- 131
- 186
24
votes
1 answer
Angular2: Cloning component / HTML element and it's functionality
So, the question is fairly simple...
I have a table and some angular logic on it (calculating styles, etc)... specifically I have this on THs
[class.hidden] = "column.group !== 'key-data' && currentTableView !== column.group"
For my table sticky…
DS_web_developer
- 3,622
- 13
- 52
- 83