Search code examples
arraysangularservice

How to inject an Array from one Service into an array of another service in Angular


I have 2 service, and I need to inject array of one service into an array of another. Here is my model and service of leg-anec-store.service.ts. I need to add the array into history.service.ts, that's why I added Array into model of history. How to get it so I can pass all data from leg-anec-store service to history as 1 of the values of the object of that array

leg-anec-stor.model.ts:

export class LegendsModel {
  public id: number;
  public title: string;
  public short_description: string;
  public text: string;
  public imgPath: string;
  public date: string;
  public type: string;

  constructor(
    id: number,
    title: string,
    desc: string,
    text: string,
    imgPath: string,
    date: string
  ) {
    this.id = id;
    this.title = title;
    this.short_description = desc;
    this.text = text;
    this.imgPath = imgPath;
    this.date = date;
    this.type = "legends";
  }
}

leg-anec-stor.service.ts:


import { Injectable } from "@angular/core";
import {
  LegendsModel

} from "../Models/leg-anec-stor.model";

@Injectable({ providedIn: "root" })
export class LegAnecStorSingleService {
  private leg: LegendsModel[] = [
    new AnecdotesModel(
      1,
      "Title Veljici1",
      "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
      "There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly ",
      "./../../../assets/img/blog-img/1.jpg",
      new Date("05-06-2020").toDateString(),
    ),

  // Get All Legends //
  getLegendsAll() {
    return this.leg.slice();
  }

And here is History Model and Service.

history.model.ts:

export class HistoryModel {
  public id: number;
  public title: string;
  public description: string;
  public imgPath: string;
  public type: string;
  public arr: Array<any>;

  constructor(
    id: number,
    title: string,
    description: string,
    imgPath: string,
    type: string,
    array: Array<any>
  ) {
    this.id = id;
    this.title = title;
    this.description = description;
    this.imgPath = imgPath;
    this.type = type;
    this.arr = array;
  }
}

history.service.ts:

import { Injectable } from "@angular/core";
import { HistoryModel} from "../Models/history.model";
import { LegAnecStorSingleService } from "./leg-anec-stor.service";
import { LegendsModel } from "./../Models/leg-anec-stor.model";

@Injectable({ providedIn: "root" })
export class HistoryService {
  LegArr: LegendsModel[];

  private historyLegAnecStor: HistoryModel[] = [
    new HistoryModel(
      1,
      "Legende",
      "Lorem ipsum dolor sit amet consectetur adipisicing elit.",
      "./../../../assets/img/bg-img/m5.jpg",
      "legends",
      /////////////I NEED IT HERE, RIGHT?////////////////////
    ),

Solution

  • In your history.service.ts, declare it this way:

    export class HistoryService {
      private LegArr = this.lass.getLegendsAll(); // Use the service you injected in the contructor
      private historyLegAnecStor([
        new HistoryModel(
          1,
          "Legende",
          "Lorem ipsum dolor sit amet consectetur adipisicing elit.",
          "./../../../assets/img/bg-img/m5.jpg",
          "legends",
          this.LegArr.slice() // Add the array your retreived from the other service
        ),
        ]);
      constructor(private lass: LegAnecStorSingleService) {} // Use the dependency injection
    

    This should work with what I understand of your question, but since "when do you get the legends array", "where do you need it" and "what do you want to do with it" are out of scope for this question, you can work from that.

    Do not hesitate to read the official documentation, there's plenty of informations there.