Super newbie to ionic 2 - difference between [name]=foo and name="{{foo}}"

Ionic Framework ionic-v3
#1

Hi there, I am making progress on my new ionic v2 app, but had a super basic question. I’ve read that the new angular syntax uses [element]="component.variable" for a 1 way binding from variable of component to DOM and that is the new way instead of expression interpolation using {{}}

I’m trying to make sure I don’t fall back to old mechanisms of v1.

So I tried this, which works as its supposed to:

<ion-icon [name]="task.icon"></ion-icon> {{task.title}}
 <!- stuff -->
</icon>

And I also tried this which also works (the old way)

 <ion-icon name="{{task.icon}}"></ion-icon> {{task.title}}

And they both produce the same HTML:

<ion-label class="label label-md">
        <ion-icon role="img" class="icon icon-md item-icon ion-md-analytics" aria-label="analytics" ng-reflect-name="analytics"></ion-icon> <!-stuff -->
      </ion-label>

So I’m confused, what is the difference?

#2

If all you’re dealing with is strings, there’s no difference. Otherwise, you need to use the [] syntax. More here.

1 Like