How Angular knows that element <app-info> refers to the appInfo directive?

#1

Question

How Angular knows that element <app-info> refers to the appInfo directive?

Answer

Every language has a style guide and a naming convention. For example in JavaScript we use camelCase, in plain PHP we usually use snake_case and in HTML dash-case (also called train-case) is recommended. Angular apps are written mostly in JS, but with the use of custom HTML elements and attributes. So at the level of framework design, it was kind of problematic to select one, consistent naming convention.

Angular respects style guides, that is why we can use camelCase in JavaScript and train-case in HTML. How is this possible? There is a special normalization process.

This is how AngularJS documentation describes the normalization process:

The normalization process is as follows:

  1. Strip x- and data- from the front of the element/attributes.
  2. Convert the :, -, or _-delimited name to camelCase.

That’s why element app-info refers to the directive appInfo.

5 Likes
FAQ: Directives - Directives II
#2

I don’t understand how associates to appInfo. How does it know to put a dash? Is it automatic when it sees the capital I and changes it to a dash with lower case?

2 Likes
FAQ: Directives - Directives II
#3

I have the same question. Why isn’t this explained at all?

#4

@javaninja55926 @michaelkoehler2 Hey, I noticed your questions and decided to create FAQ explaining this. I moved your comments here. So, take a look above, there is an answer. Let me know if anything needs clarification :slight_smile:

3 Likes