CODEWITHSUNDEEP
htmlangulartypescript
CodeWarrior
CodeWarrior

Reputation: 5176

Is Angular 2/4 really case sensitive?

I know it sounds like a dumb question but I am a bit confused about whether Angular is really case sensitive or just in certain cases? I was stuck with a piece of code yesterday for a few hours and I couldn't make it work. I posted the question on SO and I found the issue was that I was using ngfor instead of ngFor. After I fixed this, it worked just fine.

Also in my code I am using [innerHtml] but people on SO corrected my saying that the correct spelling was [innerHTML]. However, my code just works fine with the former. Now my question is that if Angular is really case sensitive then my former implementation shouldn't really work.

Could anyone please elaborate on this?

Upvotes: 1

Views: 1635

Answers (3)

Christian Melnik
Christian Melnik

Reputation: 1

Yes, Angular structural directives like *ngFor are case sensitive. If you write *ngfor instead, Angular won't render the concerned html block as a template: https://angular.io/guide/template-syntax#ngfor

Furthermore, property binding is also case sensitive in Angular. The important thing to note here is that Angular references the Html DOM properties and not the Html attributes. Html attributes are only there for initializing the html and don't change after that. DOM properties on the other hand can change: https://angular.io/guide/template-syntax#html-attribute-vs-dom-property

In your case with innerHTML, innerHTML is the correct spelling of the DOM element. You are right in that innerHtml is also working. And to be honest, I could not find out, why that is the case. But every other spelling like innerhtml leads to an error in the form:

Can't bind to 'innerhtml' since it isn't a known property of 'p'

I could imagine that innerHtml is something like a 'hidden' Html attribute that can also change after initialization.

Upvotes: 0

Hrishikesh Kale
Hrishikesh Kale

Reputation: 6548

elaborating your question,

the latest version of angular uses Typescript, all the inner directive of angular like ngIf and ngFor are written in typescript, so it is a Case Sensitive,

HTML usually is not a case-sensitive, but it's considered a good practice to keep HTML markup lowercase.

in your case [innerHtml] is a DOM property of HTML, so it can be written in small case

Upvotes: 1

Khaled Ahmed
Khaled Ahmed

Reputation: 1134

Yes it's because angular 2/4 use typescript which is case sensitive. and here in your case the ngFor is a structural directive in angular but in innerHTML, it is a HTML property and HTML isn't a case sensitive.

Upvotes: 5

Related Questions