CODEWITHSUNDEEP
javascriptjqueryangularowl-carousel
İsmail Kasap
İsmail Kasap

Reputation: 109

Owl.carousel.min.js Routed Page Reload on Angular

I working on an Angular project and using a template. My template uses owl.carousel.min.js. My problem that routed page resize and reload after routing when i clicked any menu button. I don't want to reload page when routing.

index.html ...

<script type='text/javascript' src='./assets/js/owl.carousel.min.js'><\/script>

home.component.html

 <ul id="menu-important-links" class="menu rt-mega-menu-transition-slide">
     <li id="menu-item-222" class="home-megamenu menu-item menu-item-type-custom menu-item-object-custom rt-mega-menu-full-width rt-mega-menu-hover item-222">
         <a routerLinkActive="active" routerLink="/">{{ 'Home' | translate }}</a>
     </li>           
     <li id="menu-item-711" class="menu-item menu-item-type-custom menu-item-object-custom menu-flyout rt-mega-menu-hover item-711">
         <a routerLink="/contactus" > {{ 'Contact' | translate }}</a>
     </li>
  </ul>

app-routing-module.ts

const appRoutes: Routes = [
   { path: '', component: HomeComponent, pathMatch: 'full' },
   { path: 'dashboard', component: DashboardComponent },
   { path: 'contactus', component: ContactComponent }
];

@NgModule({
   imports: [RouterModule.forRoot(appRoutes)],
   exports: [RouterModule]
})

Upvotes: 1

Views: 619

Answers (1)

SiddAjmera
SiddAjmera

Reputation: 39452

Use routerLink instead of href. href would reload the page. So get rid of it. And use routerLink which is a special directive that comes with RouterModule. It works similar to an href with the difference that it doesn't reload the page.

So replace this <a href="#">{{'Home' | translate}}</a>. with <a routerLink="/home">{{'Home' | translate}}</a>

Then try changing the sequence of your route config.

const appRoutes: Routes = [
   { path: 'dashboard', component: DashboardComponent },
   { path: 'contactus', component: ContactComponent },
   { path: '', component: HomeComponent, pathMatch: 'full' }
];

Here's a StackBlitz for your reference.

Also, you shouldn't add third-party scripts directly in your index.html file like you've done here. Instead, you should add them to the scripts array of .angular-cli.json or angular.json

Upvotes: 1

Related Questions