CODEWITHSUNDEEP
htmlcssprimeng
Goku
Goku

Reputation: 1663

Why are there two different syntaxes for HTML/CSS "styles" and what do they do differently

New to HTML/CSS and I have a serious hole in my understanding of what is happening in the following example.

I built an Angular app using primeng for the look and feel. I have a component with HTML that has primeNg elements inside of it.

I noticed <p-dropdown [style]="{'width': '100%'}"></p-dropdown> effects the width, but using the syntax <p-dropdown style="width: 100%"></p-dropdown> does not work, I get an error:

Error states: ERROR Error: Cannot find a differ supporting object 'width: 100%'

If i was using a button then <button style="width: 100%"></button> would work fine. Anyone know what these two syntaxes are actually doing differently, and why one would work for p-dropdown but the other would not?

Upvotes: 0

Views: 98

Answers (2)

alex067
alex067

Reputation: 3281

I don't know Angular, but 

<p-dropdown [style]="{'width': '100%'}"></p-dropdown>

looks like a specific syntax for Angular. Therefore, it's important to follow the grammatical structure of the syntax. In this case, it's necessary to nest the style with brackets, and the width within curly brackets, like a json object.

<button style="width: 100%"></button>

Is native HTML syntax, thus this inline style syntax works just fine. This wouldn't work if you did:

<button [style]="{'width: 100%'}"></button>

because as mentioned before, this type of syntax is strictly for Angular.

Upvotes: 1

Mosia Thabo
Mosia Thabo

Reputation: 4267

Here is some useful information:

You can read here, for more explanation - it's called Template Syntax.

The issue here is, you need to know how angular classes(logic) communicates with templates(view) - and how properties of custom elements are handled when the actual html template is rendered for that particular element.

This is how it works: Consider each of these two case:

  • Case 1: <p-dropdown [style]="{'width': '100%'}"></p-dropdown>
  • Case 2: <p-dropdown style="width: 100%"></p-dropdown>

Now let's see how they're interpreted: Case 1: This tells angular to look for property called style and assign a value to it. Now, to understand what I mean - consider this, Lefthand="Righthand" - In all custom angular elements you created the righthand site is a known object/function defined somewhere in your app. Commonly in your class.ts. So to supply a value instead of a reference to some object/function you must further cover righthand with single quotes like this - "'righthand'". Angular reads this as a value and not a reference. That is why this option works.

Case 2: Case two looks programmically valid but to angular it isn't, unless, as stated above on case 1 explanation, the content provided on righthand is an object/function. Remember in all custom elements, angular will check everything for any reference variables, objects or function it must manipulate and apply when it renders the template for that element. So when it tries to handle that element you provided it's given an object width: 100% which it can't locate anywhere on the app. Hence it thrown an error.

Regarding this - Angular doesn't have to do anywork, because this is a valid html element and normal html syntax apply. Angular doesn't have to render anything for <button> because it's an html element and not an angular element/component whose selector is defined.

I hope you find this useful.

I love Angular - Let's use it because it's simply the best.

Upvotes: 1

Related Questions