Showing posts with label Angularjs Compress Image. Show all posts
Showing posts with label Angularjs Compress Image. Show all posts

Angular CLI 6 & Material 6 Features

Angular CLI 6 & Material 6 Features



Hai Friends November 1, 2017 Angular 5 Released TypeScript Super Set Script Angular 5 Brings some new features to the popular Javascript Framework for building mobile, desktop and web application. Now Angular cli 6 & Material 6 Features Recently NG-CONF 2018 was organized from  18th April in Salt Lake City, UT. As always this three days conference brought a lot of incredible sessions, workshops, and announcements.

Angular CLI 6 & Material 6 Features
Angular CLI 6 & Material 6 Features
NG-CONF 2018 was started with the session by brad green, misko Hevery and Kara Erickson.

Brad has Introduced 
  1. Clarity Design pattern,
  2. NgRx Library,
  3. StackBlitz
Clarity Design Pattern 

UX guidelines, HTML/CSS framework, and Angular components working together to craft exceptional experience.

NgRx Library

NgRx is becoming popular for Reactive State Management. 
@ngrx provides a set of clean, well-tested libraries for reactive programming in Angular applications.

StackBlitz

StackBlitz online IDE for web application powered by vscode. ReadMore

angularjs single line json data how to display table format split \r\n

angularjs single line json data how to display table format split \r\n






Hi Today Discussed i handle one task default angularjs single line json data how to display table format split \r\n json data single line json data split \r\n first \r\n table heading <th> tag another table data  <td> followus code.

angularjs single line json data how to display table format split \r\n
angularjs single line json data how to display table format split \r\n

 index.html
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="Jsondatadisplay">
    <div class="container">
  
      <br>
        <h3>Data Details:</h3>
        <table class="table table-striped" id="myTable2">
            <thead>
            <tr>
                <th data-ng-repeat="tr in tableHeader track by $index">{{tr}}</th>
            </tr>
            </thead>
            <tr data-ng-repeat="data in tableData track by $index">
                <td data-ng-repeat="col in data track by $index">{{ col }}</td>

            </tr>
        </table>

        <div>

        </div>

        <script>
            var app = angular.module('myApp', []);
            app.controller('Jsondatadisplay', function ($scope, $http) {
            
                $http
                    .get("data.json")
                    .then(function (res) {
                        var dataToParse = res.data.Data;
                        var replaced = dataToParse.split("\r\n");
                        $scope.tableHeader = replaced[1].split(",");
                        var tempArray = [];
                        angular.forEach(replaced, function (element) {
                            tempArray.push(element.split(","));
                        });

                        delete tempArray[0];
                        delete tempArray[1];
                        $scope.tableData = tempArray;
                    })
            });
        </script>

</body>
</html>
data.json

json data very largest json data so please click github link and download file Click Here

output Click Here

Angularjs idle timeout auto go to lock screen

Angularjs idle timeout auto go to lock screen


Hi Guys Today discussed Angularjs idle timeout Auto go to lock screen Frontend developer very looks and pretty sides example 5 mins or 10 mins without mouse overing and not working auto go to lock screen and then enter password go to continue work.
Angularjs idle timeout auto go to lock screen
Angularjs idle timeout auto go to lock screen

Html Page

This Page index page Main Controller Config and this controller used full application working this function. follows code controller code.


Controller.js

function Appctrl($scope, $interval, $document) {
    var int = null;
    var callbacks = [];
    var idleTime = 0;
    
    $scope.isIdle = function() {
        return (idleTime > 0);
$state.go(app.lock);
    };
    
    angular.element($document).bind('mousemove', function(e) {
        idleTime = 0;
        $interval.cancel(int);
        startInterval();
        $scope.$apply();
    });
    
    function startInterval() {
        int = $interval(function() {
         idleTime += 3000;
     }, 3000);
    }
    
    startInterval();
}

Angularjs CSV Import and Insert Core PHP Mysql

Angularjs CSV Import and Insert Core PHP Mysql

