I am having a problem with angular using the default angular visual studio project. I am currently unsure of how to add more than one component to a .ts file and I am starting very simple
all i am trying to do is add the existing "Counter" component to the existing fetch-data.html page
import { Component } from '@angular/core';
@Component({
selector: 'app-counter-component',
templateUrl: './counter.component.html'
})
export class CounterComponent {
public currentCount = 0;
public incrementCounter() {
this.currentCount++;
}
}
to fetch-data-component.html
<h1 id="tableLabel">Weather forecast</h1>
<p>This component demonstrates fetching data from the server.</p>
<h1>Counter</h1>
<p>This is a simple example of an Angular component.</p>
<p aria-live="polite">Current count: <strong>{{ counter }}</strong></p>
<button class="btn btn-primary" (click)="counter.incrementCounter()">Increment</button>
<p *ngIf="!forecasts"><em>Loading...</em></p>
<table class='table table-striped' aria-labelledby="tableLabel" *ngIf="forecasts">
<thead>
<tr>
<th>Date</th>
<th>Temp. (C)</th>
<th>Temp. (F)</th>
<th>Summary</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let forecast of forecasts">
<td>{{ forecast.date }}</td>
<td>{{ forecast.temperatureC }}</td>
<td>{{ forecast.temperatureF }}</td>
<td>{{ forecast.summary }}</td>
</tr>
</tbody>
</table>
import { Component, Inject } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { CounterComponent } from '../counter/counter.component';
@Component({
selector: 'app-fetch-data',
templateUrl: './fetch-data.component.html',
})
export class FetchDataComponent
{
public counter: CounterComponent;
public forecasts: WeatherForecast[];
constructor(http: HttpClient, @Inject('BASE_URL') baseUrl: string)
{
http.get<WeatherForecast[]>(baseUrl + 'weatherforecast').subscribe(result =>
{
this.forecasts = result;
}, error => console.error(error));
}
}
interface WeatherForecast {
date: string;
temperatureC: number;
temperatureF: number;
summary: string;
}
as you can see I have imported CounterComponent and added it to the export class
export class FetchDataComponent
{
public counter: CounterComponent;
but all I get is errors."incrementCounter is not a function" I am not really sure where to go after importing CounterComponent
how can I import and add the counter component to the fetch-data.html page? What is the right way to import and use this component
<app-counter-component></app-counter-component>
fetch-data.component.html
<h1> Some heading</h1>
<app-counter-component></app-counter-component>
<h2> The End </h2>