I am doing the official "Tour of Heroes" Angular tutorial on angular.io.
After adding a module called 'heroes', and showing it, everything was fine. The heroes.component.html only contained one p-tag saying "heroes works!". When I change it, my application will get updated, but it won't update the changes made in heroes.component.html. So, even when nowhere in the project is written "heroes works" anymore, the application still shows that message. I really appreciate your help.
heroes.component.ts:
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-heroes',
templateUrl: './heroes.component.html',
styleUrls: ['./heroes.component.css']
})
export class HeroesComponent implements OnInit {
hero = 'windstorm';
constructor() { }
ngOnInit() {
}
}
heroes.component.html:
<h2>{{hero}}</h2>>
app.component.html:
<h1>{{title}}</h1>
<app-heroes></app-heroes>
app.component.ts:
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'tour';
}
app.module.ts:
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { HeroesComponent } from './heroes/heroes.component';
@NgModule({
declarations: [
AppComponent,
HeroesComponent
],
imports: [
BrowserModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }