1
car-master.component.ts
import {Component} from '@angular/core';
import {Car} from './car';
import {CarDetailComponent} from './car-detail.Component';
@Component({
selector: 'my-car',
templateUrl: 'app/view/car-master.html',
directives: [CarDetailComponent]
})
export class CarComponent {
public title: string = "Cadastro de veiculos";
public cars: Car[] = Cars;
public selectedCar: Car;
public onSelect(car:Car):void{
this.selectedCar = car;
}
}
var Cars: Car[] = [
{id: 1, brand: "BMW", model: "x6"},
{id: 2, brand: "BMW", model: "x1"},
{id: 3, brand: "Volkswagen", model: "Golf GTI"},
{id: 4, brand: "Chevrolet", model: "Croze"},
{id: 5, brand: "Ford", model: "Fusion"},
{id: 6, brand: "Fiat", model: "Bravo"},
{id: 7, brand: "Mercedes", model: "C180"}
]
car-Detail.component.ts
import {Component, Input} from '@angular/Core';
import {Car} from './car';
@Component({
selector: 'car-detail',
templateUrl: 'app/view/car-datail.html'
})
export class CarDetailComponent{
@Input()
public car: Car;
}
car ts.
export interface Car{
id: number;
brand: string;
model: string;
}
boot ts.
import {bootstrap} from '@angular/platform-browser-dynamic';
import {CarComponent} from "./car-master.component";
bootstrap(CarComponent);
car-datail.html
<section *ngIf="car" >
<section class="col-md-6">
<section class="form-group">
<label>Marca</label>
<input type="text" class="form-control" [(ngModel)]="car.brand" placeholder="Marca do veiculo" />
</section>
</section>
<!-- Fim da ngIf -->
<section class="col-md-6">
<section class="form-group">
<label>Marca</label>
<input type="text" class="form-control" [(ngModel)]="car.model" placeholder="modelo do veiculo" />
</section>
</section>
<!-- Fim da ngIf -->
car-master.html
<h1>{{title}}</h1>
<hr>
<section class="col-md-6">
<ul class="list-group">
<li *ngFor="#car of cars" (click)="onSelect(car)" class="list-group-item">
<span [class.selected]= "car === selectedCar" class="badge">{{car.id}}</span>
<a href="#"> {{car.brand}} {{car.model}}</a>
</li>
</ul>
</section>
<car-detail [car]="selectedCar" ></car-detail>
index.html
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>index</title>
<link rel="stylesheet" href="./node_modules/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="app/css/style.css">
<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>
<script src="systemjs.config.js"></script>
<script>
System.import('app').catch(function(err){ console.error(err); });
</script>
</head>
<body>
<header id="header">
<section class="container">
<p>Angula Car</p>
</section>
</header>
<section class="container">
<my-car>
<h1>Carregando...</h1>
</my-car>
</section>
</body>
</html>
systemjs.config.js
/**
* System configuration for Angular 2 samples
* Adjust as necessary for your application needs.
*/
(function(global) {
// map tells the System loader where to look for things
var map = {
'app': 'app', // 'dist',
'@angular': 'node_modules/@angular',
'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
'rxjs': 'node_modules/rxjs'
};
// packages tells the System loader how to load when no filename and/or no extension
var packages = {
'app': { main: 'js/boot.js', defaultExtension: 'js' },
'rxjs': { defaultExtension: 'js' },
'angular2-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' },
};
var ngPackageNames = [
'common',
'compiler',
'core',
'forms',
'http',
'platform-browser',
'platform-browser-dynamic',
'router',
'router-deprecated',
'upgrade',
];
// Individual files (~300 requests):
function packIndex(pkgName) {
packages['@angular/'+pkgName] = { main: 'index.js', defaultExtension: 'js' };
}
// Bundled (~40 requests):
function packUmd(pkgName) {
packages['@angular/'+pkgName] = { main: '/bundles/' + pkgName + '.umd.js', defaultExtension: 'js' };
}
// Most environments should use UMD; some (Karma) need the individual index files
var setPackageConfig = System.packageWithIndex ? packIndex : packUmd;
// Add package entries for angular packages
ngPackageNames.forEach(setPackageConfig);
var config = {
map: map,
packages: packages
};
System.config(config);
})(this);
package json.
{
"name": "angular-car",
"version": "1.0.0",
"description": "QuickStart package.json from the documentation, supplemented with testing support",
"scripts": {
"start": "tsc && concurrently \"tsc -w\" \"lite-server\" ",
"lite": "lite-server",
"tsc": "tsc",
"tsc:w": "tsc -w"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"@angular/common": "2.0.0-rc.3",
"@angular/compiler": "2.0.0-rc.3",
"@angular/core": "2.0.0-rc.3",
"@angular/forms": "0.1.1",
"@angular/http": "2.0.0-rc.3",
"@angular/platform-browser": "2.0.0-rc.3",
"@angular/platform-browser-dynamic": "2.0.0-rc.3",
"@angular/router": "3.0.0-alpha.7",
"@angular/router-deprecated": "2.0.0-rc.2",
"@angular/upgrade": "2.0.0-rc.3",
"systemjs": "0.19.27",
"core-js": "^2.4.0",
"reflect-metadata": "^0.1.3",
"rxjs": "5.0.0-beta.6",
"zone.js": "^0.6.12",
"angular2-in-memory-web-api": "0.0.12",
"bootstrap": "^3.3.6"
},
"devDependencies": {
"concurrently": "^2.0.0",
"lite-server": "^2.2.0",
"typescript": "^1.8.10",
"typings": "^1.0.4",
"canonical-path": "0.0.2",
"http-server": "^0.9.0",
"tslint": "^3.7.4",
"lodash": "^4.11.1",
"jasmine-core": "~2.4.1",
"karma": "^0.13.22",
"karma-chrome-launcher": "^0.2.3",
"karma-cli": "^0.1.2",
"karma-htmlfile-reporter": "^0.2.2",
"karma-jasmine": "^0.3.8",
"protractor": "^3.3.0",
"rimraf": "^2.5.2"
},
"repository": {}
}
Everything indicates that it is a mere syntax problem. But since you have a lot of code there, it is difficult to identify. I could only see that in the file car-Detail.component.ts you import @angular/Core, with a capital 'C'. But I don’t know if this is really the problem.
– Marlon
Vlw guy Thank you very much, the problem was that same.
– Marcos Tulio
Oops! I’ll post it as an answer, then you’ll accept it as a correct answer, ok?
– Marlon