Tuesday, July 14FreeJQuery

AngularJS

What Is Angular Chunks
2019, AngularJS

What Is Angular Chunks

What's in My Angular Chunks?Angular's Lazy Loading is a super powerful feature. By splitting your code into modules, and loading those modules only when needed by the current route, your users get the best of both worlds in terms of a single cohesive application, while only loading the code needed for their current experience. But what happens when Angular and the CLI generate one of these lazy-loaded chunks? Let's dig into one and find out. I've built an "AboutModule" and an "AboutComponent" which is routed to by default with the empty path. The code itself is about 1K before compression and is actually pretty straightforward. Here's a lazy-loaded chunk of JavaScript generated byng build -prod. I've added comments to explain what's going on in each piece.Let’s talk about code...
FlatMap In Angular
2019, Ajax, AngularJS

FlatMap In Angular

FlatMap In Angular This Article is about FlatMap In Angular. Let's say we wanted to implement an AJAX search feature in which every keypress in a text field will automatically perform a search and update the page with the results. How would this look? Well we would have an Observable subscribed to events coming from an input field, and on every change of input we want to perform some HTTP request, which is also an Observable we subscribe to. What we end up with is an Observable of an Observable. By using flatMap we can transform our event stream (the keypress events on the text field) into our response stream (the search results from the HTTP request). app/services/search.service.tsCODE:import {Http} from '@angular/http'; import {Injectable} from '@angular/core'; ​...
Countit : Text Analyzer With Angular Material
2019, AngularJS, Forms

Countit : Text Analyzer With Angular Material

Countit Text Analyzer This is a fast Countit Text Analyzer app built using Angular Material.Text analyzer will examine your wall of text and display the occurrence of each unique word in click-able bars.Fork and Run Install Angular-CLI npm install -g @angular/clicd into project, npm installRun ng serve , navigate to localhost:4200 Build Run ng build to build the project. The build artifacts will be stored in the dist/ directory. Use the -prod flag for a production build. Text Analyzer Text analyzer will examine your wall of text and display the occurrence of each unique word in click-able bars. Clicking on a word will display more details. To see an example, click "Try Me!".For More Amazing Content Click Read More | Demo | Download
How To Add Material Badge for AngularJS
AngularJS, Plugins

How To Add Material Badge for AngularJS

Material Badge for AngularJS Material Badge for AngularJS design inspired customizable badges for your AngularJS applications.Install Download the package: yarn add angular-material-badgeUsage of Material Badge for AngularJS In your document head, include:<link rel="stylesheet" href="node_modules/angular-material-badge/angular-material-badge.min.css" />Use the md-badge where you wish:<md-badge>12</md-badge><ng-md-icon md-badge="12" icon="notifications"></ng-md-icon>Then, just before close body tag, include:<script src="node_modules/angular-material-badge/angular-material-badge.min.js"></script>Include the module in your application:var application = angular.module('Application', ['ngMdBadge']);B...
Angular directive for Slick Carousel
AngularJS, Carousel, Plugins

Angular directive for Slick Carousel

Directive for Slick CarouselAn Angular directive for slick carousel, which is a responsive carousel jQuery plugin that supports multiple breakpoints, CSS3 transitions, touch events/swiping & much more! Usage for Slick CarouselUsing bower to install it. bower install angular-slick-carousel Add jquery, angular, slick-carousel and angular-slick-carousel to your code.<link rel="stylesheet" href="../bower_components/slick-carousel/slick/slick.css"> <link rel="stylesheet" href="../bower_components/slick-carousel/slick/slick-theme.css"><script src="../bower_components/jquery/jquery.js"></script> <script src="../bower_components/angular/angular.js"></script> <script src="../bower_components/slick-caro...
Angular Hamburger Menu Toggle
AngularJS, Animation, Menu & Navigation, Plugins

Angular Hamburger Menu Toggle

Angular Hamburger Toggle Angular hamburger Toggle menu is component which allow you to active a part of information or navigation that is hidden by default for UX purpose.This usually means activating a SideNav, but might also roll down a Navbar menu.Examples of Bootstrap hamburger menu use:SideNav activation Navbar menuFeatures:Two way bound state model. Tuned for Bootstrap. Super easy.Angular directive of Material Design morphing hamburger menu. It's based off of Material Design Hamburger.###FeaturesTwo way bound state model. Tuned for Bootstrap. Super easy.How to style hamburger icon? In my code example, I’m using class= “navbar-inverse” in line 1 of nav.component.html. And this means the hamburger icon is designed to be use...
Angular Device Detector
AngularJS

Angular Device Detector

