TS file not getting called

Question

I am trying to insert the selector in to my html using angular 2.

I have created html and ts file as below along with appmodule.ts.

My html page seems to be not calling the ts file (weather.component.ts) on its load. its not displaying the template defined in typescript file. i have tried using system.import in html head tag but with no luck.

Appreciate your inputs.

HTML

<div>
    <h3>Weather for {{weather.city}}</h3>

</div>

weather.component.ts file

import { Component } from '@angular/core';

@Component({
selector: 'weather',
template: '<h1>u are here </h1>'

})

export class WeatherComponent {
public weather: Weather;

constructor() {
this.weather = { temp: "12", summary: "Barmy", city: "London" };
}
}

interface Weather {
temp: string;
summary: string;
city: string;
}

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { RouterModule } from '@angular/router';
import {ROUTER_PROVIDERS} from 'angular2/router';
import { UniversalModule } from 'angular-universal';
import { WeatherComponent } from './components/weather.component';

@NgModule({
bootstrap: [WeatherComponent],
declarations: [WeatherComponent],
imports: [UniversalModule],
})

export class AppModule {
}

platformBrowserDynamic().bootstrapModule(AppModule);

Answer 1

Because it doesn't work like that.

When you give your component a selector (here weather), you are supposed to use it as a tag in your html.

This would give, for your HTML :

<div>
    <h1>You are here</h1>
    <weather></weather>
</div>

And in your template HTML :

<h3>Weather for {{weather.city}}</h3>