my news feed don't display until i click the link twice

Question

i am working on this small app that display news from Firebase database but when suddenly i go to news link or feed it doesn't display until i click the link in navbar twice i am using angular please help

this is my service file :

import {Injectable} from '@angular/core';
import {AngularFireDatabase} from 'angularfire2/database';


@Injectable({
  providedIn: 'root'
})
export class NewsService {
  list: any[];

  constructor(db: AngularFireDatabase) {
    db.list('/actu').valueChanges()
      .subscribe(list => {
        this.list = list;
        console.log(this.list);
      });
  }

  Getlist() {
    return this.list;
  }

  getnews(title: string) {
    return this.list.find(value => value.titre === title);
  }
}

Answer 1

It's better not to not fulfill the call in the constructor and not to subscribe() to the observable inside the service. Instead, return it and subscribe to it in the component where you show this data.

news.service.ts

import {Injectable} from '@angular/core';
import {AngularFireDatabase} from 'angularfire2/database';


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

  constructor(private db: AngularFireDatabase) {
  }

  Getlist() {
    return db.list('/actu').valueChanges();
  }
}

news.component.ts

import { NewsService } from './news.service';
//component declarations and imports ...
export class NewsComponent implements OnInit {
   list: any[];
   constructor(private newsService: NewsService){}

   buttonClicked(){
      this.newsService.Getlist().subscribe(list => {
        this.list = list;
        console.log(this.list);
      })
   }
}

news.component.html

<a (click)="buttonClicked()">nav button</a>

Of course this will not be the only code in your service, component, or html .. It's just the code that highlights your issue.