Angular Project

Question

For the university I need to write a project in Angular . The project we need to write is: -Create class of cars -Create a sports car class that inherits a car class. - Create a racing class for the sports car class. - Show two sports cars with three races each.

I write all classes but in the command prompt I have this error : "The class 'CarComponent' is listed in the declarations of the NgModule 'AppModule', but is not a directive, a component, or a pipe. Either remove it from the NgModule's declarations, or add an appropriate Angular decorator."

This is my code of the typescript :

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

@Component({
  selector:'app-car',
  templateUrl:'./car.component.html'
})

public class Car {
  name:string;
  model:string;
  price:number;
  year:number;

  constructor(name:string,model:string,price:number,year:number){
    this.name=name;
    this.model=model;
    this.price=price;
    this.year=year;
  }
}

class SportCar extends Car{
  private raceNumber:number;
  private Races:race[];

  public getAllRaces() {
    let temp:race[];
    for (let index = 0; index < this.Races.length; index++) {
      let tempRace= new race(this.Races[index].location,this.Races[index].date,this.Races[index].line,this.Races[index].placeInRace,this.Races[index].isWinner);
      temp.push(tempRace);
    }
    return temp;
  }

  public addNewRace(location:string,date:string,line:string,placeInRace:number,isWinner?:boolean) {
    if(!isWinner){
      let newRace:race = new race(location,date,line,placeInRace);
      this.Races.push(newRace);
    }
    else{
      let newRace:race = new race(location,date,line,placeInRace,isWinner);
      this.Races.push(newRace);
    }
  }
}

class race {
  constructor(public location:string,public date:string,public line:string,public placeInRace:number, public isWinner?:boolean) {
  }
}

export class CarComponent {
  let car1 = new Car('Ferrari', '488 Spider', 500000, 2007);
  let car2= new Car('McLaren','F1 GTR',5300000,1995);
//I need to write their races
  }`

and this is the code of the app.module

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { CarComponent } from './car/car.component';

@NgModule({
  declarations: [
    AppComponent,
    CarComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Thank you

FAROUK BLALOU FAROUK BLALOU · Accepted Answer · 2020-06-16T10:15:30

First you have to place '@Component' decorator just above your CarComponent class declaration like :

@Component({
  selector:'app-car',
  templateUrl:'./car.component.html'
})
export class CarComponent {

}

Then you have to learn more about classes in TypeScript : https://www.typescriptlang.org/docs/handbook/classes.html

Angular Project

1 Answers