Angular Simple Slick without dependencies
Tags: webdev, angular, npm
Published: 2023-02-28 05:56:25

## 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


![code_issue](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dr9ekek8va99wbmienir.gif)


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](https://ngx-carousel-slick-demo.vercel.app)
[NPM Plugin](https://www.npmjs.com/package/ngx-simple-slick)

## Table of contents

- [Installation](#installation)
- [Import in Angular](#import-in-angular)
- [Options](#options)

---
### Installation

```
$ npm i ngx-simple-slick --save
```

### Import in Angular

```console
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 { }
```

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

  ngOnInit(): void {
  }

}
```

```console
// 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](https://www.npmjs.com/package/ngx-simple-slick)_

Happy Coding!
RK