Hi, Today Discussed Angularjs CSV Import and Insert Core PHP Mysql backend database. Frontend Angularjs CSV or other file Upload  get this formdata backend post and insert mysql database follows Code.
Angularjs CSV Import and Insert Core PHP Mysql
Angularjs CSV Import and Insert Core PHP Mysql

Controller.js

$scope.submit1=function(){

  var s = $scope.fileContent;
  var d = JSON.stringify(s);

             var ds = {'unitname':d,'mode':'csv'}
  var d = JSON.stringify(ds);
console.log(d);
    var postUrl = '../app/api/unit.php';
  $http.post(postUrl,d,{
            transformRequest: angular.identity,
            headers: { 'Content-Type': "application/json" }
        }).success(function(data){
       //  console.log(data.type);
              type=data.type,
              title="UnitCreation",
              message=data.response
 toaster.pop(type, title, message);
       
        });


}
CSV File Reader
Directive.js

  
angular.module('MetronicApp').directive('fileReader', function() {
  return {
    scope: {
      fileReader:"="
    },
    link: function(scope, element) {
      $(element).on('change', function(changeEvent) {
        var files = changeEvent.target.files;
        if (files.length) {
          var r = new FileReader();
          r.onload = function(e) {
              var contents = e.target.result;
              scope.$apply(function () {
                scope.fileReader = contents;
                //console.log(scope.fileReader);
               // var s = JSON.stringify(contents)
              // console.log(contents);
              });
          };
          
          r.readAsText(files[0]);

        }

      });
    }
  };
});
View.html

<form role="form" id="form_sample_2" id="container" data-ng-submit="submit1()">
   

     <input type="file" file-reader="fileContent" ng-model="fileContent" class="btn btn-primary" />
    
    <input type="hidden" ng-model="fileContent">
     <button class="btn sbold blue" name="submit" type="submit">Upload</button>

</form>




Angularjs Implement keyboard Shortcut keys

Angularjs Implement keyboard Shortcut keys


Hi Today discussed Angularjs implement keyboard shortcut keys.  Angularjs app submit form and goto another page used keyboard shortcut keys implemented used follows code.

Angularjs Implement keyboard Shortcut keys
Angularjs Implement keyboard Shortcut keys

Angularjs Implement keyboard first bower install or node_modules means npm install and then 

bower install chieffancypants/angular-hotkeys --save
if you used npm node_modules

use this

npm install angular-hotkeys --save

Refer Link: Click Here
Refer Link: Click Here


index.js include lib file.

