CODEWITHSUNDEEP
angulartypescript
Mex
Mex

Reputation: 135

Angular 4 Stop a component from reloading

I want my component to be steady. The way it works right now is that it reloads every time you go to a different page. But the way I want it to work is that it does not reload. You see I have a Marquee in the Header, and ever page it reloads. so that is not very functional.

enter image description here

You Can see the "header" in blue. It has a newsfeed like slider, and every time you go to another page it reloads the slider. So therefore i need the component to stop reloading when it goes to a different page.

-----------------UPDATE---------------

code for the html

    <div class="row page-header">
  <div class="col-sm-3 align-left"><img class="customer-logo" [src]="_DomSanitizationService.bypassSecurityTrustUrl('data:image/jpg;base64,'+ kioskservice.getLogo())"/></div>
  <div class="col-sm-6 align-center"><marquee direction="left" scrollamount="5" behavior="scroll">{{translationservice.getExpression("Appointment.AddEdit_PostalCodeServiceError")}}</marquee></div>
  <div class="col-sm-3 align-right"><i class="far fa-clock"></i>{{ clockservice.time | date:"HH:mm" }}</div>
</div>

The way the components gets called to the pages

<page-header></page-header>

Upvotes: 1

Views: 3999

Answers (1)

ForestG
ForestG

Reputation: 18105

You did not provide any code, so I just guess you have a basic app, with a <router-outlet> in the app.component.html.

The purpose of that is, that anytime your app recieves a new route, the Angular Router locates a component that has a matching routing entry in the app.module for it, at RouterModule.forRoot(....)

any component you render this way, will get destroyed if the route changes and a different component loads.

What you can do to prevent this:

  1. insert the component into the app.component directly. This way it will be always shown - and you won't use the router outlet. The header is fixed in the app.component.html. You can hide it from rendering with *ngIf and some basic services if you still need to hide it on some routes.
  2. insert the component into a different router

Update: So your app.component.html looks like something like this:

<some random tags>
    <router-outlet></router-outlet>
</some random tags>

change it to something like this:

<some random tags>
    <your-header-tag-name></your-header-tag-name>
    <router-outlet></router-outlet>
</some random tags>

You can access it with @ViewChild from the app.component.ts

Upvotes: 3

Related Questions