1

I am making a simple application but I don't know why my home component's onInit function is called everytime i upload a new post

the code for home.component.ts file is

import { AngularFireDatabase } from '@angular/fire/database';
import { ToastrService } from 'ngx-toastr';
import { Component, OnInit, OnChanges } from '@angular/core';
@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit,OnChanges {

  users=[]
  posts = []
  isLoading = false
  constructor(
    private db:AngularFireDatabase,
    private toastr:ToastrService
  ) { 
    this.isLoading = true;
    this.db.object('/users')
    .valueChanges()
    .subscribe(
      (obj)=>{
           console.log("value changes of the user is called");
        if(obj){
          this.users = Object.values(obj) // converting object values into array 
          this.isLoading = false;
        }
        else
        {
          this.toastr.error("No User Found");
          this.users = [];
          this.isLoading = false;
        }
      }
      
    )

    //getting all the posts from the firebase 

     this.db.object('/posts')
     .valueChanges()
     .subscribe(
       (obj)=>{
            console.log("value changes of post called");  
          if(obj){
            this.posts = Object.values(obj).sort((a,b)=>b.date-a.date); //sorting 
           
            this.isLoading = false;
          }
          else{
            this.toastr.error("No post to display");
            this.posts=[];
            this.isLoading = false;
          }
       }

     )
  }

  ngOnInit(): void
  {
    console.log("onInit if home called")
  }

  ngOnChanges():void{
    console.log("onChanges of home is called")
  }
  
}

the code for my home.component.html file is

<div class="container-fluid">
    <div
      *ngIf="isLoading; else Content"
      class="d-flex justify-content-center align-items-center min-vh-100"
    >
      <div
        class="spinner-border text-light"
        style="width: 3rem; height: 3rem;"
        role="status"
      ></div>
    </div>
  
    <ng-template #Content>
      <div class="row m-2">
        <div class="col-md-7">
        <!-- will render list of post here -->
          <div *ngFor="let post of posts">
              <app-post [post]='post'></app-post>
           </div>  
          </div>
        
        <div class="col-md-5">
          <p class="text-primary editor text-uppercase text-center">Recent new User</p>
          <div *ngFor="let user of users">
              <app-user [user]="user"></app-user>
          </div>
        </div>
      </div>
    </ng-template>
  </div>

so my question is basically why my home component is re rendered again again after I upload a new post

Gaël J
  • 11,274
  • 4
  • 17
  • 32
Aakash Tiwari
  • 81
  • 6
  • you shouldn't write any logic code in your constructor, anything related to the component, initial settings or something else should be on your `ngOnInit`. Try putting all the constructor logic inside your `ngOnInit`. Let me know if that solves your problem. – Andres2142 Jun 22 '21 at 21:44
  • @Andres2142 what is the reasoning behind empty constructor? – robert Jun 22 '21 at 22:04
  • https://stackoverflow.com/questions/35763730/difference-between-constructor-and-ngoninit – Andres2142 Jun 22 '21 at 22:23

0 Answers0