Angular Simple Slick without dependencies

Before we begin…

Let us understand why angular plugins developed using jQuery raises concern about compatibility and integration.

jQuery and Angular are both JavaScript libraries that provide different approaches to building web applications, and as such, they can be hostile to each other when used together. Some of the reasons why jQuery is hostile with Angular include

1. Conflicting syntax
   jQuery and Angular have different syntaxes and ways of doing things, which can lead to conflicts and errors. For example, Angular uses directives and data binding to update the DOM, while jQuery uses selectors and methods

2. Performance overhead
   Using jQuery along with Angular can result in performance overhead, as both libraries will be loaded and executed. This can impact the speed and efficiency of your application

3. Incompatibility issues
   jQuery was not designed to work with Angular, and using the two together can result in incompatibility issues. This can cause errors and unexpected behaviour, making it difficult to diagnose and fix problems

4. Maintenance complexity
   Using both libraries together can lead to code that is more complex and difficult to maintain. This can make it harder to make changes and updates to your codebase

5. Duplicate functionality
   Many of the features and functionality provided by jQuery are already available in Angular. Using both libraries can result in duplicate functionality, which can increase the size and complexity of your codebase

6. Different approaches to DOM manipulation
   jQuery is primarily a DOM manipulation library, while Angular provides a full-featured framework for building web applications. The different approaches to DOM manipulation can result in conflicts and inconsistencies when using both libraries together

Overall, while it is possible to use jQuery with Angular, it is generally not recommended due to the conflicts and challenges that can arise. It's generally best to stick with Angular's built-in capabilities and avoid using jQuery unless absolutely necessary

---

Angular Simple Slick / ngxslick is a lightweight and very complete Angular library for rendering simple slideshow of elements without any 3rd party dependencies

• Supports dots and arrow navigation
• Custom styling
• Multi row support

Demo
NPM Plugin

Table of contents

• Installation
• Import in Angular
• Options

---

Installation

$ npm i ngx-simple-slick --save

Import in Angular

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { NgxSlickModule } from 'ngx-simple-slick';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    NgxSlickModule
  ],
  providers: [ ],
  bootstrap: [ AppComponent ]
})
export class AppModule { }

// demo.component.ts
export class DemoComponent implements OnInit {
  dataObj = new Array(10);
  constructor() { }

  ngOnInit(): void {
  }

}

// demo.component.html
<ngxslick [dots]=true [loadStatus]="'done'">
   <ngxslick [dots]=true [loadStatus]="'done'">
      <ng-container *ngFor="let card of dataObj; let i = index">
        <div class="card">
          <figure>
            <img src="https://via.placeholder.com/150x150?text=NG%20Slick" />
            <figcaption>Card {{ i + 1 }}</figcaption>
          </figure>
        </div>
      </ng-container>
    </ngxslick>
</ngxslick>

Options

Option	Type	Required	Values	Description
loadStatus	@Input String	Optional	done / fetching	Status whether data loading is complete or fetching
dots	@Input Boolean	Optional	true / false	Dots navigation enabled if true; default arrow navigation is enabled
left	@Input String	Optional		Custom class for left navigation arrow
right	@Input String	Optional		Custom class for right navigation arrow

Wrapping Up

• Why jQuery is hostile with Angular ?
• Angular Simple Slick plugin without any dependencies

And that’s it!

I hope you found this article a useful primer for getting started with ngxslick, and as always, thanks for reading!

Check this out npm package for more reference NGX Slick

Happy Coding!
RK