Property 'artist' does not exist on type 'ArtistItemsComponent'-CodePudding

So I'm new to Angular, and following an Angular5 course on LinkedIn. I'm trying to create a subcomponent named artist-items, and have created the HTML and TS files for it.

Okay, apologies for posting a lot of code, because I'm a newbie and I'm confused as to what might be the problem here.

I'm trying to create a subcomponent named my-artists, wherein I add a part of HTML to it, and try to link it to the main HTML, I accept an object named artist (from a for loop, fetching data from a JSON file) in the main component HTML, where the selector of the subcomponent is present.

Following is the error I get:

Error: src/app/artist-items/artist-items.component.html:3:107 - error TS2339: Property 'artist' does not exist on type 'ArtistItemsComponent'.      

3       style="width:70px;" [src]="'./assets/images/'   artist.shortname   '_tn.jpg'" alt="{{ 'Photo of '   artist.name }}">
                                                                                                            ~~~~~~

  src/app/artist-items/artist-items.component.ts:5:16
    5   templateUrl: './artist-items.component.html',
                     ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component ArtistItemsComponent.

I've only posted a part of the error, because I got a few more errors in the same format, that there's an error in my subcomponent's HTML. I'm assuming that there might have been a wrong format in the object at my main HTML, where the subcomponent's selector lies. Please help me out!

Main Component (App.Component) TS file:

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styles: [
    `
      .list-group-item:first-child {
        border-top-left-radius: 0;
        border-top-right-radius: 0;
        border-top: 0;
      }
    `
  ]
})
export class AppComponent implements OnInit {
  query: string;
  artists: any;

  showArtist(e:any,item: any) {
    this.query = item.name;
    item.highlight = !item.highlight;
  }

  constructor( private http: HttpClient ) {
    this.query = '';
  }

  ngOnInit(): void {
    this.http.get<any>('../assets/data.json').subscribe( data => {
      this.artists = data;
    })
  }

}

Main (App Component) HTML:

<div >
          <a href="#" 
            *ngFor="let artist of artists"
            (click)="showArtist(artist)"
            [style.backgroundColor]="artist.highlight ? '#EEE' : '#FFF'">



            <app-artist-items [artist]="artist" ></app-artist-items> **THIS IS THE SUBCOMPONENT**



          </a><!-- link -->
</div><!-- list-group -->

Main (App Module) TS:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import {HttpClientModule} from '@angular/common/http';
import { ArtistItemsComponent } from './artist-items/artist-items.component';
@NgModule({
  declarations: [
    AppComponent,
    ArtistItemsComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule,
    HttpClientModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

artist-items-component TS:

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

@Component({
  selector: 'app-artist-items',
  templateUrl: './artist-items.component.html',
  inputs: ['artist']
})
export class ArtistItemsComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

artist-items-component HTML:

<div >
    <img  
      style="width:70px;" [src]="'./assets/images/'   artist.shortname   '_tn.jpg'" alt="{{ 'Photo of '   artist.name }}">
    <div >
      <h5 >{{ artist.name }}</h5>
      {{ artist.reknown }}
    </div><!-- media body -->
</div><!-- media -->

CodePudding user response：

The error message is quite clear. You are missing the declaration of the artist variable in ArtistItemsComponent.

From your scenario, you are passing the artist object from the AppComponent (parent component) to ArtistItemsComponent (child component), you need to use @Input() decorator for the artist declaration as well.

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

export class ArtistItemsComponent implements OnInit {
  @Input() artist: any;
}

Demo @ StackBlitz