"How to incorporate SortableJS into Ionic 3 Angular app with the help of the systemjs.config.js

I'm currently following the instructions on https://github.com/SortableJS/angular-sortablejs and I seem to be facing an issue with the systemjs.config.js file. My app is built using Ionic 3 and Angular 4.

To address this, I created a script called systemjs.config.js in the assets/js/ directory and then included it in my index.html file as the last line within the head section like so:

<script src="assets/js/systemjs.config.js"></script>

However, upon implementing this change, I encountered an error stating that System could not be found, which happens to be the final line in the script: System.config(config);

If I choose to ignore the above step, I inevitably come across a 'can't bind sortablejs property' error. Here's how my .ts and .html files appear:

 <h2>Drag / drop the item</h2>
      <div [sortablejs]="items">
        <div *ngFor="let item of items">{{ item }}</div>
      </div>

      <hr>

      <h2>See the result</h2>
      <div>
        <div *ngFor="let item of items">{{ item }}</div>
      </div>

.ts

import { Component, ViewChild, AfterViewInit } from '@angular/core';
@Component({
  selector: 'dynamic-home',
  templateUrl: 'dynamic-home.html'
})
export class DynamicHomeComponent implements AfterViewInit{
  items = [1, 2, 3, 4, 5];
}

app.module.ts

import { SortablejsModule } from 'angular-sortablejs'

@NgModule({
  declarations: [],
  imports: [
SortablejsModule
]

dyamicHome.ts

import { sortablejs } from 'sortablejs'

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Create a versatile generic object using TypeScript

Looking to create a versatile onFilterChange helper function that works for all filters, eliminating the need to write it out separately each time. However, I've hit a snag: // helper.ts export function onFilterChange(prevState: Record<string, any& ...

Unable to impose a restriction on the number input field limit

My input field has a type of "number" with the min and max attributes applied to limit user input. However, I am facing an issue where users can still enter values beyond the set limit. How can I prevent users from entering values above the specified lim ...

Obtaining the IP address upon page load in Angular 4: A step-by-step guide

In the midst of my Angular4 project, I'm on a mission to fetch the system IP address upon page load and send it over to the API for storage in a MSSQL database. However, each time the page loads, two rows are inserted and the IP address is coming up a ...

Is it possible to dynamically adjust the size of the CircleProgressComponent element in ng-circle-progress?

For my current Angular 11 project, I am facing the challenge of dynamically changing the size of the ng-circle-progress library's CircleProgressComponent element. After some research, I discovered that the element's size can be adjusted by apply ...

Guide on uploading an image to Azure Blob Storage using v10 SDK

Currently, I am attempting to upload an image to the Blob Storage in Microsoft Azure using SDK V10 within an Angular framework. The code snippet below demonstrates how I establish a connection to the Storage and retrieve the names of all containers: // E ...

Node C++ Addon Typescript declaration file

I have developed a Node C++ Addon that wraps a class similar to the one outlined in the official Node documentation. By using require(), I am able to access my addon and retrieve the constructor for my class in order to instantiate it. const { MyClass } = ...

Generating a sequential array of dates and times in Angular

Currently, I am working on implementing a feature that will allow users to see the available visit times between two dates they select, specifically from 8:00 to 17:00 every day. For instance: If a user selects 1 Sep to 4 Sep, the system should return [1. ...

The data structure '{ one: string; two: string; three: string; }' cannot be directly assigned to a 'ReactNode'

Here is the Array of Items I need to utilize const prices = [ { name: "Standard", price: "149EGP", features: [ { one: "Add 2500 Orders Monthly", two: "Add Unlimited Products And Categories", three: "Add 20 other ...

Angular: ViewContainer is failing to correctly insert the component next to the anchor element, instead it is placing the component inside the anchor element

I have successfully implemented a tab view with the following structure: <tabs> <ul #getVCRefHERE > <li>tab1</li> <li>tab2</li> </ul> <tab> <ng ...

ng-bootstrap component 404 error on final angular2 release

angular2 final release. ng-bootstrap alpha v.5 bootstrap components are functioning on html, however when attempting to import them like this import {ViewChild} from "@angular/core/src/metadata/di"; import {NgbDropdown} from "@ng-bootstrap/ng-bootstrap/d ...

The new update of ag-grid, version 18.1, no longer includes the feature for enabling cell text selection

I am attempting to disable the clipboard service in ag-grid. I have come across the enableCellTextSelection flag, which supposedly disables it completely. However, when I try to use this flag as a direct property of <ag-grid-angular>, it results in a ...

Identifying the origin of the error (whether it's from the client or the server) within

I am utilizing ngrx effect for handling user login in my application: @Effect() authLogin = this.actions$.pipe( ofType(LOGIN_START), switchMap(() => this.http.post('/user/login') .pipe( catchError( (response) => ...

CORS policy preventing successful POST request

Every time I send a request to my API, Chrome blocks it due to CORS. To fix this issue on my Firebase Cloud Function, I included the line response.set('Access-Control-Allow-Origin','*'); (xxxxxx in the axios get hides the request URL) e ...

Issue with conflicting namespaces warning when compiling an Angular 9 project with ng-packagr using Typescript

I'm trying to pinpoint the root cause of this problem, and I suspect it may be related to Typescript. However, it could also involve ng-packagr or Angular. This issue only arose after upgrading to Angular 9. Upon building my production environment, I ...

steps to authenticate with dynamic database information instead of hard-coded data

After following a tutorial, I successfully created my first register login system in dot net and angular. The issue I encountered is that the author used static data in the tutorial's code example. However, I want to implement my own database data. As ...

Encountering ng build --prod errors following Angular2 to Angular4 upgrade

Upon completing the upgrade of my Angular2 project to Angular4 by executing the following command: npm install @angular/common@latest @angular/compiler@latest @angular/compiler-cli@latest @angular/core@latest @angular/forms@latest @angular/http@latest @an ...

The compilation of TypeScript extending DataType can sometimes result in errors

I have written a custom extension in my extensions/date.ts file which adds a method to the Date interface: interface Date { addDays: (days: number) => Date } Date.prototype.addDays = function(days: number): Date { if (!days) return this; let dat ...

How to showcase ByteArrayContent using Angular

I have a Web API that has been functioning well for two years in existing Knockout and polymer applications, so I don't want to make any changes to it. Now, I am trying to integrate Angular and need to display an image from the API. Below is the code ...

Instructions on utilizing type interfaces for prop drilling in my React Typescript counter

I am currently developing a basic counter app to monitor my progress in a digital card game that I enjoy playing. While attempting to pass props from the parent component to the child component, I encountered an issue where the props were not being success ...

Issues are arising with Angular Form where the FormControl is not being properly set up for the first field in my form

After grappling with this issue for several weeks, I am still unable to pinpoint the cause. (Angular version: 16.1.4) The form component is populated using a BehaviorSubject, and although the console prints out the correct values for both the form and dat ...