$scope.submit1 = function(){  //$scope custom    })

  hotkeys.add({

    combo:'alt+s',
    description:'Save Unit Creation',
     allowIn: ['INPUT', 'SELECT', 'TEXTAREA','REQUIRED'],
  callback:function(){
$scope.submit1();

    }
  })

Angularjs WebCam Take Picture and decode base64

Angularjs WebCam Take Picture and decode base64

Today discussed Angularjs WebCam Take Picture and decode base64 image upload webcam and file upload encrypt blob type image decrypt method and image upload base64 encrypt method convert image decrypt and move folder follows code. try it.

Angularjs WebCam Take Picture and decode base64
Angularjs WebCam Take Picture and decode base64

webcam.html  html page
 <ng-camera capture-message="Cheeeese!"                                                    countdown="3"
      output-height="160"
     output-width="213"
      viewer-height="320"
       viewer-width="426"
          image-format="jpeg"
        jpeg-quality="100"
         action-message="Take picture"
       snapshot="vm.picture"
       flash-fallback-url="/vendors/webcamjs/webcam.swf"
       overlay-url="/overlay.png"
       shutter-url="img/shutter.mp3"></ng-camera>

Controller

(function (angular) {
    'use strict';

    angular.module('camera', []);

})(angular);

angular.module('camera');
app.controller('cameraController', controller);

controller.$inject = ['$scope'];

function controller($scope) {
    /* jshint validthis: true */
    var vm = this;

    vm.picture = false; // Initial state

    $scope.hshow = function (a) {
        alert(a);
    }
}




/* global Webcam */
(function (angular) {
    'use strict';

    angular.module('camera');
    app.directive('ngCamera', directive);

    directive.$inject = ['$q', '$timeout', 'photoManagerClient', '$stateParams'];

    function directive($q, $timeout, photoManagerClient, $stateParams) {
        var clientid = $stateParams.ClientID;
        return {
            'restrict': 'E',
            'scope': {
                'actionMessage': '@',
                'captureMessage': '@',
                'countdown': '@',
                'flashFallbackUrl': '@',
                'overlayUrl': '@',
                'outputHeight': '@',
                'outputWidth': '@',
                'shutterUrl': '@',
                'viewerHeight': '@',
                'viewerWidth': '@',
                'cropHeight': '@',
                'cropWidth': '@',
                'imageFormat': '@',
                'jpegQuality': '@',
                'snapshot': '='
            },

            'template': ['<div class="ng-camera">',
                '<div class="ng-camera-countdown" ng-if="countdown" ng-show="activeCountdown">',
                '<p class="tick">{{countdownText}}</p>',
                '</div>',
                '<div class="ng-camera-stack">',
                '<img class="ng-camera-overlay" ng-if="overlayUrl" ng-show="cameraLive" ng-src="{{snapshot}}" alt="overlay">',
                '<div id="ng-camera-feed"></div>',
                '</div>',
                '<button id="ng-camera-action" ng-click="getSnapshot()">{{actionMessage}}</button>',
                '</div>'].join(''),
            'link': link
        };

        function link(scope, element, attrs) {

            scope.libraryLoaded = false;
            scope.cameraLive = false;
            scope.activeCountdown = false;


            if (scope.viewerHeight === undefined) {
                scope.viewerHeight = 'auto';
            }
            if (scope.viewerWidth === undefined) {
                scope.viewerWidth = 'auto';
            }
            if (scope.outputHeight === undefined) {
                scope.outputHeight = scope.viewerHeight;
            }
            if (scope.outputWidth === undefined) {
                scope.outputWidth = scope.viewerWidth;
            }


            if (scope.cropHeight === undefined || scope.cropWidth === undefined) {
                scope.cropHeight = false;
                scope.cropWith = false;
            }

            Webcam.set({
                width: scope.viewerWidth,
                height: scope.viewerHeight,
                dest_width: scope.outputWidth,
                dest_height: scope.outputHeight,
                crop_width: scope.cropWidth,
                crop_height: scope.cropHeight,
                image_format: scope.imageFormat,
                jpeg_quality: scope.jpegQuality,
                force_flash: false
            });
            if (scope.flashFallbackUrl !== 'undefined') {
                Webcam.setSWFLocation(scope.flashFallbackUrl);
            }
            Webcam.attach('#ng-camera-feed');

            Webcam.on('load', function () {
                console.info('library loaded');
                scope.$apply(function () {
                    scope.libraryLoaded = true;
                });
            });
            Webcam.on('live', function () {
                console.info('camera live');
                scope.$apply(function () {
                    scope.cameraLive = true;
                });
            });
            Webcam.on('error', function (error) {
                console.error('WebcameJS directive ERROR: ', error);
            });

            if (scope.shutterUrl !== undefined) {
                scope.shutter = new Audio();
                scope.shutter.autoplay = false;
                if (navigator.userAgent.match(/Firefox/)) {
                    scope.shutter.src = scope.shutterUrl.split('.')[0] + '.ogg';
                } else {
                    scope.shutter.src = scope.shutterUrl;
                }
            }


            if (scope.countdown !== undefined) {
                scope.countdownTime = parseInt(scope.countdown) * 1000;
                scope.countdownText = parseInt(scope.countdown);
            }
            scope.countdownStart = function () {
                scope.activeCountdown = true;
                scope.countdownPromise = $q.defer();
                scope.countdownTick = setInterval(function () {
                    return scope.$apply(function () {
                        var nextTick;
                        nextTick = parseInt(scope.countdownText) - 1;
                        if (nextTick === 0) {
                            scope.countdownText = scope.captureMessage !== null ? scope.captureMessage : 'GO!';
                            clearInterval(scope.countdownTick);
                            scope.countdownPromise.resolve();
                        } else {
                            scope.countdownText = nextTick;
                        }
                    });
                }, 1000);
            };

            scope.getSnapshot = function () {

                if (scope.countdown !== undefined) {
                    scope.countdownStart();
                    scope.countdownPromise.promise.then(function () {
                        $timeout(function () {
                            scope.activeCountdown = false;
                            scope.countdownText = parseInt(scope.countdown);
                        }, 2000);

                        if (scope.shutterUrl !== undefined) {
                            scope.shutter.play();
                        }

                        Webcam.snap(function (data_uri) {
                            /*   function saveAs(uri, filename) {
                                   var link = document.createElement('a');
                                   if (typeof link.download === 'string') {
                                       console.log();
                                       link.href = uri;
                                       link.download = filename;
   
                                       //Firefox requires the link to be in the body
                                       document.body.appendChild(link);
   
                                       //simulate click
                                       link.click();
   
                                       //remove the link when done
                                       document.body.removeChild(link);
                                   } else {
                                       window.open(uri);
                                   }
   
                               }*/
                            scope.snapshot = data_uri;
                            //  var imageBase64 = data_uri;
                            //  var as = saveAs(imageBase64, 'as.png');
                            //   var image = new Image();
                            //   image.src = data_uri;
                            //  console.log(data_uri);

                            // alert(image);
                            //   var change = decodeBase64(data_uri);
                            // var blob = new Blob([imageBase64], { type: 'image/png' });
                            //  var file = new File([blob], 'imageFileName.png');
                            //  var photos = new File([blob], 'imageFileName.png');
                            var imageBase64 = data_uri;
                            //    var blob = new Blob([decodedImage], { type: 'image/png' });

                            ///now it should work properly
                            //  var photos = new File([blob], 'newname.png');
                            function dataURItoBlob(dataURI) {
                                // convert base64/URLEncoded data component to raw binary data held in a string
                                var byteString;
                                if (dataURI.split(',')[0].indexOf('base64') >= 0)
                                    byteString = atob(dataURI.split(',')[1]);
                                else
                                    byteString = unescape(dataURI.split(',')[1]);

                                // separate out the mime component
                                var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];

                                // write the bytes of the string to a typed array
                                var ia = new Uint8Array(byteString.length);
                                for (var i = 0; i < byteString.length; i++) {
                                    ia[i] = byteString.charCodeAt(i);
                                }

                                return new Blob([ia], { type: mimeString });
                            }
                            // var dataURL = data_uri.toDataURL('image/jpeg', 0.5);
                            var blob1 = dataURItoBlob(data_uri);
                            var blob2 = new Blob([blob1], { type: 'image/png' });
                            var blob = new File([blob2], 'image' + clientid + '.png');
                            //  var file = new File([blob], 'imageFileName.png');
                            //  var photos = new File([blob], 'imageFileName.png');
                            //  var fd = new FormData(document.forms[0]);
                            // fd.append("canvasImage", blob);
                            var formData = new FormData();

                            //   angular.forEach(imgData, function (imgData) {
                            //  alert('asdas');
                            //  console.log(imgData);
                            formData.append("canvasImage", blob);
                            //  });
                            return photoManagerClient.save(formData)
                                   .$promise


                        });
                    });
                } else {
                    if (scope.shutterUrl !== undefined) {
                        scope.shutter.play();
                    }

                    Webcam.snap(function (data_uri) {
                        scope.snapshot = data_uri;


                        var Image = scope.snapshot;
                        var st = { 'Image': Image };
                        var ss = JSON.stringify(st);
                        var postUrlna = '../api/Cameraaddimage';
                        $http.post(postUrlna, ss, {
                            transformRequest: angular.identity,
                            headers: { 'Content-Type': "application/json" }
                        }).then(function (result) {

                        });
                        //console.log(data_uri);
                    });
                }
            };

            scope.$on('$destroy', function () {
                Webcam.reset();
            });
        }
    }

})(angular);


