Declaring and Initializing a class and using that in other classes in angular-CodePudding

I am trying to understand some angular basics. I have created a class like this. I am not sure this is the correct approach.

export class Cars{
    Items:Car[]=[];
    /**
     *
     */
    constructor() {
        this.Items = [
            { id: "1", name: "Honda" },
            { id: "2", name: "Hyundai" },
            { id: "3", name: "Nissan" },
            { id: "4", name: "Suzuki" },
            { id: "5", name: "Audi" },
            { id: "6", name: "BMW" },
            { id: "7", name: "Mercedes" },
            { id: "8", name: "Toyota" }
          ];        
    }
}

interface Car{
    id:string;
    name:string;
}

I have created this because we have different components in which many dropdowns are required to feed with these Car brands. So I created this in a Ts files called cars.model.ts

So how can I use these across different components dropdowns. Please ignore my poor language.

CodePudding user response：

I think you should make a separate car interface in your folder (ex: car.interface.ts) where you provide the model you want.

  export interface Car {
    id: string,
    name: string
  }

In your component.ts file, you should create an object which will be the model of your Car interface.

first the import part:

    import { Cars } from '....'

    @Component({
     selector: 'app-root',
     templateUrl: './app.component.html',
     styleUrls: ['./app.component.scss']
      })
     export class AppComponent implements OnInit{
     myItems: Car[]

     constructor() {
      this.myItems = [
            { id: "1", name: "Honda" },
            { id: "2", name: "Hyundai" },
            { id: "3", name: "Nissan" },
            { id: "4", name: "Suzuki" },
            { id: "5", name: "Audi" },
            { id: "6", name: "BMW" },
            { id: "7", name: "Mercedes" },
            { id: "8", name: "Toyota" }
          ];        
     }
      ngOnInit() {}


    }

You can access to that model in any component you want.

CodePudding user response：

Creating two separated files car.interface.ts and car.service.ts

Note: Using id as number is better approach.

export interface Car {
  id: number,
  name: string
}

export class CarService {

  public getCars(): Car[] {
    return [
      {id: 1, name: "Honda"},
      {id: 2, name: "Hyundai"},
      {id: 3, name: "Nissan"},
      {id: 4, name: "Suzuki"},
      {id: 5, name: "Audi"},
      {id: 6, name: "BMW"},
      {id: 7, name: "Mercedes"},
      {id: 8, name: "Toyota"}
    ];

  }
}

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {

  private cars: Car[] = [];

  constructor(private carService: CarService) {

  }

  ngOnInit() {
    this.cars = carService.getCars();
  }
}

CodePudding user response：

You want to create a service to inject in other components:

@Injectable({
  providedIn: 'root'
})
export class CarService {
    getItems(): Car[] {
        return [
            { id: "1", name: "Honda" },
            { id: "2", name: "Hyundai" },
            { id: "3", name: "Nissan" },
            { id: "4", name: "Suzuki" },
            { id: "5", name: "Audi" },
            { id: "6", name: "BMW" },
            { id: "7", name: "Mercedes" },
            { id: "8", name: "Toyota" }
          ];        
    }
}

In other components:

@Component({...})
export class SomeComponent implements OnInit {

  cars: Car[] = []

  constructor(
    private carService : Carservice
  )

  ngOnInit() {
    this.fetchCars();
  }

  fetchCars(): void {
    this.cars = this.carService.getItems()
  }
}

Or as Gunnar B. pointed out, create a file (e.g.: Data.ts):

export const CARS = [
  { id: "1", name: "Honda" },
  { id: "2", name: "Hyundai" },
  { id: "3", name: "Nissan" },
  { id: "4", name: "Suzuki" },
  { id: "5", name: "Audi" },
  { id: "6", name: "BMW" },
  { id: "7", name: "Mercedes" },
  { id: "8", name: "Toyota" }
]

And import it:

import { Data } from './data/Data'

The advantage of using the service is that you can easily change it to implement some back-end service instead of static data.