Give navText to slider

[shabbir-dhangot]

I have seen couple of example to give arrow icons to slider. But I am unable to do it.

Below is my Implementation.

<owl-carousel #owlSlider
        [options]="{nav : false, dots: false, loop:false, items:1, navText:['<i class='fa fa-chevron-circle-left' aria-hidden='true'></i>','<i class='fa fa-chevron-circle-right' aria-hidden='true'></i>']}"
        [items]="images"
        [carouselClasses]="['owl-theme', 'sliding']">
    <div class="item deal-slide" *ngFor="let image of images;let i = index">

      <div class="coupons-div" style="cursor:pointer;">
        <img class="deals-image" src="http://lorempixel.com/1080/300/{{image}}"/><br/>
      </div>
    </div>
  </owl-carousel>

below is error showing on the console.

Uncaught Error: Template parse errors:
Parser Error: Missing expected ] at column 69 in [{nav : false, dots: false, loop:false, items:1, navText:['','']}] 

for some reason complete error not showing by github. PFA of screenshot.

[mujtaba01]

Set the options key in your components ts file and it will work

[shabbir-dhangot]

Can you provide sample respective to this? Unable to find any implementation on readme file.

[mujtaba01]

Do something like this in your ts file:

carouselOptions: any = {
    nav : false, 
    dots: false, 
    loop:false, 
    items:1, 
    navText:['<i class='fa fa-chevron-circle-left' aria-hidden='true'></i>','<i class='fa fa-chevron-circle-right' aria-hidden='true'></i>']
}

and in html

<owl-carousel #owlSlider
        [options]="carouselOptions"
        [items]="images"
        [carouselClasses]="['owl-theme', 'sliding']">
    <div class="item deal-slide" *ngFor="let image of images;let i = index">

      <div class="coupons-div" style="cursor:pointer;">
        <img class="deals-image" src="http://lorempixel.com/1080/300/{{image}}"/><br/>
      </div>
    </div>
  </owl-carousel>

[shabbir-dhangot]

Also buttons coming down the carousel not left and right.

[shabbir-dhangot]

Adding modified options carouselOptions: any = { nav : true, dots: false, loop:false, items:1, navText:['',''] }

[Shofol]

I think The Navtext should be defined with template literales (`) not with ( ' ) -

 navText: [ `<i class='fa fa-chevron-circle-left' aria-hidden='true'></i>`, `<i class='fa fa-chevron-circle-right' aria-hidden='true'></i>`]

It is working for me.