Angular2 router.redirect in component is loading the component. But http data population in view is delaying for more than 10 seconds

Question

In my Angular application,I am having a controller for category. In which (It has to check weather the customer is selected or not.If not it has to redirect to customer view page. Working fine.(But when redirecting to customer page -customer list is populating in component constructor -not loading in view page) After few seconds(almost 10-15 )seconds. It is loading in View Page.

But if i open customer page by clicking the menu.(data loading is Fine).Why is this issue occurring

I have used some jquery inside typsecript for click functions and so.
I will post my code along with this please verify and help me.
Thank you.

constructor(private sidepageadd:SidePageAddService,  private router:Router ,private zone:NgZone)
  {    
    this.category_id=this.sidepageadd.getcategory_id();
    this.categoryName=sidepageadd.getcategoryName();     
    this.customer_id=this.sidepageadd.getcustomer_id();
    this.employee_id=this.sidepageadd.getemployee_id();         
    if(this.customer_id==undefined){    
     toastr["error"]("Kindly Choose a customer to Begin with!");
       this.router.navigate( ['/home', {outlets: {'menu': 'home/viewCustomer'}}]);
    }
    else if(this.category_id==undefined){
      alert("Choose a category");
    }
    var catName=this.categoryName;
        if($('#catName').text()!=catName){
          $('#catName').text(catName);
        }
  }

and after view seconds view is populating like this

Answer 1

I had similar issue before, i used jquery for DOM manipulation learn to use viewchild, Renderer,Elementref etc and use queryselector for manipulating dom inside typescript code.

Go through this link: https://blog.angularindepth.com/exploring-angular-dom-abstractions-80b3ebcfc02 (I learned from here) I guess this will help you.