CODEWITHSUNDEEP
htmlangulartypescript
Elad Benda
Elad Benda

Reputation: 36654

different directive in angular2

I'm new to Angular 2.

Can someone please explain the difference between the html directives and attribute directives? Why are they both needed?

Example:

<rating [rate]="rate" (rate-change)="onUpdate($event)"></rating>

So:

rating is what i call "html directive" but I'm not sure what it's for?

[rate] is an attribute directive that sets component property named "rate".

(rate-change) is an attribute directive that calls a component method called rateChange.

Any other types of directives?

Upvotes: 1

Views: 80

Answers (2)

Alex JM
Alex JM

Reputation: 1094

So let's take this in parts:

  • rating is a component. A component in angular 2, is single piece of running code, composed by a typescript file (using @Component decorator), plus a template and some styling. If you come from angular 1 world, it is kind of similar to a element directive
  • [rate] is an attribute directive. Basically they bind a value (rate in this case) to any html attribute.
  • (rate-change) is an event handler. In this case, it is custom event that you can trigger using EventEmmiter

Upvotes: 2

Yaron Schwimmer
Yaron Schwimmer

Reputation: 5357

I think you've got confused with the naming. Let's try to get things in order:

In you example, rating is a component. This is Angular's way to create new DOM elements with custom behavior. Its code is most likely to look like:

@Component({
  selector: 'rating'
  ...
})

[rate] is the tricky one, because from this narrow context it can be either an input property of the rating component, or an unrelated attribute directive.

(rate-change) is an event handler, in this case it's an output of the rating component because it's not a standard DOM event (like click).

Upvotes: 1

Related Questions