Property 'example' does not exist on type ' componentName'

Using Angular v17, I am trying to get data from app.component.ts into home.component.ts but I am getting an error "Property 'results' does not exist on type 'HomeComponent'."

My full project is quite spread out but here is what I have to work with:

This is from home.component.ts

import { Component, inject, Input } from '@angular/core'; import { CommonModule } from '@angular/common'; import { DataLayerComponent } from '../data-layer/data-layer.component'; import { DataLayer } from '../datalayer'; import { DataService } from '../data.service'; import { AppComponent } from '../app.component'; @Component({ selector: 'app-home', standalone: true, imports: [ CommonModule, DataLayerComponent, AppComponent], /* Template here */ export class HomeComponent { dataLayer: DataLayer = { name: this.results.name, /* Property 'results' does not exist on type 'HomeComponent'.*/ capital: this.results.capital, region: this.results.region, income: this.results.income, long: this.results.long, lat: this.results.lat }; }

My datalayer.ts file:

export interface DataLayer { name: {}; capital: {}; region: {}; income: {}; long: {}; lat: {}; }

My data-layer.component.ts file (if relevant):

import { Component, Input } from '@angular/core'; import { CommonModule } from '@angular/common'; import { DataLayer } from '../datalayer'; import { RouterLink } from '@angular/router' import { RouterOutlet } from '@angular/router' @Component({ selector: 'app-data-layer', standalone: true, imports: [CommonModule, RouterLink, RouterOutlet], template: ` <section class="datalisting"> Name: {{dataLayer.name}}<br> Capital: {{dataLayer.capital}}<br> Region: {{dataLayer.region}}<br> Income: {{dataLayer.income}}<br> Longitude: {{dataLayer.long}}<br> Latitude: {{dataLayer.lat}}<br> <a [routerLink]="['/details', dataLayer]">Learn More</a> </section> `, styleUrl: './data-layer.component.css' }) export class DataLayerComponent { @Input() dataLayer!: DataLayer }

And this is from app.component.ts

import { RouterModule } from '@angular/router'; import { AfterViewInit, Component, ElementRef, ViewChild } from '@angular/core'; import { HomeComponent } from './home/home.component'; import { HttpClient } from '@angular/common/http'; import { Injectable } from '@angular/core'; @Component({ selector: 'app-root', standalone: true, imports: [HomeComponent, RouterModule], templateUrl: './app.component.html', styleUrl: './app.component.css' }) export class AppComponent implements AfterViewInit { title = 'angular-map'; results: any; @ViewChild('svgObject') svgObject!: ElementRef; ngAfterViewInit(): void { this.svgObject.nativeElement.addEventListener('load', () => { const svgDoc = this.svgObject.nativeElement.contentDocument; const paths = svgDoc.querySelectorAll('path'); paths.forEach((path: { addEventListener: (arg0: string, arg1: (event: any) => void) => void; }) => { path.addEventListener('click', (event: { target: any; }) => { this.onCountryClick(event.target); }); }); }); } constructor(private http: HttpClient) {} onCountryClick(target: any) { console.log('Country clicked:', target.id); var addedId = target.id; var fullUrl = ('https://api.worldbank.org/v2/country/' + addedId + '?format=json'); console.log(fullUrl); this.http.get(fullUrl).subscribe(responseData => console.log(responseData)); this.http.get(fullUrl).subscribe(data => { this.results = data; console.log(this.results); console.log('Country Name:', this.results[1][0].name); this.results.name = this.results[1][0].name; this.results.capital = this.results[1][0].capitalCity; this.results.region = this.results[1][0].region.value; this.results.income = this.results[1][0].incomeLevel.value; this.results.long = this.results[1][0].longitude; this.results.lat = this.results[1][0].latitude; }); } }

The code within app.component.ts displays the correct data from the JSON file retrieved from api.worldbank.org in the console log. I need to get that information to home.component.ts so it displays correctly within the webpage I have built.

Here is app.component.html

<div class="container"> <div class="column left" #imageContainer (click)="onCountryClick($event)"> <object type="image/svg+xml"data="assets/the-map.svg" #svgObject></object> </div> <div class="column right"> <app-home></app-home> </div> </div>

I have tried this in the home.component.ts file, but was met with a different issue:

export class HomeComponent { dataLayer: DataLayer = { name: {{this.results[1][0].name}}, capital: {{this.results[1][0].capital}}, region: {{this.results[1][0].region}}, income: {{this.results[1][0].income}}, long: {{this.results[1][0].long}}, lat: {{this.results[1][0].lat}} }; }

dataLayer shows an error "Type '{ name: {}; }' is missing the following properties from type 'DataLayer': capital, region, income, long, lat".