CODEWITHSUNDEEP
angularprimeng
Fel
Fel

Reputation: 4818

Confusion with Angular component property binding

I'm using the PrimeNG UI components on an Angular 5 application and I have a little confusion about they way to bind values to some of their properties. I'll explain it with an example:

According to the documentation (https://www.primefaces.org/primeng/#/accordion), these are the properties for AccordionTab:

Name       Type     Default   Description
header     string   null      Title of the tab.
selected   boolean  false     Defines if the tab is active.
disabled   boolean  false     Defines whether the tab can be selected

And then, in the code, we have the following example:

<p-accordion>
  <p-accordionTab header="Header 1" [selected]="true">
    Content 1
  </p-accordionTab>
  <p-accordionTab header="Header 2">
    Content 2
  </p-accordionTab>
  <p-accordionTab header="Header 3">
    Content 3    
  </p-accordionTab>
</p-accordion>

As you can see, header is used without brackets, while selected does use them. Please correct me if I'm wrong, but brackets are used to bind values to the component properties, while a literal without brackets refers to a directive, right?

Why are they used differently in this case?

Thanks in advance!

Upvotes: 0

Views: 1027

Answers (2)

mast3rd3mon
mast3rd3mon

Reputation: 8825

Using the property name on its own reads whatever is in the quotes literally. header="Title Name" will pass "Title Name" into the header property.

Using [] around a propertyname allows you to reference a variable or function. [header]="TitleName" with TitleName() {return "Title Name"} or TitleName = "Title Name" in your class within the component file

Upvotes: 1

void
void

Reputation: 36703

If you are using [] that means it contains a expression. This is for object binding to properties (@Input() of an Angular component or directive or a property of a DOM element

Here [selected]="true" will get the value true and not "true". That means you can also pass array, variables ... here and other complex expressions as well.

The thing you have in header is always a string value.

More details can be found here https://angular.io/guide/template-syntax

Upvotes: 2

Related Questions