How to put owl-carousel positions on left/right sides of the slider in angular 8 version?

In my project I need to use a slider. For that I found owl-carousel and integrated it in my angular project. And trying to put slider's next-arrow and prev arrows on left and right sides of the slider. But couldn't change css styles from the app.component.scss file. How can I change positions of the arrows?

Here is my app-component.ts file

import { Component } from '@angular/core';
import {OwlOptions} from 'ngx-owl-carousel-o';

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
customOptions: OwlOptions = {
loop: true,
mouseDrag: true,
touchDrag: true,
pullDrag: true,
dots: false,
navSpeed: 600,
responsive: {
0: {
items: 1
},
400: {
items: 2
},
760: {
items: 3
},
1000: {
items: 4
}
},
nav: true
};

}


app-component.html

<owl-carousel-o [options]="customOptions">
<ng-template carouselSlide>
<div class="slide">
<img src="https://via.placeholder.com/600/92c952" alt="img 1">
</div>
</ng-template>
<ng-template carouselSlide>
<div class="slide">
<img src="https://via.placeholder.com/600/771796" alt="img 2">
</div>
</ng-template>
<ng-template carouselSlide>
<div class="slide">
<img src="https://via.placeholder.com/600/24f355" alt="img 3">
</div>
</ng-template>
<ng-template carouselSlide>
<div class="slide">
<img src="https://via.placeholder.com/600/d32776" alt="img 4">
</div>
</ng-template>
<ng-template carouselSlide>
<div class="slide">
<img src="https://via.placeholder.com/600/f66b97" alt="img 5">
</div>
</ng-template>
<ng-template carouselSlide>
<div class="slide">
<img src="https://via.placeholder.com/600/56a8c2" alt="img 6">
</div>
</ng-template>
</owl-carousel-o>


in my angular.json file added these lines

"styles": [
"./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
"node_modules/ngx-owl-carousel-o/lib/styles/prebuilt-themes/owl.carousel.min.css",
"node_modules/ngx-owl-carousel-o/lib/styles/prebuilt-themes/owl.theme.default.min.css",
"src/styles.css"
],


and app.module

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

import { AppComponent } from './app.component';
import {RouterModule, Routes} from '@angular/router';
import { DefaultComponent } from './components/default/default.component';
import {RoutingModule} from './routing/routing.module';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import {CarouselModule} from 'ngx-owl-carousel-o';

@NgModule({
declarations: [
AppComponent,
LoginComponent,
DefaultComponent,
],
imports: [
BrowserModule,
RouterModule,
RoutingModule,
BrowserAnimationsModule,
CarouselModule
],
providers: [
],
bootstrap: [AppComponent]
})
export class AppModule { }

Continue reading...