How to include custom js file in angular component in Angular 6, how to use it

[raghav harithas m s]

Hi All,

I have developed custom java script file. I want to include this file in angular component, how to do this , in Angular 6.

And i want to access the java script functions in the HTML file, within the component.

I have tried the below steps, getting compilation error while trying to access the function in custom js  in my html

1) Add entry in angular.json, in scripts tag as shown below

"scripts": ["src/assets/multi.js"]

Below is the snippet of js file:

angular.module("app").controller("MultiDemoController", function($scope) {

$scope.models = [

{listName: "A", items: [], dragging: false},

{listName: "B", items: [], dragging: false}

];

/**

* dnd-dragging determines what data gets serialized and send to the receiver

* of the drop. While we usually just send a single object, we send the array

* of all selected items here.

*/

$scope.getSelectedItemsIncluding = function(list, item) {

item.selected = true;

return list.items.filter(function(item) { return item.selected; });

};

/**

* We set the list into dragging state, meaning the items that are being

* dragged are hidden. We also use the HTML5 API directly to set a custom

* image, since otherwise only the one item that the user actually dragged

* would be shown as drag image.

*/

$scope.onDragstart = function(list, event) {

list.dragging = true;

if (event.dataTransfer.setDragImage) {

var img = new Image();

img.src = 'framework/vendor/ic_content_copy_black_24dp_2x.png';

event.dataTransfer.setDragImage(img, 0, 0);

}

};

/**

* In the dnd-drop callback, we now have to handle the data array that we

* sent above. We handle the insertion into the list ourselves. By returning

* true, the dnd-list directive won't do the insertion itself.

*/

$scope.onDrop = function(list, items, index) {

angular.forEach(items, function(item) { item.selected = false; });

list.items = list.items.slice(0, index)

.concat(items)

.concat(list.items.slice(index));

return true;

}

/**

* Last but not least, we have to remove the previously dragged items in the

* dnd-moved callback.

*/

$scope.onMoved = function(list) {

list.items = list.items.filter(function(item) { return !item.selected; });

};

// Generate the initial model

angular.forEach($scope.models, function(list) {

for (var i = 1; i <= 4; ++i) {

list.items.push({label: "Item " + list.listName + i});

}

});

// Model to JSON for demo purpose

$scope.$watch('models', function(model) {

$scope.modelAsJson = angular.toJson(model, true);

}, true);

});

var testmodule = new modelAsJson();

export { testmodule };

 Step 2 ) Imported module  in my component file and   , as below:

import { testmodule } from "././assets/multi.js";

 Step 3 )  Trying to use the function in my html file as below

div class="multiDemo row">

<div class="col-md-8">

<div class="row">

<div ng-repeat="list in testmodule.models" class="col-md-6">

<div class="panel panel-info">

<div class="panel-heading">

<h3 class="panel-title">List {{list.listName}}</h3>

</div>

<div class="panel-body" ng-include="'delivery-group/multi.html'"></div>

</div>

</div>

</div>

<div view-source="multi"></div>

</div>

<div class="col-md-4">

<div class="panel panel-default">

<div class="panel-heading">

<h3 class="panel-title">Generated Model</h3>

</div>

<div class="panel-body">

<pre class="code">{{testmodule.modelAsJson}}</pre>

</div>

</div>

</div>

</div>

Regards,

Raghav

[Katheeja Beevi]

After importing js in component.ts,add a script tag to your html page and call the function inside the tag.Hope this helps.

--
You received this message because you are subscribed to the Google Groups "Angular and AngularJS discussion" group.
To unsubscribe from this group and stop receiving emails from it, send an email to angular+u...@googlegroups.com.
To post to this group, send email to ang...@googlegroups.com.
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.

[raghav harithas m s]

Hi Katheeja,

I will try this , what about accessing a variable of js in html, how to do i do this

Regards,

Raghav

[Katheeja Beevi]

I don't think its js variable can be directly accessed from html. Try creating a service and call your api through that service. In your api,write code to write the value of your variable to a json and call json object to display its value from html.