CODEWITHSUNDEEP
javascripthtmlangularswiper.js
Nilay Singh
Nilay Singh

Reputation: 2341

Angular 6 integrating existing html template

I am trying to add html template in my angular project but I am getting few errors, and I don't know what is the issue.

My project is here:

https://bitbucket.org/shakir_123/angular-theme/src/master/

Here When I am adding these files in index.html it works fine. 

 <!DOCTYPE html>
<html lang="en">
  <head>
      <title>Hello World</title>
      <base href="/">
      <!-- Required meta tags -->
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 
  </head>
  <body>
       #code can be found here: https://gist.github.com/nwoow/4108e4d8d8e0cc532fe5eda3a923317d
  </body>
</html>

This work file but when I adding this into my app.component.html:

<div class="main-wrapper">
   #code can be found here: https://gist.github.com/nwoow/4108e4d8d8e0cc532fe5eda3a923317d
</div>

Everything works fine but the slider is not working. I don't know what is the issue how can I make it work.

Upvotes: 0

Views: 732

Answers (1)

Biffyn
Biffyn

Reputation: 68

It is super hard to give an answer based on the information you provided. When asking questions try to be specific and provide as much information as possible.

However, I will do my best to provide some assistance. By the slider, I assume you me the slider on the home page. Looking at the source code (and cloning the repo and running locally) you provided the slider as far as I can tell uses swiper. I can see you include the css and js for this in the angular-cli.json but you don't initialize Swiper anywhere.

My first suggestion would be to read the swiper documentation and google for swiper plus angular implementation examples.

However,to make your life easier I would suggest using the angular2-useful-swiper npm package. You can read the documentation and see example implementation here 

npm install --save angular2-useful-swiper

Then install Swiper via npm

npm install --save [email protected]

Remove the references already your angular-cli.json and add the following

"styles": [
    "styles.css",
    "../node_modules/swiper/dist/css/swiper.css"        
],
"scripts": [
    "../node_modules/swiper/dist/js/swiper.js"                
],

Import the SwiperModule at the appropriate level in your app.

import { NgModule }       from '@angular/core';
import { BrowserModule }  from '@angular/platform-browser';

import { SwiperModule } from 'angular2-useful-swiper';

import { AppComponent }   from './app.component';

@NgModule({
    imports: [
        BrowserModule,
        SwiperModule
    ],
    declarations: [
        AppComponent,
    ],
    bootstrap: [AppComponent]
})
export class AppModule { }

Then create a component for your slider something like:

HTML:

<swiper [config]="config">
    <div class="swiper-wrapper">
        <div class="swiper-slide">Slide 1</div>
           <div class="swiper-slide">Slide 2</div>
           <div class="swiper-slide">Slide 3</div>
           <div class="swiper-slide">Slide 4</div>
         </div>
         <!-- Add Pagination -->
         <div class="swiper-pagination"></div>
         <!-- Add Arrows -->
         <div class="swiper-button-next"></div>
         <div class="swiper-button-prev"></div>
    </div>
</swiper>

TypeScript

export class MySwpierComponent implements OnInit {

    config: SwiperOptions = {
            pagination: '.swiper-pagination',
            paginationClickable: true,
            nextButton: '.swiper-button-next',
            prevButton: '.swiper-button-prev',
            spaceBetween: 30
        };
}

Inject your new component into the desired module and use. Hope this helps resolve your issue.

Upvotes: 1

Related Questions