How to create an auto-grow directive in Angular 2 This article will explain how you can create a directive to automatically adjust the height of a textarea to its content. Step 1 - create the directive with angular-cli If you have not already, install angular-cli. Go to the root of your project (the folder containing "package.json"), open a shell and execute the following statements:[crayon-5c6c0f8ace8db915936782/]These statements will create a basic directive file and wire it into your application.[crayon-5c6c0f8ace8e4028626190/]You can change the selector to '[autoGrow]' if you want. Step 2 - add the auto-grow code Change the code of the auto-grow directive as follows:[crayon-5c6c0f8ace8e7330271813/]Save this file and it is ready for use. Step 3 - using the directive We are ready to use the directive. We do not need to add the…
How to create a TODO list in Angular 2 There are a lot of examples on how to create a TODO List in Angular 2 on the web, but lots of them use outdated versions. Most of these examples use Alpha, Beta and RC versions. The problem is that they are already outdated and no longer compatible with the most recent version of Angular 2. The following example uses the 2.2.1 version. This is the most recent version at the time of writing. https://github.com/resolvethis/ng2-todo This example contains the basics about Creating components Communicating between components Creating routes Clone or download the sample code from github and start playing with the example. Check back soon for more details and explanation on this example.
This article shows how to check if a filter exists in AngularJS In some cases it may be required to check if a filter is defined in your AngularJS application. This might especially be the case when writing reusable components. Initial setup First let's create a very simple AngularJS application with a filter: [crayon-5c6c0f8acfef4637277677/] The check Now that we have our test application, we can check if the filter 'upper' exists: [crayon-5c6c0f8acfefc279295420/] Beyond the concept We could use this technique to poly-fill missing functionality which is required by one of our pluggable directives or services. A fully functional example can be found here on Plunker.
This article describes how to replace the deprecated ngmin with ng-annotate. ngmin used to be a popular AngularJS application pre-minifier. Though it is now deprecated. message: npm WARN deprecated firstname.lastname@example.org: use ng-annotate instead cause: ngmin is no longer maintained, you should use ng-annotate instead. solution: Migrate from ngmin to ng-annotate: ng-annotate -a is similar to ngmin (use stdin and stdout). ng-annotate -a in.js -o out.js is similar to ngmin in.js out.js. - Installation: [crayon-5c6c0f8ad222d667721863/] Grunt users can migrate easily by installing grunt-ng-annotate and replacing ngmin with ngAnnotate in their Gruntfile. - Install grunt-ng-annotate: Start a shell at the folder where gruntfile.js is located and execute: [crayon-5c6c0f8ad2234837992358/] - Modify your gruntfile.js: replace any occurrence of ngmin in ngAnnotate: [crayon-5c6c0f8ad2237638742347/] Done!
If you watch a list or an object with the objectEquality parameter not set, then the $watch callback function won’t be triggered if the object is only updated partially. [crayon-5c6c0f8ad2592320007865/] Setting the objectEquality parameter to true will trigger the $watch callback function on modification of any member. [crayon-5c6c0f8ad2599006361717/] Using this the objectEquality parameter has performance impact, so use carefully.