CtrLog

In AngularJs (1.x) there is facility to set true value and false value for input type checkbox using ngTrueValue ngFalseValue directives. But its been removed in Angular 2 + . Below is directive which will serve the same purpose as it was in AngularJs (1.x) . Here it simply listens to the change event of input element using HostListener and value of input element is manipulated based on whether its checked or unchecked. import { Directive, Input, forwardRef, HostListener, ElementRef, Renderer2} from '@angular/core';import { ControlValueAccessor, NG_VALUE_ACCESSOR, NgControl} from '@angular/forms';@Directive({ selector: 'input[type=radio][trueFalseValue]', providers: [ { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => TrueFalseValueDirective), multi: true } ]})export class TrueFalseValueDirective implements ControlValueAccessor { private propagateChange = (_: an

This directive will help you to count number of characters in input element its applied on. It will create a paragraph (<p>) element next to element its applied on and will show count in it. You can also customize count message to show. /** * How to use : * * Apply 'char-count' attribute on text input fields/textarea * * Other properties: * char-count-msg="countMsg" : returns a string with count and max-length (Eg: "5 out of 100") * char-count-auto-show-message="true" : auto display count message near to text inputs * */'use strict';(function () { let app = angular.module('testApp'); app.directive('charCount', ['$log', '$timeout', function ($log, $timeout) { return { restrict: 'A', scope: { charCountMsg: "=?", charCountAutoShowMessage: "@" }, compile: function compile() {

There are various ways to save image data on server side. One of the way is to convert images data to base64 and store it in databases like MongoDb. In this post we are going to see how we can use ion – input to select multiple images and then convert those to base64 format. To select images we need to specify type attribute of ion-input as file and accept attribute as image/*;capture=camera this will make ion-input to allow selection of only image files or open camera to capture image. Below is code snippet for all this. You can also restrict image file types using accept attribute. <ion-item> <ion-label position="stacked">Images</ion-label> <ion-input (change)="convertToBs64($event)" multiple="true" type="file" accept="image/*;capture=camera"></ion-input> </ion-item> Next is we need to call a method on change event of ion-input. Remember not to use ionC