Factory Image upload Api

app.factory('photoManager', photoManager);
photoManager.$inject = ['$q', 'photoManagerClient', 'appInfo', '$stateParams'];

function photoManager($q, photoManagerClient, appInfo, $stateParams) {
    var abc = $stateParams.ClientID;
    var service = {
        photos: [],
        load: load,
        upload: upload,
        remove: remove,
        photoExists: photoExists,
        status: {
            uploading: false
        }
    };

    return service;

    function load() {
        service.photos.length = 0;

        return photoManagerClient.query()
                            .$promise
                            .then(function (result) {
                                result.photos
                                        .forEach(function (photo) {
                                            service.photos.push(photo);
                                        });

                                appInfo.setInfo({ message: "photos loaded successfully" });

                                return result.$promise;
                            },
                            function (result) {
                                appInfo.setInfo({ message: "something went wrong: " + result.data.message });
                                return $q.reject(result);
                            })
                            ['finally'](
                            function () {
                                appInfo.setInfo({ busy: false });
                            });
    }

    function upload(photos) {
        console.log(photos);
        var formData = new FormData();

        angular.forEach(photos, function (photo) {
            console.log('photofsdfsdf');
            console.log(photo);
            formData.append(photo.name, photo);
        });
        return photoManagerClient.save(formData)
                                   .$promise
      
    }

    function remove(photo) {
        appInfo.setInfo({ busy: true, message: "deleting photo " + photo.name });

        return photoManagerClient.remove({ fileName: photo.name })
                                    .$promise
                                    .then(function (result) {
                                        //if the photo was deleted successfully remove it from the photos array
                                        var i = service.photos.indexOf(photo);
                                        service.photos.splice(i, 1);

                                        appInfo.setInfo({ message: "photos deleted" });

                                        return result.$promise;
                                    },
                                    function (result) {
                                        appInfo.setInfo({ message: "something went wrong: " + result.data.message });
                                        return $q.reject(result);
                                    })
                                    ['finally'](
                                    function () {
                                        appInfo.setInfo({ busy: false });
                                    });
    }

    function photoExists(photoName) {
        var res = false
        service.photos.forEach(function (photo) {
            if (photo.name === photoName) {
                res = true;
            }
        });

        return res;
    }
}
app.factory('photoManagerClient', photoManagerClient);

