[Solved] Angular Slick Carousel (slider) Next Previous Arrows are not displaying

In my gallery i have the dots working by making the config settings true, but for arrows they are not working or showing eventhough same thing it is true in settings.

slideConfig = {"autoplay": true, "autoplaySpeed": 500, "arrows":true,
                "draggable": false,"infinite":false ,"pauseOnHover": true, 
                "dots": true, 'centerMode':true, "pauseOnFocus":false,
                "slidesToShow": 1, "slidesToScroll": 1};

I tried some forums stating to add buttons in the html page with css styling for next and previous but still not working!

I also read that the issue is with chrome.

I tried edge but still sme issue!

Any special settings needed to be done for the arrows to display?

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { Property } from 'src/app/model/property';

@Component({
  selector: 'app-property-detail, appdemo',
  templateUrl: './property-detail.component.html',
  styleUrls: ['./property-detail.component.css']
})

export class PropertyDetailComponent implements OnInit {

public imagepath: string;
public propertyId: number;
property = new Property();
  http: any;

  constructor(private route: ActivatedRoute) { }

  ngOnInit() {
    
    this.propertyId = +this.route.snapshot.params['id'];
    this.route.data.subscribe(
      (data: any) => {
        this.property = data['prp'];
      }
    );
  }

  slideConfig = {"autoplay": true, "autoplaySpeed": 500, "arrows":true,
                "draggable": false,"infinite":false ,"pauseOnHover": true, 
                "dots": true, 'centerMode':true, "pauseOnFocus":false,
                "slidesToShow": 1, "slidesToScroll": 1};

  clicked(img:any){
      this.imagepath = img;
      window.open(this.imagepath, "_blank");
      return this.http.get(this.imagepath);
  }

  slides1 = [
    {img: "assets/images/1.png"},
    {img: "assets/images/2.png"},
    {img: "assets/images/3.png"},
    {img: "assets/images/4.png"},
    {img: "assets/images/5.png"},
    {img: "assets/images/6.png"},
    {img: "assets/images/7.png"}
  ];
}

<div class="row" style="margin-top: 50px;">
    <div class="container" style="bottom: 20px;">
        <ngx-slick-carousel class="carousel" 
            #slickModal="slick-carousel" 
            [config]="slideConfig">
            <div class="centered" ngxSlickItem *ngFor="let slide1 of slides1" class="slide">
                <img style="cursor: pointer; width: 900px; height: 450px;" src="{{ slide1.img }}" (click)="clicked(slide1.img)"/>
            </div>
        </ngx-slick-carousel>
    </div>
</div>