kfmc_website/src/app/External-Page/new-page/new-page.component.ts

import { HttpClient } from '@angular/common/http';
import { ActivatedRoute, Params } from '@angular/router';
import { AuthServiceService } from './../../shared/auth-service.service';
import { Component, OnInit } from '@angular/core';
import { NgxSpinnerService } from 'ngx-spinner';
import { ExternalPageService } from '../../shared/external-page.service';

@Component({
  selector: 'app-new-page',
  templateUrl: './new-page.component.html',
  styleUrls: ['./new-page.component.css']
})
export class NewPageComponent implements OnInit {

  constructor(private authSer: AuthServiceService, 
    private http: HttpClient,
    private spinner: NgxSpinnerService,
    private externalService: ExternalPageService,
    private route:ActivatedRoute) { 
      this.spinner.show();
    }

    reportId: number;

    reportData = {
      created_at: '',
      title: '',
      title_en: '',
      description: '',
      description_en: '',
      photos: [],
    };

    singleImg = {
      photo: '',
    };

    externalServices = [];

  ngOnInit() {
    
    this.authSer.homeActivate = false;

    this.route.params.subscribe(
      (params: Params) => {
        this.reportId = params['reportId'];
      }
    );


    //get external services data
    this.externalService.getExternalServices().subscribe(
      (responce) => {
        console.log('serviceees', responce);
        this.externalService = responce['external_services'];
      }, 
      (error) => {
        console.log(error);
      }
    );
    

    this.http.get(this.authSer.pathApi + '/get_report/' + this.reportId).subscribe(
      (responce) => {
        console.log(responce);
        const singleDataImg = responce['report']['photos'].splice(responce['report']['photos'].indexOf(responce['report']['photos'][0]) , 1);
        console.log('single image data' , singleDataImg);
        this.singleImg.photo = singleDataImg[0].photo;
        console.log('single image ', this.singleImg.photo);

        console.log('responnnnnce' , responce['report']);

        this.reportData.created_at = responce['report'].created_at;
        this.reportData.title = responce['report'].title;
        this.reportData.title_en = responce['report'].title_en;
        this.reportData.description = responce['report'].description;
        this.reportData.description_en = responce['report'].description_en;
        for(let i = 1; i < responce['report']['photos'].length; i++) {
          this.reportData.photos.push(responce['report']['photos'][i]);
        }
        console.log('dddddddddddddddddddd', this.reportData);
        this.spinner.hide();
      },
      (error) => {
        console.log(error);
      }
    );



  }

}