ngx device detector An Angular2+ library to detect the device, OS and browser details. An Angular 2 (and beyond) powered AOT compatible device detector that helps to identify the browser, os and other useful information regarding the device using the app. The processing is based on user-agent. Installation of ngx device detector To install this library, run:$ npm install ngx-device-detector --saveUsage Import DeviceDetectorModule in your app.module.ts  import { NgModule } from '@angular/core';   import { DeviceDetectorModule } from 'ngx-device-detector';   ...   @NgModule({     declarations: [       ...       LoginComponent,       SignupComponent       ...     ],     imports: [       CommonModule,       FormsModule,       DeviceDetectorModule.forRoot()     ], ...
Ngx-uploader : Angular2 File Uploader
AngularJS, Forms, Plugins

Ngx-uploader : Angular2 File Uploader

Ngx-uploader The ngx-uploader component provides a handy client-side drag’n’drop file upload experience for Angular 2 applications. Got a Question or Problem? Do not open issues for general support questions as we want to keep GitHub issues for bug reports and feature requests. You've got much better chances of getting your question answered on Stack Overflow where the questions should be tagged with tag ngx-uploader.To save your and our time, we will systematically close all issues that are requests for general support and redirect people to Stack Overflow. Installation of Ngx-uploaderAdd ngx-uploader module as dependency to your project.npm install ngx-uploader --saveInclude NgxUploaderModule into your main AppModule or in module where you will use it.//...
Angular Datetime Input UI Element
AngularJS, calendar, Plugins

Angular Datetime Input UI Element

Angular Datetime UI Element Angular Datetime UI Element. This directive is designed to provide easy and intuitive input of moment.js date-time objects.Designed to be as simple as possible in order to afford intuitive interactions. Datetime input UI element This directive is designed to provide easy and intuitive input of moment.js datetime objects.Desgined to be as simple as possible in order to afford intuitive interactions.Converted into an angular directive for your convenience :)Date inputTime inputDatetime inputInstallInstall 'angular-datetime-inputs' with bowerbower install angular-datetime-inputsor with npm npm install angular-datetime-inputsAdd 'g1b.datetime-inputs' module to your app configangular.module('myApp', [ 'g1b....
Angular Min Max validators
2019, AngularJS, Forms, Plugins

Angular Min Max validators

Angular Min Max validators Angular Min Max validators Implementation of min/max value validator directives for Angular 2.0.0 that works with both Angular forms validation and the DOM. As best as I can tell, these two validator directives are absent from the initial Angular 2.0.0Validators CLASS Provides a set of built-in validators that can be used by form controls.See more...class Validators { static min(min: number): ValidatorFn static max(max: number): ValidatorFn static required(control: AbstractControl): ValidationErrors | null static requiredTrue(control: AbstractControl): ValidationErrors | null static email(control: AbstractControl): ValidationErrors | null static minLength(minLength: number): ValidatorFn static maxLength(maxLength: numbe...
Angular2 Record Picker
2019, AngularJS

Angular2 Record Picker

Angular2 Record Picker Angular2 Record Picker component for picking records; an alternative to input select. An array of strings or objects can be passed to the record-picker for display in the pick list.A working demo shows the component in action. Usage Copy the record-picker.css and link it in the application's index.html file. Copy record-picker.component.ts into your app and then import the RecordPickerComponent into a component and include it in that component's directives. For a usage example, see demo-app.component.ts.Getting startedClone this repo Install the dependencies: npm installRun the Type Script compiler and start the server: npm startSelect propertiesitems - (Array<any>) - Array of items from which to select. Should be a...
Angular Step Input Directive
AngularJS, Forms, Plugins

Angular Step Input Directive

Angular Step Input Directive Angular Step Input Directive for a customized numeric user inputs.A custom user input extracted from our inhouse framework/cms. The input is somewhat similar to a native number-input, but it allows for default styling and custom styling overrides for specified numbers.Features of Angular Step Input Directive:styled number input min/max values custom increment/decrement icons override view value as function or expression (eg to represent 0 by an x-icon) all overrides on a per value basis (eg display 0 in red)Getting StartedInstall with bower: bower install --save angular-step-input Include angular-step-input.js. Add tien.stepInput to you app modules. Use the tien-step-input directive.If you don't like package man...
Angular directive for D3.js Calendar Heatmap
AngularJS, calendar, Plugins

Angular directive for D3.js Calendar Heatmap

D3.js Calendar Heatmap Angular directive for d3.js Calendar heatmap  representing time series data. This d3.js heatmap representing time series data is used to visualize tracked time over the past year, showing details for each of the days on demand.Converted into an angular directive for your convenience :)Includes a global overview of multiple years and visualizations of year, month, week and day overview with zoom for details-on-demand.Based on Calendar View by Mike Bostock Aaand D3.js Calendar Heatmap by Darragh Kirwan Demo D3.js Calendar Click here for a live demo. Global overviewYear overviewMonth overviewWeek overviewDay overviewInstallationInstall 'angular-calendar-heatmap' with bowerbower install angular-calendar-heatmapOr: npm...
Mat-video Angular 5/6 Video Player
AngularJS, Plugins, Video & Audio

Mat-video Angular 5/6 Video Player

Mat-video is an Angular component for playing videos. It has all the features you would expect from a standard video player, all in an extremely light package. The video player is designed to be flexible and easy to use; you can be up and running in less than 5 minutes!Native HTML5 video player Easy to use Play/Pause Seeking Volume Autoplay Preload Looping Scaling Fullscreen Download Buffering spinners Poster image Subtitles and text tracks Multiple media sources Customizable controlsRead More | Demo | Download