photoManagerClient.$inject = ['$resource', '$stateParams'];

function photoManagerClient($resource, $stateParams) {
    var clinetid = $stateParams.ClientID;
    //  alert('dsfsd');
    //sdafdsfds  console.log(clinetid);
    return $resource("../api/photo/:fileName",
           {
               id: "@fileName",
               id1: clinetid,
           },
           {
               'query': { method: 'GET' },
               'save': { method: 'POST', transformRequest: angular.identity, headers: { 'Content-Type': undefined } },
               'remove': { method: 'DELETE', url: '../api/photo/:fileName', params: { name: '@fileName' } }
           });
}

C# Linq Image move Local Folder

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Net.Http;
using System.Threading.Tasks;
using System.Web;
using System.Web.Http;
using ss.Controllers.Models;
using ss.Controllers.Photo;
namespace ss.Controllers.Controllers
{
    [RoutePrefix("api/photo")]
    public class PhotoController : ApiController
    {
        private IPhotoManager photoManager;

        public PhotoController()
            : this(new LocalPhotoManager(HttpRuntime.AppDomainAppPath + @"\Customerimage"))
        {
     
        }

        public PhotoController(IPhotoManager photoManager)
        {
            this.photoManager = photoManager;
        }

        // GET: api/Photo
        public async Task<IHttpActionResult> Get()
        {
            var results = await photoManager.Get();
            return Ok(new { photos = results });
        }

