Angular hide progressbar after data loads

Question

I am using FireStore Realtime Database in Angular.
I want to show a progressbar till the data loads from the database, and hide it after it loads.
This is my code:

  export class KavPatuachChatComponent implements OnInit, AfterViewChecked {

  messagesCollection: AngularFirestoreCollection<MessageItem>;
  messages: Observable<MessageItem[]>;
  mAuthService: AuthService;
  constructor(public afs: AngularFirestore, public authService: AuthService) {
    this.mAuthService = authService;
  }
  ngOnInit() {
    this.getChatData();
}
  getChatData() {
    this.messagesCollection = this.afs.collection<MessageItem>('chat_messages', ref => ref.orderBy('DateTime'));
    this.messages = this.messagesCollection.valueChanges();
  }

How do I know when the data loads, in order to hide the progress bar then?

Madan Sandiri · Accepted Answer · 2017-11-26 13:56:43Z

1

this.afs.collection<MessageItem>('chat_messages', ref => {ref.orderBy('DateTime'); 
//code to hide progress bar
});

answered Nov 26, 2017 at 13:56

Madan Sandiri

4691 gold badge4 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

amitairos Over a year ago

Yes, but How do I know when the data loads? Where is there an event or something like that to know that?

Madan Sandiri Over a year ago

the above line that I mentioned is a call back function. It will be called once the data is loaded. alternatively, you can use subscribe() or other call back functions

amitairos Over a year ago

Oh, but it gives me an error: Argument of type '(ref: CollectionReference) => void' is not assignable to parameter of type 'QueryFn'. Type 'void' is not assignable to type 'Query'

Madan Sandiri Over a year ago

try this this.messagesCollection.valueChanges().map(actions => { //code goes here });

Scriptable Over a year ago

Could you please expand on your answer to prevent explaining the solution in the comments. thanks

Tim Tharratt · Accepted Answer · 2017-11-26 13:57:59Z

1

can't you use a *ngIf in the HTML component ? Use a boolean variable to control this before and after the load like this

in .ts

this.dataServiceProcessed = true \ false

In HTML

<div *ngIf="dataServiceProcessed">  
  Display something
</div>

answered Nov 26, 2017 at 13:57

Tim Tharratt

1,3301 gold badge13 silver badges22 bronze badges

2 Comments

amitairos Over a year ago

Yes, but How do I know when the data loads? Where is there an event or something like that to know that?

Tim Tharratt Over a year ago

I'm not sure if there's a more efficient way, You could create a data service and then subscribe like here stackoverflow.com/questions/47338271/…, so after this.dataA= dataAJSON then set your boolean variable that controls the *ngIf

Collectives™ on Stack Overflow

Angular hide progressbar after data loads

2 Answers 2

5 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related