Angular2 Interpolation Won't Work

Question

I can not get interpolation of a component property to work. If I type {{1+1}} it will, but not otherwise. I am trying to simply have {{title}} show up and I have declared it in two places(app and NutriForm components), But nothing works.

These are the relevant files.

app.component.ts

import { Component } from '@angular/core';
import {NutriFromComponent} from './NutriForm.component'

@Component({
    selector: 'my-app',
    directives: [NutriFromComponent],
    template:  '<NutriForm></NutriForm>'
})
export class AppComponent {
    title = "hello";
}

plain.html

<html>
    <head>
        <title>Angular 2 QuickStart</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link href="../public/stylesheets/style.css" rel="stylesheet" />
        <!-- 1. Load libraries -->
        <!-- Polyfill(s) for older browsers -->
        <script src="node_modules/core-js/client/shim.min.js"></script>
        <script src="node_modules/zone.js/dist/zone.js"></script>
        <script src="node_modules/reflect-metadata/Reflect.js"></script>
        <script src="node_modules/systemjs/dist/system.src.js"></script>
        <!-- 2. Configure SystemJS -->
        <script src="systemjs.config.js"></script>
        <script>
          System.import('app').catch(function(err){ console.error(err); });
        </script>
    </head>
    <!-- 3. Display the application -->
    <body>
        <my-app>Loading...</my-app>
    </body>
</html>

NutriForm.component.ts

import {Component} from '@angular/core';
import {Control , FormBuilder , Validators , NgForm} from '@angular/common';
import {ControlGroup} from '@angular/common';
import {NutriModel} from '../Models/NutriModel.ts';

@Component({
    selector: 'NutriForm',
    templateUrl: 'views/NutriForm.component.html'
})
export class NutriFromComponent { 

    title: string;

    constructor() {
        this.title = 'Tour of Heroes';
    }
}

NutriForm.component.html

<h2> {{title}}</h2>

<table>
    <tr>
        <td></td>
        <td>Your Value</td>
        <td>Recommended</td>
        <td>Average</td>
    </tr>
    <tr>
        <!--<td><input type="text" required [(ngModel)]="model.sex" ngControl="sex"  /></td>-->
        <td>Your Value</td>
        <td>Recommended</td>
        <td>Average</td>
    </tr>

</table>

<button type="submit" class="btn btn-default">Submit</button>

The code looks good. Put it in a plunker for further investigation, otherwise no one will know what's wrong. Plunker example : angular.io/resources/live-examples/toh-1/ts/plnkr.html — Tiberiu Popescu
– Tiberiu Popescu, Commented May 22, 2016 at 0:55

lord5et · Accepted Answer · 2016-12-29 14:07:21Z

1

Instead

export class NutriFromComponent { 

    title: string;

    constructor() {
        this.title = 'Tour of Heroes';
    }
}

Apply

export class NutriFromComponent { 

    title = 'Tour of Heroes';

}

It should works

answered Dec 29, 2016 at 14:07

lord5et

5107 silver badges8 bronze badges

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

3 Comments

Jason Krs Over a year ago

What if I need to use NavParams data passed in constuctor ?

lord5et Over a year ago

Hey Jason, could you please give me some more input about what do you want to achieve?

Jason Krs Over a year ago

The thing is that I'm passing data via NavParams... Then, inside constructor, I do ` this.title = navparams.get('dataPassed')... Then in the template, I used {{title}}` insite ion-input. This does not work. But it works if I use [ngModel] .... That's why I'm confused

Collectives™ on Stack Overflow

Angular2 Interpolation Won't Work

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related