@Input() in Angular2 does not work with string

Question

Please see below codes :

import { AppComponent } from './app.component';
import { HelloWorldComponent } from './hello-world/hello-world.component';

@NgModule({
  declarations: [
    AppComponent,
    HelloWorldComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

I added 'HelloWorldComponent' to main component ('AppComponent')

in 'app.component.html'

<h1>
  {{title}}
  <app-hello-world [name]="test"></app-hello-world> // When [name]="Test" does not works but when I use number works !!! [name] = "4"
</h1>

in 'hello-world.component.ts' in used @Input() decorator

import { Component, OnInit, Input } from '@angular/core';

@Component({
  selector: 'app-hello-world',
  templateUrl: './hello-world.component.html',
  styleUrls: ['./hello-world.component.css']
})
export class HelloWorldComponent implements OnInit {
  @Input() name: string;
  constructor() { }

  ngOnInit() {
  }

}

and in 'hello-world.component.html'

<p>
{{name}}
</p>

Why when I passa string to [name] it does not work ?

Günter Zöchbauer · Accepted Answer · 2017-01-12 07:37:41Z

15

What you want is

[name]="'test'"

or

name="test"

because without quotes test is interpreted as identifier, while 5 isn't (like in normal TS code)

The difference between the two variants is that
the former does property binding and won't show up in the DOM
while the second is a normal HTML attribute that is also read by Angular. It will be added to the DOM as is.

answered Jan 12, 2017 at 7:37

Günter Zöchbauer

662k235 gold badges2.1k silver badges1.6k bronze badges

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

2 Comments

NBM Over a year ago

the needed quotes are because of Typescript or Angular2 ?

Günter Zöchbauer Over a year ago

When you add [] Angular interprets the value as expression and test (without quotes) in TS/JS means the value of the variable test. [name]="test" (again without quotes) means pass the name of the field test of the components class to the name property of the HelloWorldComponent component.

8192K · Accepted Answer · 2017-01-12 07:38:59Z

0

If you are not referencing any logic that is to be evaluated, you do not need the pointy brackets around the Input() parameter. Just write

name="test"

answered Jan 12, 2017 at 7:38

8192K

5,2904 gold badges33 silver badges51 bronze badges

2 Comments

NBM Over a year ago

Can you explan more about 'not referencing any logic' ?

8192K Over a year ago

What Günther wrote in the other answer. If you add the pointy brackets, you make Angular2 evaluate any expresseion (=logic) inside the quotes.

Collectives™ on Stack Overflow

@Input() in Angular2 does not work with string

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related