Tag Archives: angularjs 2

Simple Reusable Captcha Component in AngularJS 2

Simple Reusable Captcha Component in AngularJS 2

Woohoo, I’m almost done with my new web platform using cutting edge Angular JS2 with Bootstrap 4 alpha 6, powered by Laravel 5.2.

The power of these new technologies are just fucking amazing. During the development process, there were many times I was simply in awe at how easy and convenient it was to create and achieve stuff.

Eg. making a member section post list? Just make a member posts container component, and insert the standard post-list component with a username/id parameter. In the words of the late Steve Jobs,

It just works.

So today I’m sharing a little captcha component I created that can be reused in all your forms. I wanted something light and easy, without integration into the official captcha services. If you’re looking for a real Captcha tutorial, please skip this.

The idea is simply to validate a simple dynamic mathematic question.

The UI would look like this.

We’re calling this the antibot component. Make one by typing this in the command line. If you’re manually creating component files in angular2, you’re doing it wrong.

this will generate these files in your project folder, and also automatically declare them in your app.module.ts

The code of the antibot.component.ts is super lean.

So we’re basically generating two random numbers from 1-20 , the answer will be the sum of the both of them.

We create a checkAnswer() method that checks if the user input = the sum of both parts. If so, we return true. Otherwise, we return an error message which gets printed in the view.

Speaking of the view..

Just some flex box bootstrap 4 alpha 6 code.

We interpolate the two numbers to be shown, and bind the text input to the answer variable.

The error div only shows up if the error variable isn’t null.

That’s it! So how do we use it?

We make use of the ViewChild method to achieve two-way binding between the components.

Here is how the antibot component is implemented in the parent contact form’s view.

And in the contact form component, we just need to perform 4 steps.

Import the Antibot component:

Initialize our Antibot component as a ViewChild:

Import the antibot component before the constructor with ViewChild.

This means that from here on, you can pass data to and from the antibot component via this.antiBot

Lastly, on the onSubmit method, simply run the antibot check. If it returns true, proceed with submitting the form. We don’t even need to handle the error here as it is done within the antibot component. We do however need to revert the loading state of the button back to normal.

And that’s it! We just need to perform these 4 steps for every other form component that we want to implement the antibot component to!

All hail, AngularJS 2!!!


How to install and setup AngularJS 2 with SASS/SCSS and Bootstrap boilerplate easily

Hooray, AngularJS2 is officially released, which means it will officially be the tool of choice to build websites for me from now on.

Infact, I already started working on it.

Unfortunately, after many tries with various boilerplates/methods, they were all super complicated and more importantly, failed at some point of set up.

Thankfully, I found a easy and quite fool-proof way to automatically generate an angularJS2 seed project with best practises and testing all built in, SCSS/SASS support and installing bootstrap in only a few steps.


It’s funny why angular-ci wasn’t really advertised much in the angularJS docs, I only found out about it from Maximilian Schwarzmüller‘s udemy angularjs2 course.

Anyway, refer to https://github.com/angular/angular-cli to get started with angular-ci.

You can also use angular-ci to generate directives, components, what-nots.


Angular Translate on Angular JS 2 and Ionic Framework 2

Yes, finally I made it work.

What were the main issues?

  1. I had a lot of peer dependencies errors while installing ng2-translate. Apparently, I can ignore them all.
  2. The right dependencies need to be loaded on your app.ts and page.ts for the plugin to work.

Things to take note of, we load the bulk of the initialisation and config of the ng2-translate plugin in the bootstrap file, aka the app.ts, which serves as the root of your app. In Ionic1, this would be the app.js

This file serves as the base structure upon which you will load the other components upon.

Remember to call the translate service in the constructor! I suppose I am only having this problem now because I am new to AngularJS 2. In future, this should come in as second nature.

Here are the two files that are needed to make this Ionic Framework 2 implementation of ng2-translate run.

Many thanks to Olivier Combe for creating the Angular JS 2 port @ https://github.com/ocombe/ng2-translate

But seriously, the code examples needed to be clearer and more ‘plug and play’.

It was missing import {Http} from '@angular/http'; in the bootstrap file, and it wasn’t clear how the bootstrap and the component files should look like, once installed correctly. But anyway, here you go.





Using SCSS/SASS with AngularJS2 components

So previously, I’ve talked about how in AngularJS 2, you can include individual styles/stylesheets to be used exclusively by the respective component.

Problem is, this only natively supports CSS, which is quite a bummer.

From what I could see, there are two ways to go about this:

  1. Compile all SCSS files in the component folders, and concatenate them into one app.css
    This would mean that you will have to forego the encapsulation feature though, as there will no way for the components to know what styles are theirs.
  2. Compile all SCSS files in the component folders, save CSS files in the respective component folders, and load those generated css files instead.
    This seems to me, the more logical approach as the intended behaviour will be retained.
    Problem is, this means that your task runner will potentially be watching 100 scss files in 100 folders (or more) and compiling them. Maybe this isn’t such a big deal, I don’t know yet.
  3. Someone has also written about this at https://github.com/AngularClass/angular2-webpack-starter/wiki/How-to-include-SCSS-in-components.
    Apparently there is a solution using the Webpack task runner. However, to me, this seems to be adding a lot of bulk to the project, especially when I am already well-versed with Gulp/Grunt, and Ionic Framework already have their SCSS compilers in place.
    If I am not mistaken, going this route will allow your angularJS 2 components to load the SCSS files directly. The runner will process the SCSS files upon request, and return them as CSS strings.

Notable Issues

It’s worth noting that having multiple independent scss files are neat and all, however, they actually add overhead to the load times. Every thing you include, be it a view template or a scss file, is an additional http request.

That’s why it is recommended to embed your html template within your component’s Typescript file using template: <h1>Hello</h1>  if the code is small and lean (which is the goal).

Styles-wise, it would be perfect if we could simply enter SCSS code into the styles attribute, and the app would be able to compile the resulting scss into css.

That would be the best solution in my opinion, and we can get rid of all these processes, although there will be similar processes happening in the background, but it will feel seamless.