2

Is there any difference in performance between using input binding with and without brackets for static data? I mean

<my-component [customTitle]="'Hello World'"></my-component>

vs

<my-component customTitle="Hello World"></my-component>

I appreciate it if anybody shares some useful articles related to this topic

2 Answers 2

2

If you use static data, use Attribute decorator

In constructor

constructor(@Attribute('customTitle') private customTitle: string) {}

In you want to use in html, use public instead of private, if you're planning the component can to has or not use @Optional

constructor(@Optional() @Attribute('customTitle') public customTitle: string) {
   //and you can use, e.g.
   if (!this.customTitle)
       this.title="a title by defect"
}

//or in your .html, e.g.
<div *ngIf="!customTitle">Title by defect</div>
{{customTitle}}

You can check this entry of Netanel Basal about it

Sign up to request clarification or add additional context in comments.

1 Comment

That's very interesting. Never heard about it before. Thank you
0

To bind to an element's property, enclose it in square brackets, [], which identifies the property as a target property. A target property is the DOM property to which you want to assign a value. For example, the target property in the following code is the image element's src property.

<img [src]="itemImageUrl">

In most cases, the target name is the name of a property, even when it appears to be the name of an attribute. In this example, src is the name of the element property.

The brackets, [], cause Angular to evaluate the right-hand side of the assignment as a dynamic expression. Without the brackets, Angular treats the right-hand side as a string literal and sets the property to that static value. This is known as Property binding.

You should omit the brackets when all of the following are true:

  1. The target property accepts a string value.

  2. The string is a fixed value that you can bake into the template.

  3. This initial value never changes.

You routinely initialize attributes this way in standard HTML, and it works just as well for directive and component property initialization.

When setting an element property to a non-string data value, you must use property binding.

Is there any difference in performance between using input binding with and without brackets for static data?

It is depend on when to use what. There is no such visible performance difference in these, but definitely one executes the expression. If you have static data use without brackets recommended by angular docs.

Note: if you disable default change detection strategy to OnPush, you can save a lot of performance issues.

You can check here when to use data binding, property binding, interpolation in angular.

2 Comments

Thank you for the reply. > If you have static data use without brackets recommended by angular docs. Could you share the direct link to this statement in angular docs? Because I failed to find exactly this
check this not same words, but giving the gist of when to use it.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.