Currently, I am following the "Tour of Heroes" Angular tutorial on angular.io.
After incorporating a module named 'heroes' and displaying it, everything seemed to be working fine. The contents of heroes.component.html only featured a single p-tag saying "heroes works!". However, when I attempt to make changes, my application updates without reflecting the modifications made in heroes.component.html. Consequently, despite removing all references to "heroes works" from the project, the message continues to display in the application. Any assistance you can provide would be greatly appreciated.
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 { }