        // POST: api/Photo
        public async Task<IHttpActionResult> Post()
        {
            // Check if the request contains multipart/form-data.
            if (!Request.Content.IsMimeMultipartContent("form-data"))
            {
                return BadRequest("Unsupported media type");
            }

            try
            {
              //  LaexDataContext lx = new LaexDataContext();
                var photos = await photoManager.Add(Request);
             /*   var a = "DFD";
                var sf = from l in lx.mCustomers where l.ClientID == 10371 select l;
                if (sf.Count() > 0)
                {
                    var de = sf.First();
                    de.NRIC1 = "ZZZ";
                    lx.SubmitChanges();
                }*/
                // string a1 = "update mcustomer set NRIC1='DASD' WHERE ClientID=10371";
                //   var b1 = lx.ExecuteQuery<mCustomer>(a1);
                return Ok(new { Message = "Photos uploaded ok", Photos = photos });
            }
            catch (Exception ex)
            {
                return BadRequest(ex.GetBaseException().Message);
            }

        }

        // DELETE: api/Photo/5
        [HttpDelete]
        [Route("{fileName}")]
        public async Task<IHttpActionResult> Delete(string fileName)
        {
            if (!this.photoManager.FileExists(fileName))
            {
                return NotFound();
            }

            var result = await this.photoManager.Delete(fileName);

            if (result.Successful)
            {
                return Ok(new { message = result.Message });
            }
            else
            {
                return BadRequest(result.Message);
            }
        }
    }
}



Angular2 ngTable Params Sorting,Filter and Pagination

Angular2 ngTable Params Sorting,Filter and Pagination


Angular2 ngTable Params Sorting,Filter and Pagination angular Table all feature include sorting pagination and filter customized filter all function include ngtable in looking very pretty and responsive table.

Angular2 ngTable Params Sorting,Filter and Pagination
Angular2 ngTable Params


GetStarted
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.2/angular.js"></script>

<link rel="stylesheet"; href="https://unpkg.com/ng-table@2.0.2/bundles/ng-table.min.css">
<script src="https://unpkg.com/ng-table@2.0.2/bundles/ng-table.min.js"></script>

NgTable Controller
angular.module("myApp", ["ngTable"]);

app.controller('NGTableCtrl', ['$scope', '$filter', '$http', 'ngTableParams', '$resource', '$timeout', '$http', function ($scope, $filter, $http, ngTableParams, $resource, $timeout) {

    'use strict';

    var vm = this;

    $scope.loading = true;
    if ($scope.loading == true) {

        $scope.st = 'whirl standard';
    } else {
        $scope.st = '';
    }
    $http.get('../api/MaidDetails')
        .success(function (largeLoad) {
           
            var data = largeLoad;
      
            vm.data = data;

            vm.changeSelection = function (user) {
       
            };



            vm.tableParams = new ngTableParams({
                page: 1,            // show first page
                count: 1000,          // count per page
                sorting: {
                    ItemAltID: 'desc'     // initial sorting
                }
            }, {
                total: data.length, // length of data
                getData: function ($defer, params) {
                    var orderedData = params.filter() ?
                            $filter('filter')(data, params.filter()) :
                            data;
                    orderedData = params.sorting() ?
    $filter('orderBy')(orderedData, params.orderBy()) :
    orderedData;
                    vm.data = orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count());

                    params.total(orderedData.length); // set total for recalc pagination
                    $defer.resolve(vm.data);;
                }
            });

            // FILTERS
            // ----------------------------------- 

            vm.tableParams2 = new ngTableParams({
                page: 1,            // show first page
                count: 10,          // count per page
                sorting: {
                    ItemAltID: 'asc',     // initial sorting
                    WorkPermitNo: 'asc',
                    NoOfTransfer: 'asc',
                    Discountinued: 'asc',
                    ItemID: 'asc'

                },
                filter: {
                    ItemAltID: '',
                    WorkPermitNo: '',
                    NoOfTransfer: '',
                    Discontinued: '',
                    ItemID: ''




                }
            }, {
                total: data.length, // length of data
                getData: function($defer, params) {
                    var orderedData = params.filter() ?
                            $filter('filter')(data, params.filter()) :
                            data;
                    orderedData = params.sorting() ?
    $filter('orderBy')(orderedData, params.orderBy()) :
    orderedData;
                    vm.data= orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count());

                    params.total(orderedData.length); // set total for recalc pagination
                    $defer.resolve(vm.data);;
                }

            });

        })
     .error(function (error, status) {
         var type = '';
         if (status === '500') {
             type = 'Internal Server Error';
         } else {
             type = 'Page Not Found';
         }
         $scope.short = { message: error, status: status, type: type };
         // console.log($scope.short);

     })
    .finally(function () {
        $scope.loading = false;
        if ($scope.loading === false) {
            $scope.st = '';
        }
        //  $scope.st = 'whirl standard';
        //   ('.whirl standard').show();
    });

}]);


