CODEWITHSUNDEEP
jsonangularcomponents
Guilherme Martins Barbosa
Guilherme Martins Barbosa

Reputation: 27

Share JSON data with another component

I want to share the title of a component to another one. In my projects.html i have the {{post.name}} and it's a image that if you click on it goes to another route called "about-project" and i want to the title of this new component have the same as the image.

projects.component.html

<div class="container">
    <div class="columns is-multiline is-mobile">
        <div *ngFor="let post of posts; index as i" class="column is-6">
            <img routerLink="/about-project" src="{{post.img}}">
            <div class="about">
                <h3>{{post.name}}</h3>
                <p class="subtitle">{{post.subt}}</p>
                <p class="description">{{post.descript}}</p>
            </div>
        </div>
    </div>

    <div class="page">
        <span *ngFor="let number of numbers">{{number}}</span>
    </div>
</div>

projects.component.ts

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

import { DataService } from '../data.service';
import { Observable } from 'rxjs';

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

  public numbers = [1,2,3];

posts:Object;
  constructor(private data:DataService) { }

  ngOnInit() {
    this.data.GetPosts().subscribe(
      data => this.posts = data
    )
  }

}

about-project.component.html

<app-header></app-header>

<div class="bg">
    <div class="container">
        <h1>PORTFÓLIO 1</h1> //The title should be here
        <h3>Lorem ipsum dolor sit amet consectetur adipisicing elit.<br>Obcaecati nemo cumque deleniti sed, iusto officiis ipsum natus numquam dignissimos!</h3>
    </div>
</div>

<section class="main">
    <div class="intro">
        <h2><mark>Descrição</mark></h2>
        <h4>Lorem ipsum, dolor sit amet consectetur adipisicing elit.<br>natus sapiente est similique!<br>harum rerum cumque quas a sequi rem accusantium,<br> Ut, ipsam. Ea optio repudiandae facere dolorum, odit cupiditate ab</h4>
    </div>

    <div class="container">
        <h2>O que fizemos</h2>
        <hr>

        <div class="content">
            <img src="../../assets/icons/web-programming.png">
            <img src="../../assets/icons/web-programming.png">
        </div>

        <div class="content">
            <p>Desenvolvimento WEB</p>
            <p>Desenvolvimento WEB</p>
        </div>

        <h2>Projeto final</h2>
        <hr>

        <img src="../../assets/imgs/computer.jpg">
    </div>
</section>

<app-footer></app-footer>

about-project.component.ts

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

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

  constructor() { }

  ngOnInit() {
  }

}

data.service.ts

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

import { HttpClient } from '@angular/common/http'

@Injectable({
  providedIn: 'root'
})
export class DataService {

  constructor(private http: HttpClient) { }

  GetPosts() {
    return this.http.get('https://api.myjson.com/bins/7qzmd');
  }
}

When i click on the image, the text of about-project should be the same of the title of the project clicked

Upvotes: 1

Views: 908

Answers (2)

SiddAjmera
SiddAjmera

Reputation: 39432

Since you've already fetched data from your API in the `ProjectsComponent, it wouldn't make sense to fetch it again.

Sharing the data via a SharedService is one way of doing it.

But if you're using Angular 7.2 or later, you can also share the data using Router.

So to pass the data to the navigated component, you use state:

onProjectClick(post) {
  this.router.navigate(['/about-project'], {state: {data: {...post}}});
}

And in the Component that you want to read the passed data in, you'll read it via window.history.state:

ngOnInit() {
  this.project = window.history.state.data;
}

Here's a Working Sample StackBlitz for your ref.

Upvotes: 0

jordanpowell88
jordanpowell88

Reputation: 837

You could create a service that leverages rxjs to solve this issue. The service would look like this

@Injectable({ provideIn: 'root'})
export class TitleService {
  title$ = new Subject();
}

You can then set the value in the project component like:

this.titleService.title$.next('Project Title');

In the child component you subscribe to the observable like

public childTitle: string;

title$.subscribe(title => this.childTitle = title);

Upvotes: 1

Related Questions