title: How to enable the Previous and next button for owl carousel in angular 6,7,8,9
body: <pre><code>    How to enable the Previous and next button for owl carousel in angular 6,7,8,9
      how to add &quot;arrow&quot; for navigation in place of &quot;prev/next&quot; button using angular 6,7,8,9 i'm using the owl-carousel2?
  
  I created the owl carousel in angular it's perfectly works but the &quot;prev/next&quot; navigation button for the carousel was not be enabled so please give me a solution to enable the &quot;prev/next&quot; navigation button...
  
  Thank you...
      
      app.component.html:
      
      &lt;div class=&quot;container text-center sampleMobile&quot;&gt;
      
      &lt;!-- &lt;div&gt;Some tags before&lt;/div&gt; --&gt;
        &lt;owl-carousel-o [options]=&quot;customOptions&quot;&gt;
          &lt;ng-template carouselSlide&gt;
           &lt;!-- &lt;img src=&quot;../../assets/img-01.jpeg&quot;&gt; --&gt;
                      &lt;button class=&quot;btn btn-primary&quot; value=&quot;ALL&quot;&gt;ALL&lt;/button&gt;
                      &lt;button class=&quot;btn btn-primary&quot; value=&quot;A&quot;&gt;A&lt;/button&gt;
                      &lt;button class=&quot;btn btn-primary&quot; value=&quot;B&quot;&gt;B&lt;/button&gt;
                      &lt;button class=&quot;btn btn-primary&quot; value=&quot;C&quot;&gt;C&lt;/button&gt;
                      &lt;button class=&quot;btn btn-primary&quot; value=&quot;D&quot;&gt;D&lt;/button&gt;
                      
          &lt;/ng-template&gt;  
          &lt;ng-template carouselSlide&gt;
            &lt;!-- &lt;img src=&quot;../../assets/img-02.jpeg&quot;&gt; --&gt;
                      &lt;button class=&quot;btn btn-primary&quot; value=&quot;E&quot;&gt;E&lt;/button&gt;
                      &lt;button class=&quot;btn btn-primary&quot; value=&quot;F&quot;&gt;F&lt;/button&gt;
                      &lt;button class=&quot;btn btn-primary&quot; value=&quot;G&quot;&gt;G&lt;/button&gt;
                      &lt;button class=&quot;btn btn-primary&quot; value=&quot;H&quot;&gt;H&lt;/button&gt;
                      &lt;button class=&quot;btn btn-primary&quot; value=&quot;I&quot;&gt;I&lt;/button&gt;
                      
          &lt;/ng-template&gt;  
          &lt;ng-template carouselSlide&gt;
            &lt;!-- &lt;img src=&quot;../../assets/img-01.jpeg&quot;&gt; --&gt;
                      &lt;button class=&quot;btn btn-primary&quot; value=&quot;J&quot;&gt;J&lt;/button&gt;
                      &lt;button class=&quot;btn btn-primary&quot; value=&quot;K&quot;&gt;K&lt;/button&gt;
                      &lt;button class=&quot;btn btn-primary&quot; value=&quot;L&quot;&gt;L&lt;/button&gt;
                      &lt;button class=&quot;btn btn-primary&quot; value=&quot;M&quot;&gt;M&lt;/button&gt;
                      &lt;button class=&quot;btn btn-primary&quot; value=&quot;F&quot;&gt;N&lt;/button&gt;
                      
          &lt;/ng-template&gt;  
          &lt;ng-template carouselSlide&gt;
              &lt;button class=&quot;btn btn-primary&quot; value=&quot;N&quot;&gt;O&lt;/button&gt;
              &lt;button class=&quot;btn btn-primary&quot; value=&quot;P&quot;&gt;P&lt;/button&gt;
              &lt;button class=&quot;btn btn-primary&quot; value=&quot;Q&quot;&gt;Q&lt;/button&gt;
              &lt;button class=&quot;btn btn-primary&quot; value=&quot;R&quot;&gt;R&lt;/button&gt;
              &lt;button class=&quot;btn btn-primary&quot; value=&quot;S&quot;&gt;S&lt;/button&gt;
              
          &lt;/ng-template&gt;
          &lt;ng-template carouselSlide&gt;
              &lt;button class=&quot;btn btn-primary&quot; value=&quot;T&quot;&gt;T&lt;/button&gt;
              &lt;button class=&quot;btn btn-primary&quot; value=&quot;U&quot;&gt;U&lt;/button&gt;
              &lt;button class=&quot;btn btn-primary&quot; value=&quot;V&quot;&gt;V&lt;/button&gt;
              &lt;button class=&quot;btn btn-primary&quot; value=&quot;W&quot;&gt;W&lt;/button&gt;
              &lt;button class=&quot;btn btn-primary&quot; value=&quot;X&quot;&gt;X&lt;/button&gt;
              &lt;button class=&quot;btn btn-primary&quot; value=&quot;Y&quot;&gt;Y&lt;/button&gt;
              &lt;button class=&quot;btn btn-primary&quot; value=&quot;Z&quot;&gt;Z&lt;/button&gt;
          &lt;/ng-template&gt;
        &lt;/owl-carousel-o&gt;
        &lt;!-- &lt;div&gt;Some tags after&lt;/div&gt; --&gt;
      
        &lt;/div&gt;
      
      &lt;router-outlet&gt;&lt;/router-outlet&gt;
      
      app.component.ts:
      import { Component, OnInit } from '@angular/core';
      import { NgbCarousel } from '@ng-bootstrap/ng-bootstrap';
      import { OwlOptions } from 'ngx-owl-carousel-o';
      
      import { HttpClient } from '@angular/common/http';
      import { HttpErrorResponse } from '@angular/common/http';
      
      
      
      @Component({
        selector: 'app-root',
        templateUrl: './app.component.html',
        styleUrls: ['./app.component.css']
      })
      export class AppComponent implements OnInit{
        title = 'SampleFour';
      
        constructor() { }
        brandResponse;
        ngOnInit() {
             
        }
        
      
        customOptions: OwlOptions = {
          loop: true,
          mouseDrag: true,
          touchDrag: true,
          pullDrag: true,
          dots: true,
          navSpeed: 700,
          navText: ['',''],
          responsive: {
            0: {
              items: 1
            },
            400: {
              items: 2
            },
            740: {
              items: 3
            },
            940: {
              items: 1
            }
          },
          nav: true
        }
      
      }
      
      
      angular.jaon:
      {
        &quot;$schema&quot;: &quot;./node_modules/@angular/cli/lib/config/schema.json&quot;,
        &quot;version&quot;: 1,
        &quot;newProjectRoot&quot;: &quot;projects&quot;,
        &quot;projects&quot;: {
          &quot;SampleFour&quot;: {
            &quot;projectType&quot;: &quot;application&quot;,
            &quot;schematics&quot;: {},
            &quot;root&quot;: &quot;&quot;,
            &quot;sourceRoot&quot;: &quot;src&quot;,
            &quot;prefix&quot;: &quot;app&quot;,
            &quot;architect&quot;: {
              &quot;build&quot;: {
                &quot;builder&quot;: &quot;@angular-devkit/build-angular:browser&quot;,
                &quot;options&quot;: {
                  &quot;outputPath&quot;: &quot;dist/SampleFour&quot;,
                  &quot;index&quot;: &quot;src/index.html&quot;,
                  &quot;main&quot;: &quot;src/main.ts&quot;,
                  &quot;polyfills&quot;: &quot;src/polyfills.ts&quot;,
                  &quot;tsConfig&quot;: &quot;tsconfig.app.json&quot;,
                  &quot;aot&quot;: true,
                  &quot;assets&quot;: [
                    &quot;src/favicon.ico&quot;,
                    &quot;src/assets&quot;
                  ],
                  &quot;styles&quot;: [
                    &quot;node_modules/bootstrap/dist/css/bootstrap.min.css&quot;,
                    &quot;node_modules/owl.carousel/dist/assets/owl.carousel.min.css&quot;,
                    &quot;node_modules/owl.carousel/dist/assets/owl.theme.default.min.css&quot;,
                    &quot;src/styles.css&quot;
                  ],
                  &quot;scripts&quot;: [
                    &quot;node_modules/jquery/dist/jquery.min.js&quot;,
                    &quot;node_modules/owl.carousel/dist/owl.carousel.min.js&quot;
                  ]
                },
                &quot;configurations&quot;: {
                  &quot;production&quot;: {
                    &quot;fileReplacements&quot;: [
                      {
                        &quot;replace&quot;: &quot;src/environments/environment.ts&quot;,
                        &quot;with&quot;: &quot;src/environments/environment.prod.ts&quot;
                      }
                    ],
                    &quot;optimization&quot;: true,
                    &quot;outputHashing&quot;: &quot;all&quot;,
                    &quot;sourceMap&quot;: false,
                    &quot;extractCss&quot;: true,
                    &quot;namedChunks&quot;: false,
                    &quot;extractLicenses&quot;: true,
                    &quot;vendorChunk&quot;: false,
                    &quot;buildOptimizer&quot;: true,
                    &quot;budgets&quot;: [
                      {
                        &quot;type&quot;: &quot;initial&quot;,
                        &quot;maximumWarning&quot;: &quot;2mb&quot;,
                        &quot;maximumError&quot;: &quot;5mb&quot;
                      },
                      {
                        &quot;type&quot;: &quot;anyComponentStyle&quot;,
                        &quot;maximumWarning&quot;: &quot;6kb&quot;,
                        &quot;maximumError&quot;: &quot;10kb&quot;
                      }
                    ]
                  }
                }
              },
              &quot;serve&quot;: {
                &quot;builder&quot;: &quot;@angular-devkit/build-angular:dev-server&quot;,
                &quot;options&quot;: {
                  &quot;browserTarget&quot;: &quot;SampleFour:build&quot;
                },
                &quot;configurations&quot;: {
                  &quot;production&quot;: {
                    &quot;browserTarget&quot;: &quot;SampleFour:build:production&quot;
                  }
                }
              },
              &quot;extract-i18n&quot;: {
                &quot;builder&quot;: &quot;@angular-devkit/build-angular:extract-i18n&quot;,
                &quot;options&quot;: {
                  &quot;browserTarget&quot;: &quot;SampleFour:build&quot;
                }
              },
              &quot;test&quot;: {
                &quot;builder&quot;: &quot;@angular-devkit/build-angular:karma&quot;,
                &quot;options&quot;: {
                  &quot;main&quot;: &quot;src/test.ts&quot;,
                  &quot;polyfills&quot;: &quot;src/polyfills.ts&quot;,
                  &quot;tsConfig&quot;: &quot;tsconfig.spec.json&quot;,
                  &quot;karmaConfig&quot;: &quot;karma.conf.js&quot;,
                  &quot;assets&quot;: [
                    &quot;src/favicon.ico&quot;,
                    &quot;src/assets&quot;
                  ],
                  &quot;styles&quot;: [
                    &quot;src/styles.css&quot;
                  ],
                  &quot;scripts&quot;: []
                }
              },
              &quot;lint&quot;: {
                &quot;builder&quot;: &quot;@angular-devkit/build-angular:tslint&quot;,
                &quot;options&quot;: {
                  &quot;tsConfig&quot;: [
                    &quot;tsconfig.app.json&quot;,
                    &quot;tsconfig.spec.json&quot;,
                    &quot;e2e/tsconfig.json&quot;
                  ],
                  &quot;exclude&quot;: [
                    &quot;**/node_modules/**&quot;
                  ]
                }
              },
              &quot;e2e&quot;: {
                &quot;builder&quot;: &quot;@angular-devkit/build-angular:protractor&quot;,
                &quot;options&quot;: {
                  &quot;protractorConfig&quot;: &quot;e2e/protractor.conf.js&quot;,
                  &quot;devServerTarget&quot;: &quot;SampleFour:serve&quot;
                },
                &quot;configurations&quot;: {
                  &quot;production&quot;: {
                    &quot;devServerTarget&quot;: &quot;SampleFour:serve:production&quot;
                  }
                }
              }
            }
          }},
        &quot;defaultProject&quot;: &quot;SampleFour&quot;
      }
  </code></pre>
  <p>How to enable the Previous and next button for owl carousel in angular 6,7,8,9
  how to add &quot;arrow&quot; for navigation in place of &quot;prev/next&quot; button using angular 6,7,8,9 i'm using the owl-carousel2?
  I created the owl carousel in angular it's perfectly works but the &quot;prev/next&quot; navigation button for the carousel was not be enabled so please give me a solution to enable the &quot;prev/next&quot; navigation button...
  Thank you...</p>