Html Page


<div ng-controller="NGTableCtrl as table" class="container-fluid">
    <div class="bs-example">

        <div id="myAlert" class="alert alert-danger" ng-show="short">
            <a ui-sref="s" class="close" data-dismiss="alert">&times;</a>
            <center><img src="{{app.sitename}}img/errorimage.jpg" /></center>

            <center> <h1>{{short.status}}-{{short.type}}</h1></center>
        </div>
    </div>
  <div class="panel panel-default {{st}}" ng-hide="short">
        <div class="panel-heading">
            <div class="panel-title">Maid Details</div>
        </div>
        <table ng-table="table.tableParams2" show-filter="true" class="table table-bordered table-striped">
            <tbody>

                <tr ng-repeat="user in $data">

                    <td data-title="'ItemAltID'" filter="{ 'ItemAltID': 'text' }" sortable="'ItemAltID'">{{user.ItemAltID}}</td>
                    <td data-title="'WorkPermitNo'" filter="{ 'WorkPermitNo': 'text' }" sortable="'WorkPermitNo'">{{user.WorkPermitNo}}</td>
                    <td data-title="'NoOfTransfer'" filter="{ 'NoOfTransfer': 'text' }" sortable="'NoOfTransfer'">{{user.NoOfTransfer}}</td>
                    <td data-title="'Discontinued'" filter="{ 'Discontinued': 'text' }" sortable="'Discontinued'">{{user.Discontinued}}</td>
                    <td data-title="'ItemID'" filter="{ 'ItemID': 'text' }" sortable="'ItemID'">{{user.ItemID}}</td>

                </tr>
                <!-- <center> <img id="mySpinner" src="img/loading.gif" ng-show="loading" /></center>-->
            </tbody>
        </table>
    </div>
    
</div>

Implement virtual paging in ag-grid - Angular2

Implement virtual paging in ag grid angular2

Implementing the Angular 2 Datagrid Angular 2 New features adding Large number of data quick loading in virtual scroll in ag grid adding new features and good looking the data grid.




how to impleted ag grid angularjs 2
how to impleted ag grid angularjs 2


Implementing the Angular 2 Datagrid

Dependencies

"dependencies": {
    ...
    "ag-grid": "6.2.x",
    "ag-grid-ng2": "6.2.x"
}

