如何在角度 6、7、8、9 中启用猫头鹰轮播的上一个和下一个按钮

Question

    How to enable the Previous and next button for owl carousel in angular 6,7,8,9
    how to add "arrow" for navigation in place of "prev/next" 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 "prev/next" navigation button for the carousel was not be enabled so please give me a solution to enable the "prev/next" navigation button...

Thank you...
    
    app.component.html:
    
    <div class="container text-center sampleMobile">
    
    <!-- <div>Some tags before</div> -->
      <owl-carousel-o [options]="customOptions">
        <ng-template carouselSlide>
         <!-- <img src="../../assets/img-01.jpeg"> -->
                    <button class="btn btn-primary" value="ALL">ALL</button>
                    <button class="btn btn-primary" value="A">A</button>
                    <button class="btn btn-primary" value="B">B</button>
                    <button class="btn btn-primary" value="C">C</button>
                    <button class="btn btn-primary" value="D">D</button>
                    
        </ng-template>  
        <ng-template carouselSlide>
          <!-- <img src="../../assets/img-02.jpeg"> -->
                    <button class="btn btn-primary" value="E">E</button>
                    <button class="btn btn-primary" value="F">F</button>
                    <button class="btn btn-primary" value="G">G</button>
                    <button class="btn btn-primary" value="H">H</button>
                    <button class="btn btn-primary" value="I">I</button>
                    
        </ng-template>  
        <ng-template carouselSlide>
          <!-- <img src="../../assets/img-01.jpeg"> -->
                    <button class="btn btn-primary" value="J">J</button>
                    <button class="btn btn-primary" value="K">K</button>
                    <button class="btn btn-primary" value="L">L</button>
                    <button class="btn btn-primary" value="M">M</button>
                    <button class="btn btn-primary" value="F">N</button>
                    
        </ng-template>  
        <ng-template carouselSlide>
            <button class="btn btn-primary" value="N">O</button>
            <button class="btn btn-primary" value="P">P</button>
            <button class="btn btn-primary" value="Q">Q</button>
            <button class="btn btn-primary" value="R">R</button>
            <button class="btn btn-primary" value="S">S</button>
            
        </ng-template>
        <ng-template carouselSlide>
            <button class="btn btn-primary" value="T">T</button>
            <button class="btn btn-primary" value="U">U</button>
            <button class="btn btn-primary" value="V">V</button>
            <button class="btn btn-primary" value="W">W</button>
            <button class="btn btn-primary" value="X">X</button>
            <button class="btn btn-primary" value="Y">Y</button>
            <button class="btn btn-primary" value="Z">Z</button>
        </ng-template>
      </owl-carousel-o>
      <!-- <div>Some tags after</div> -->
    
      </div>
    
    <router-outlet></router-outlet>
    
    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:
    {
      "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
      "version": 1,
      "newProjectRoot": "projects",
      "projects": {
        "SampleFour": {
          "projectType": "application",
          "schematics": {},
          "root": "",
          "sourceRoot": "src",
          "prefix": "app",
          "architect": {
            "build": {
              "builder": "@angular-devkit/build-angular:browser",
              "options": {
                "outputPath": "dist/SampleFour",
                "index": "src/index.html",
                "main": "src/main.ts",
                "polyfills": "src/polyfills.ts",
                "tsConfig": "tsconfig.app.json",
                "aot": true,
                "assets": [
                  "src/favicon.ico",
                  "src/assets"
                ],
                "styles": [
                  "node_modules/bootstrap/dist/css/bootstrap.min.css",
                  "node_modules/owl.carousel/dist/assets/owl.carousel.min.css",
                  "node_modules/owl.carousel/dist/assets/owl.theme.default.min.css",
                  "src/styles.css"
                ],
                "scripts": [
                  "node_modules/jquery/dist/jquery.min.js",
                  "node_modules/owl.carousel/dist/owl.carousel.min.js"
                ]
              },
              "configurations": {
                "production": {
                  "fileReplacements": [
                    {
                      "replace": "src/environments/environment.ts",
                      "with": "src/environments/environment.prod.ts"
                    }
                  ],
                  "optimization": true,
                  "outputHashing": "all",
                  "sourceMap": false,
                  "extractCss": true,
                  "namedChunks": false,
                  "extractLicenses": true,
                  "vendorChunk": false,
                  "buildOptimizer": true,
                  "budgets": [
                    {
                      "type": "initial",
                      "maximumWarning": "2mb",
                      "maximumError": "5mb"
                    },
                    {
                      "type": "anyComponentStyle",
                      "maximumWarning": "6kb",
                      "maximumError": "10kb"
                    }
                  ]
                }
              }
            },
            "serve": {
              "builder": "@angular-devkit/build-angular:dev-server",
              "options": {
                "browserTarget": "SampleFour:build"
              },
              "configurations": {
                "production": {
                  "browserTarget": "SampleFour:build:production"
                }
              }
            },
            "extract-i18n": {
              "builder": "@angular-devkit/build-angular:extract-i18n",
              "options": {
                "browserTarget": "SampleFour:build"
              }
            },
            "test": {
              "builder": "@angular-devkit/build-angular:karma",
              "options": {
                "main": "src/test.ts",
                "polyfills": "src/polyfills.ts",
                "tsConfig": "tsconfig.spec.json",
                "karmaConfig": "karma.conf.js",
                "assets": [
                  "src/favicon.ico",
                  "src/assets"
                ],
                "styles": [
                  "src/styles.css"
                ],
                "scripts": []
              }
            },
            "lint": {
              "builder": "@angular-devkit/build-angular:tslint",
              "options": {
                "tsConfig": [
                  "tsconfig.app.json",
                  "tsconfig.spec.json",
                  "e2e/tsconfig.json"
                ],
                "exclude": [
                  "**/node_modules/**"
                ]
              }
            },
            "e2e": {
              "builder": "@angular-devkit/build-angular:protractor",
              "options": {
                "protractorConfig": "e2e/protractor.conf.js",
                "devServerTarget": "SampleFour:serve"
              },
              "configurations": {
                "production": {
                  "devServerTarget": "SampleFour:serve:production"
                }
              }
            }
          }
        }},
      "defaultProject": "SampleFour"
    }

How to enable the Previous and next button for owl carousel in angular 6,7,8,9 how to add "arrow" for navigation in place of "prev/next" 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 "prev/next" navigation button for the carousel was not be enabled so please give me a solution to enable the "prev/next" navigation button... Thank you...

Answer 1

You need a button like this

<button type="button" role="presentation" class="owl-prev">
  Previous
</button>

Please note the owl-previous class