Monday, July 13FreeJQuery

Tag: forms

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...
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.//...
Custom Checkboxes with Angular 2+
Forms, Plugins

Custom Checkboxes with Angular 2+

Checkboxes with Angular 2+This is a very simple library to create custom checkboxes with Angular 2+ projects.This library use pretty-checkbox to create the customs checkboxes.Checkbox label The checkbox label is provided as the content to the <mat-checkbox> element. The label can be positioned before or after the checkbox by setting the labelPosition property to 'before' or 'after'.If you don't want the label to appear next to the checkbox, you can use aria-label or aria-labelledby to specify an appropriate label.  Use with @angular/forms <mat-checkbox> is compatible with @angular/forms and supports both FormsModule and ReactiveFormsModule.  Indeterminate state <mat-checkbox> supports an indeterminate state, similar to the native <input type="checkbo...
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-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...
Bootstrap-styled Toggle Control For Angular 2+
Forms

Bootstrap-styled Toggle Control For Angular 2+

Angular v2+ Bootstrap-styled Toggle that can be used as a standalone toggle or can convert checkboxes into UI toggles.Dependencies of Bootstrap-styled ToggleAngular (tested with 7.0.0) Bootstrap 4 (tested with 4.2.1)ng-toggle Angular Bootstrap CSS1.x.x 5.2.1 4.0.02.x.x 6.1.0 4.0.03.x.x 7.0.0 4.0.0Installation of Bootstrap-styled Toggle After installing the above dependencies, install ng-toggle via:npm install --save @nth-cloud/ng-toggleImport the main module into your project:import {NgToggleModule} from '@nth-cloud/ng-toggle';Import the module into your application:import {NgToggleModule} from '@nth-cloud/ng-toggle';@NgModule({ declarations: [AppComponent, ...], imports: [NgToggleModule, ...], ...
Dynamic Forms : Angular2 Rapid Form Development library
Bootstrap, Forms, jQuery, Plugins

Dynamic Forms : Angular2 Rapid Form Development library

Ng2 Dynamic Forms is a rapid form development library based on the official angular dynamic forms guide. It highly simplifies the implementing of reactive angular forms by building upon a layer of maintainable form control models to fully automate form UI creation. Therefore it provides a set of dynamic UI components with out of the box support for Bootstrap, Foundation, Ionic, Kendo Material, NG Bootstrap, and Prime NG. Dynamic Template Building handcrafted forms can be costly and time-consuming, especially if you need a great number of them, they're similar to each other, and they change frequently to meet rapidly changing business and regulatory requirements.This cookbook shows you how to use formGroup to dynamically render a simple form with different control types and validation...
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