@NgModule({
    imports: [
        BrowserModule,
        AgGridModule.withComponents(),
        ...
})

Configuring ag-Grid in Angular 2

Events: All data out of the grid comes through events. These use Angular 2 event bindings eg (modelUpdated)="onModelUpdated()". As you interact with the grid, the different events are fixed and output text to the console (open the dev tools to see the console).
Properties: All the data is provided to the grid as Angular 2 bindings. These are bound onto the ag-Grid properties bypassing the elements attributes. The values for the bindings come from the parent controller.
Attributes: When the property is just a simple string value, then no binding is necessary, just the value is placed as an attribute eg rowHeight="22". Notice that boolean attributes are defaulted to 'true' IF they attribute is provided WITHOUT any value. If the attribute is not provided, it is taken as false.
Grid API via IDs: The grid in the example is created with an id by marking it with #agGrid. This in turn turns into a variable which can be used to access the grid's controller. The buttons Grid API and Column API buttons use this variable to access the grids API (the API's are attributes on the controller).
Changing Properties: When a property changes value, AngularJS automatically passes the new value onto the grid. This is used in the following locations:
a) The 'quickFilter' on the top right updates the quick filter of the grid. b) The 'Show Tool Panel' checkbox has it's value bound to the 'showToolPanel' property of the grid. c) The 'Refresh Data' generates new data for the grid and updates the rowData property.

Creating Grids with Markup

<ag-grid-column headerName="Name" field="name" [width]="150"></ag-grid-column>
Cell Rendering & Cell Editing using Angular 2

It is possible to build cellRenders, cellEditors and filters using Angular 2. Doing each of these is explained in the section on each.

Although it is possible to use Angular 2 for your customisations of ag-Grid, it is not necessary. The grid will happily work with both Angular 2 and non-Angular 2 portions (eg cellRenderers in Angular 2 or normal JavaScript). If you do use Angular 2, be aware that you are adding an extra layer of indirection into ag-Grid. ag-Grid's internal framework is already highly tuned to work incredibly fast and does not require Angular 2 or anything else to make it faster. If you are looking for a lightning fast grid, even if you are using Angular 2 and the ag-grid-ng2 component, consider using plain ag-Grid Components (as explained on the pages for rendering etc) inside ag-Grid instead of creating Angular 2 counterparts.

Known Issues
"Attempt to use a dehydrated detector"

If you are getting the above error, then check out this post where jose_DS shines some light on the issue.


Angularjs Compress Image Before Upload

Angularjs Compress Image Before Upload



Angularjs Compress Image
Angularjs Compress Image

Angularjs  Uploading the image compressed method. AnguarJs Image Crop Click Here  Here Code But This method is very slow loading. try this

View.html

<div>
    <div class="rating-camera-icon">
        <input type="file" accept="image/*" name="file" ng-file-
         select="onFileSelect($files)">
    </div>
    <img ng-show="fileName" ng-src="server/{{fileName}}" width="40"
     style="margin-left:10px">
</div>


Controller.js

$scope.onFileSelect = function($files) {
        for (var i = 0; i < $files.length; i++) {
            var file = $files[i];
            if (!file.type.match(/image.*/)) {
                // this file is not an image.
            };
            $scope.upload = $upload.upload({
                url: BASE_URL + 'upload.php',
                data: {myObj: $scope.myModelObj},
                file: file
            }).progress(function(evt) {
                    // console.log('percent: ' + parseInt(100.0 * evt.loaded / evt.total));
                    // $scope.fileProgress = evt.loaded / evt.total * 100.0;
                }).success(function(data, status, headers, config) {
                    // file is uploaded successfully
                    $scope.fileName = data;
                });
        }
    };


Angularjs Image Compress is very slow load so another method is  Angularjs  Resize Image and Uploading.

// from an input element
var filesToUpload = input.files;
var file = filesToUpload[0];

var img = document.createElement("img");
var reader = new FileReader();  
reader.onload = function(e) {img.src = e.target.result}
reader.readAsDataURL(file);

var ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0);

var MAX_WIDTH = 800;
var MAX_HEIGHT = 600;
var width = img.width;
var height = img.height;

if (width > height) {
  if (width > MAX_WIDTH) {
    height *= MAX_WIDTH / width;
    width = MAX_WIDTH;
  }
} else {
  if (height > MAX_HEIGHT) {
    width *= MAX_HEIGHT / height;
    height = MAX_HEIGHT;
  }
}
canvas.width = width;
canvas.height = height;
var ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0, width, height);

var dataurl = canvas.toDataURL("image/png");