After importing js in component.ts,add a script tag to your html page and call the function inside the tag.Hope this helps.
On Thu, Jan 3, 2019, 5:02 PM raghav harithas m s <[email protected]> wrote: > 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 > > > > > -- > 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 [email protected]. > To post to this group, send email to [email protected]. > Visit this group at https://groups.google.com/group/angular. > For more options, visit https://groups.google.com/d/optout. > -- 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 [email protected]. To post to this group, send email to [email protected]. Visit this group at https://groups.google.com/group/angular. For more options, visit https://groups.google.com/d/optout.
