Thursday, July 16FreeJQuery

Tag: angular

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...
Digital Stopwatch App With Angular
Date & Time, Plugins

Digital Stopwatch App With Angular

Digital Stopwatch App Digital Stopwatch App is a simple timer service for Angular, base on RxJS.Name/ID(string) base API. RxJS object not exposed.Install Usage  Module Component API  newTimer  delTimer  getTimer  getSubscription  subscribe unsubscribe Example Repository Contributors Changelog LicenseInstall Digital Stopwatch App ng2-simple-timer is implemented as Angular injectable service name SimpleTimer.Add SimpleTimer into module providers (eg. app.module.ts).import { SimpleTimer } from 'ng2-simple-timer';   @NgModule({   providers: [SimpleTimer] })Componentimport {SimpleTimer} from 'ng2-simple-timer';   export class ChildComponent {     constructor(private st: SimpleTimer) { }   }new Timer newT...
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
Angular Autosize TextArea Height Directive
Forms, Plugins

Angular Autosize TextArea Height Directive

Angular Autosize TextAreaAngular Autosize TextArea angular2-autosize is an Angular2 directive that automatically adjusts textarea height to fit content.It adjusts the textarea height automatically to any text input, or changes to the model bound to the textarea. Installation:npm install angular2-autosizeUse Example: Add the declaration to your @NgModule:import {Autosize} from 'angular2-autosize';...@NgModule({ declarations: [ Autosize ] })Use directly inside your HTML templates <textarea autosize class="my-textarea">Hello, this is an example of Autosize in Angular2.</textarea>SettingsName Default Type DescriptionminRowsinteger Sets minimal amount of rows of the textareamaxRowsinteger Set...
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 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-schema-form angular 6
Bootstrap, Date & Time, Drag & Drop, Forms, Plugins

angular-schema-form angular 6

Angular Schema Form Angular 6:Angular Schema Form is a set of AngularJS directives (and a couple of services) to generate Bootstrap 3 ready forms from a JSON Schema.Features of Angular Schema Form Angular 6:Validates the form using a JSON Schema Fine tune presentation with a form definition, change field types, change order, etc Lots of basic form types out of the box. Supports array with drag’n’drop or in tabs Add-ons for more fanciful stuff like wysiwyg editors, datepickers, colorpickers, font-pickers etcWhat is it? Schema Form is a set of AngularJS directives (and a couple of services). It can do two things to make life easier:Create a form directly from a JSON schema. Validate form fields against that same JSON schema.Schema Form uses con...
Native-like Menu Drawer For Angular App
Menu & Navigation, Plugins

Native-like Menu Drawer For Angular App

Native-like menu, pull-to-sync, action button, in-app-toast notification and burger menu icon implementation for angular mobile/desktop apps fot Native-like Menu.Native-like menu implementation for angular mobile apps. Build with hammer.js for touch support.using hammer.js for better touch support. fully animated burger menu icon nice and smooth menu drawer (slide from left) animated pull-to-refresh with callback in-app-toast messages with true/false callback three-dot-menu for secondary actions animated action button adjust content height 13kB minified.Why this? If you are developing application for android with Phone-gap or Ionic or other alternative, this is exactly for you. No touch support or slow/no animations, if there was animations, they ...
Angular Super Image Gallery
Gallery

Angular Super Image Gallery

Angular Super Image Gallery:A feature-rich, touch-enabled image gallery component for Angular.Features of Image Galleryseparated angular components (modal, panel and image) many configuration options full responsive (under fixing) wide and fit image display mode multiple image sizes / thumbnail (for panel) , medium (for image), original (for modal) 3 built-in themes 9 image transitions (CSS3 3D) configurable keyboard shortcuts in modal window touch supportnpm install --save angular-super-gallery or yarn add angular-super-gallerySetup Angular Super Image Galleryimport 'bootstrap/dist/css/bootstrap.min.css'; import 'angular-super-gallery/dist/angular-super-gallery.css'; import 'jquery'; import 'angular'; import 'bootstrap'; import ...
Angular IOS Toggle Switch Button : Switchery IOS
Forms, Plugins

Angular IOS Toggle Switch Button : Switchery IOS

Switchery IOS is an angular based component that helps you use beautiful switchery controls WITHOUT any external JavaScript dependency. Number of customization's are available to suit your needs including colors, sizes, labels & positioning. Inspired from IOS styled switches Angular Switchery IOS is an angular based component that helps you use beautiful switchery controls WITHOUT any external JavaScript dependency. You can enable/disable states by adding disabled property and specifying appropriate value to switchery controlRead More | Demo | Download  
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