File

src/app/shared/components/product-slider/product-slider.component.ts

Implements

OnInit

Metadata

changeDetection ChangeDetectionStrategy.OnPush
selector app-product-slider
styleUrls product-slider.component.scss
templateUrl ./product-slider.component.html

Index

Properties
Methods
Inputs

Constructor

constructor()

Inputs

productsList

Type: Array

Default value: new Array(10)

showRating

Type: boolean

Methods

moveLeft
moveLeft()
Returns : void
moveRight
moveRight()
Returns : void
ngOnInit
ngOnInit()
Returns : void

Properties

Public carouselOne
carouselOne: NguCarousel
Type : NguCarousel
import { NguCarousel } from '@ngu/carousel';
import { Component, OnInit, Input, ChangeDetectionStrategy } from '@angular/core';

@Component({
  selector: 'app-product-slider',
  templateUrl: './product-slider.component.html',
  styleUrls: ['./product-slider.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class ProductSliderComponent implements OnInit {
  @Input() productsList = new Array(10);
  public carouselOne: NguCarousel;
  @Input() showRating: boolean;
  constructor() {
    this.carouselOne = {
      grid: { xs: 1, sm: 1, md: 2, lg: 5, all: 0 },
      slide: 2,
      speed: 400,
      animation: 'lazy',
      point: {
        visible: false
      },
      load: 2,
      touch: true,
      easing: 'ease-in',
      custom: 'banner'
    }
  }

  ngOnInit() {
  }

  moveLeft() {
  }

  moveRight() {
  }
}
<section class="mt-3" *ngIf="productsList?.length">
  <ngu-carousel [inputs]="carouselOne">
    <ngu-item class="col-6 col-sm-4 col-md-3 col-lg-2 product-box m-1 card p-1" *ngFor="let product of productsList" NguCarouselItem>
      <app-inner-product [product]="product" [showRating]="showRating">
      </app-inner-product>
    </ngu-item>
    <button NguCarouselPrev class='leftRs d-none d-sm-block'></button>
    <button NguCarouselNext class='rightRs d-none d-sm-block'></button>
  </ngu-carousel>
  <hr>
</section>
Legend
Html element
Component
Html element with directive

results matching ""

    No results matching ""