CODEWITHSUNDEEP
javascriptangular
Max Koretskyi
Max Koretskyi

Reputation: 105439

Difference between binding and directive

Let's take the following example. There are two ways add class to an element:

Class binding

<div [class]="currentClasses">Hello world #1</div>

Class directive

<div [ngClass]="settings">Hello world #1</div>

What's the difference in terms of underlying functionality between class binding and class directive? Originally I thought that bindings just write to properties on some object, however there is no such property class on HTMLElement, it's className, so this reasoning is probably wrong. And it certainly not just adds a class attribute to DOM element, because the same syntax is used to bind values to component class fields.

These are the questions that popup in my head as well: Can I implement custom bindings? What mechanism is used behind [] binding?

I certainly understand that ngClass has sophisticated functionality, like tracking properties on component class, while class binding simply adds classes. But this question is not about application, it's about how they are implemented internally.

Upvotes: 4

Views: 630

Answers (1)

G&#252;nter Z&#246;chbauer
G&#252;nter Z&#246;chbauer

Reputation: 657008

[class.xxx], [attr.xxx], [style.xxx] is special Angular2 template syntax and processed by Angular2 directly. This is not extensible and there is only what Angular supports.

On the other side, [ngClass] is a directive like you can build it yourself. It's just included in Angular2 by default.

Upvotes: 2

Related Questions