Use for questions about Angular 2+ directives
Questions tagged [angular2-directives]
1806 questions
482
votes
12 answers
Angular exception: Can't bind to 'ngForIn' since it isn't a known native property
What am I doing wrong?
import {bootstrap, Component} from 'angular2/angular2'
@Component({
selector: 'conf-talks',
template: `
{{talk.title}} by {{talk.speaker}}
{{talk.description}} …

Mark Rajcok
- 362,217
- 114
- 495
- 492
474
votes
28 answers
Angular 2 Scroll to top on Route Change
In my Angular 2 app when I scroll down a page and click the link at the bottom of the page, it does change the route and takes me to the next page but it doesn't scroll to the top of the page. As a result, if the first page is lengthy and 2nd page…

Naveed Ahmed
- 10,048
- 12
- 46
- 85
356
votes
17 answers
Exception: Can't bind to 'ngFor' since it isn't a known native property
What am I doing wrong?
import {bootstrap, Component} from 'angular2/angular2'
@Component({
selector: 'conf-talks',
template: `
{{talk.title}} by {{talk.speaker}}
`
})
class…{{talk.description}}

Mark Rajcok
- 362,217
- 114
- 495
- 492
158
votes
17 answers
Apply a directive conditionally
I am using Material 2 to add md-raised-button. I want to apply this directive only if certain condition becomes true.
For example:
Another example:
I created a basic dynamic reactive form in plunker.
I am…

user2899728
- 2,099
- 4
- 16
- 28
126
votes
10 answers
NgFor doesn't update data with Pipe in Angular2
In this scenario, I'm displaying a list of students (array) to the view with ngFor:
{{student.name}}
It's wonderful that it updates whenever I add other student to the list.
However, when I give it a pipe to…

Chu Son
- 1,520
- 3
- 12
- 13
111
votes
5 answers
How to implement ngModel on custom elements?
Given a simple input element I can do this:
{{ name }}
This doesn't work for my custom elements:
How can I implement it?
user1563700
96
votes
8 answers
What is the difference between component and directive?
I have just started working with Angular 2.
I was wondering what are the differences between components and directives in Angular 2?

uksz
- 18,239
- 30
- 94
- 161
92
votes
8 answers
Difference between [ngClass] vs [class] binding
What is the difference in Angular 2 between the following snippets:

Ben Taliadoros
- 7,003
- 15
- 60
- 97
87
votes
6 answers
When to use square brackets [ ] in directives @Inputs and when not?
I'm confused a little.
See this simple directive:
@Directive({
selector: '[myDirective]'
})
export class MyDirective {
private text: string;
private enabled: boolean;
@Input() myDirective:string;
…

AngularOne
- 2,760
- 6
- 32
- 46
87
votes
3 answers
Get reference to a directive used in a component
I have a component whose template looks something like this:
Some content here
I need access to the MyCustomDirective class instance used here. When I want to get access to a child component, I use a ViewChild…
Ben Dilts
- 10,535
- 16
- 54
- 85
87
votes
4 answers
Pass parameters with EventEmitter
I have a directive to initializes a jQueryUI sortable on a DOM element. The jQueryUI sortable also has a set of callback events that trigger on certain actions. For example, when you start or stop sorting elements.
I'd like to pass the return…

Vivendi
- 20,047
- 25
- 121
- 196
84
votes
5 answers
How to pass object from one component to another in Angular 2?
I have Angular components and first component uses the second one as a directive.
They should share the same model object, which is initialized in the first component.
How can I pass that model to the second component?

Anoush Hakobyan
- 1,255
- 1
- 11
- 22
83
votes
2 answers
svg circle - Can't bind to cx since it isn't a known native property
I need to do a progress arc based on the calculated percentage, I have created a custom directive to access the svg attributes from the user, while updating that in my template, I am getting the following error:
Can't bind to 'cx' since it isn't a…

Sharmile Murugaraj
- 1,044
- 1
- 8
- 10
69
votes
4 answers
What is multi provider in angular2
I understand that provider is for getting service from another class but what is multi-provider and token thing?
And also when we do multi=true ?
provide(NG_VALIDATORS, { useExisting: class), multi: true })

blackHawk
- 6,047
- 13
- 57
- 100
68
votes
1 answer
How to use multiple ng-content in the same component in Angular 2?
I would like to display different template in my component. Only one will show.
If hasURL is true, I want to show the .
If hasURL is false, I want to show the .
The problem if hasURL is false, the component show button, but…

Steffi
- 6,835
- 25
- 78
- 123