not getting updated data from service to my component1 onclick event in component2 in angular

Question

I am working on angular 9 to make news application.I am using Times of India RSS Feed API https://timesofindia.indiatimes.com

Here is my stackblitz link https://stackblitz.com/github/mehulk05/Newsapp

I have categroies in my home component ,so when i click on any category I am fetching the news of that category in my service and trying to display it in NewsList Component.But somehow when I change my category I am not able to send latest data from service to newsList Component.Though i am getting updated data in console in NewsService but not able to fetch that data in newsListComponent

here is my code

Home.component.html

<div class="container mt-5">
    <div class="col-xs-12">


        <div class="row mt-4">
            <div class="col-xs-3 col-md-3 sidelink">
                <div class="list-group">
                    <a *ngFor="let c of categories" 
                    class="list-group-item list-group-item-action"
                     id="list-home-list" [routerLink]="" 
                     role="tab" aria-controls="home" 
(                    (click)='onClick(c.url)'>{{c.type}}</a>
                </div>
            </div>
            <div class="col-md-9 col-xs-9">
                <router-outlet></router-outlet>
            </div>
        </div>
    </div>
</div>

Home.component.ts

export class HomeComponent implements OnInit {

  categories=[
    {type:"home",url:"https://timesofindia.indiatimes.com/rssfeedstopstories.cms?feedtype=sjson"},
  {type:"recent",url:"https://timesofindia.indiatimes.com/rssfeeds/1221656.cms?feedtype=sjson"},
  {type:"india",url:"https://timesofindia.indiatimes.com/rssfeeds/-2128936835.cms?feedtype=sjson"},
  {type:"cricket",url:"https://timesofindia.indiatimes.com/rssfeeds/4719161.cms?feedtype=sjson"}]


    constructor(private ns:NewsserviceService,
      private router:Router) { }

    ngOnInit(): void {
    }

    onClick(title){
     console.log(title)
      this.ns.getUrl(title)
      this.router.navigate(["/news-list"])
    }

  }

NewsService.ts

export class NewsserviceService {
  url:string='https://timesofindia.indiatimes.com/rssfeedstopstories.cms?feedtype=sjson'
  constructor(private http:HttpClient) { 

  }

  getUrl(url){
    this.url=url
    this.getNewsList();
  }

  getNewsList(){
    this.url='https://cors-anywhere.herokuapp.com/'+this.url
  console.log(this.url)
     this.http.get(this.url ).subscribe(data=>{
      console.log(data)
    })
  }
}

NewsList.component.ts

news:any
    constructor(private ns:NewsserviceService,private cd:ChangeDetectorRef) { }

      ngOnInit() {
      this.news= this.ns.getNewsList();
      console.log("news is"  +this.news)
    }
}

When I click on any category I will get data for first time in console from Newslist component but there after I dont get any data from newsList component but I get data in console from Newservice

Your stackblitz doesn't work due to CORS issues. Can you recreate your problem with a simple example rather than copying your whole project into a stackblitz? — Kurt Hamilton, Mar 20 '20 at 17:33
Maybe instead of saving the data to a variable on the service, try instead using observables: https://angular.io/guide/component-interaction#parent-and-children-communicate-via-a-service — Alexander Staroselsky, Mar 20 '20 at 17:37
I don't understand your problem. Can you clearly state the steps to recreate your problem — Kurt Hamilton, Mar 20 '20 at 17:37
Your child component don't listen the parent's onClick event so they can't update data on html! You can use eventEmmiter for this — Tzimpo, Mar 20 '20 at 17:39
passing url from home component to service > fetching data of that url in service> sending that data to newslist to display but it only wokr for first time after that it dont work — tyler, Mar 20 '20 at 17:40
@Tzimpo can you just show case any simple example of that as I am very new I dont know how to do that — tyler, Mar 20 '20 at 17:40

Mehul Kothari · Accepted Answer · 2020-03-21T08:50:42.907

Here I can see what you are trying to do is

Click event from Component 1 and send some url to service
get data of thaturl in service
send that data to component 2

Now what you can do is you can make an event emitter in service and emit that event from component 1 with service data to component 2.So how to do this Here it is

Service.ts

 SelectedUrlData=new EventEmitter();

 getUrl(url){
    this.url=url
    this.getNewsList();

  }

  getNewsList() {
    this.url = 'https://cors-anywhere.herokuapp.com/' + this.url

    this.http.get<any[]>(this.url).subscribe(data => {
      this.tohome = data

    })

  }

  getData(): Observable<any> {
    this.url='https://cors-anywhere.herokuapp.com/'+this.url
  return this.http.get<any[]>(this.url);
}

Home.ts

@Input() newdata:any


    ngOnInit(): void {
      this.ns.getData().subscribe(data=>
        {
          console.log(data)

        })

    }

    onClick(title){

      this.ns.getUrl(title) 
      this.tohome=this.ns.tohome
      this.ns.selectedurl.emit(this.tohome)
      this.router.navigate(["/news-list"])
    }

newslist.ts

news:any
 ngOnInit() {
        this.ns.getData().subscribe(data=>
          {
            console.log(data)
          })
        this.news = this.ns.getNewsList();
        this.ns.selectedurl.subscribe(data => {
          console.log(data)
      })

    }

Though your answer is working fine but on first click event it is giving me undefined but then it works fine — tyler, Mar 21 '20 at 06:37
then you can just remove the line this.ns.getNewsList(); and place it in newslistcompoent in ngoninit method — Mehul Kothari, Mar 21 '20 at 06:43
it is working fine but though I am not getting data by default on first load — tyler, Mar 21 '20 at 08:47
check the updated ans to get bydefault value you need to subscribe the service in component in ngOninit method which will renderthe data for first time — Mehul Kothari, Mar 21 '20 at 08:51

not getting updated data from service to my component1 onclick event in component2 in angular

1 Answers1