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>
Instead
export class NutriFromComponent {
title: string;
constructor() {
this.title = 'Tour of Heroes';
}
}
Apply
export class NutriFromComponent {
title = 'Tour of Heroes';
}
It should works
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments