Posted in Javascript

Angular2 Component Interactions with @Input() @Output() and events

Components are the core of Angular2. It is important and interesting to understand how components interact. I will try to explain the components’ interaction here.

We have 2 components here.

  1. Parent component, let’s call it Mom
  2. Child component, name it Daughter

The child component is contained inside the parent component. It looks like the one below

Let’s consider the cases:
Case 1: The child to parent communication. On click on button “Send message to Mom” button, the message “Hi Mom! Greetings from daughter” is passed from the child to the parent component. It looks like

To achieve this, we do the following at the child component

  1. Create an EventEmitter object inside the child component with  @Output() decorator
        @Output() callMomEvent = new EventEmitter();
  2. Fire the event. It is done inside the callMom() function in the child component.

So, putting it together, the child component looks like as follows

import { Component, EventEmitter,Output } from '@angular/core';

    selector: "daughter-component",
            `<div style="border:blue 2px solid; width:300px;margin-left: 51px;margin-bottom: 24px;">
               <h3> I am Child comoponent, the Daughter</h3>
               <div *ngIf="messageFromMom">Message from Mom: {{messageFromMom}}</div>
                <div><button (click)="callMom()">Send message to Mom</button></div>
export class ChildComponent {
    // Create EventEmitter object
    @Output() callMomEvent = new EventEmitter();
    // emit the event 
    callMom() {
        this.callMomEvent.emit("Hi Mom! Greetings from daughter");

And at the parent component, we do the following

  1. Listen the custom event callMomEvent .
     <daughter-component (callMomEvent)="handleCallMom($event)"></daughter-component>

    The callMomEvent is the event fired by the child component and handleCallMom is the function that handles the event. It is defined in the parent component

  2. Receive the data emitted and display it

Putting it together, the parent component looks like as follows

import { Component } from '@angular/core';

  selector: 'parent-component',
           `<div style="border:red 2px solid; width:800px;">
             <h3>I am parent component, the Mom</h3>
             <daughter-component (callMomEvent)="handleCallMom($event)"></daughter-component>
             <div *ngIf="messageFromChild">
                <h3>Message from Child: </h3>
  styleUrls: ['./app.component.css']

export class ParentComponent {
  private messageFromChild;
  handleCallMom(message) {
    this.messageFromChild = message;

That’s it

Case 2: Passing data from the parent component to child component

That’s simple. It’s done with input binding. Steps are as follows

  1. At the child component, declare variable messageFromMom using the @Input() decorator
    @Input() messageFromMom : string;
  2. At the parent component, bind messageFromMom as
    <daughter-component [messageFromMom]="greetings"  (callMomEvent)="handleCallMom($event)"></daughter-component></div>

That’s it

Posted in Uncategorized

Install and Switch node.js versions in Ubuntu

Node.js has a short release cycle which is good but sometimes it breaks things and deprecates a lot of stuffs.So, as a developer we would like maintain different versions of node.js. nvm is a handy tool to do that. We can install any version of node.js and also switch to a version accordingly. Let’s try nvm and switch versions
To install nvm

 wget -qO- | bash

To load nvm

export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/" ] && . "$NVM_DIR/" # This loads nvm
 source ~/.bashrc

– Now to install a node.js version  say 6.3.1.

   nvm install v6.3.1

– To switch  to a version

nvm use v6.3.1

– To see the list of installed versions

nvm list

The currently used version is v6.3.1 marked by ->

->       v6.3.1
node -> stable (-> v7.4.0) (default)
stable -> 7.4 (-> v7.4.0) (default)
unstable -> 6.9 (-> v6.9.5) (default)
iojs -> iojs- (-> N/A) (default)

– To remove a version

nvm uninstall v6.3.1
Posted in Uncategorized

Response to preflight request doesn’t pass access control check: No ‘Access-Control-Allow-Origin’ header

Today’s error is the following:
localhost:8100/#/app/login:1 XMLHttpRequest cannot load http://mysite.local/api/login. Response to preflight request doesn’t pass access control check: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘http://localhost:8100&#8217; is therefore not allowed access.

I was working on ionic & everything was working fine. Then I tried to use a login API. Suddenly from nowhere, it threw up the error . I guessed, it’s from the server side. But, again it works fine from the apk . Hmm, strange!
Then I installed a chrome-app Allow-control-allow-origin . And then, they he coded happily thereafter. Happy ending for the day!

Posted in Uncategorized

Android set up device for development (?????? no permissions)

Today I was trying to debugging on Device from ubuntu 14.04 & I was badly stuck.
Being new to Android, I was in the setup & debugging maze.
Now I was trying to debug from my smart phone.

        1. First thing I did was installing adb-tools. This lets you connect mobile devices to your machine for debugging
          sudo apt-get install android-tools-adb
        2. sudo apt-get install android-tools-adb
        3. Next Create a file named /tmp/android.rules with the following contents (hex vendor numbers were taken from the vendor list page)
          SUBSYSTEM=="usb", ATTRS{idVendor}=="0bb4", MODE="0666"
          SUBSYSTEM=="usb", ATTRS{idVendor}=="0e79", MODE="0666"
          SUBSYSTEM=="usb", ATTRS{idVendor}=="0502", MODE="0666"
          SUBSYSTEM=="usb", ATTRS{idVendor}=="0b05", MODE="0666"
          SUBSYSTEM=="usb", ATTRS{idVendor}=="413c", MODE="0666"
          SUBSYSTEM=="usb", ATTRS{idVendor}=="0489", MODE="0666"
          SUBSYSTEM=="usb", ATTRS{idVendor}=="091e", MODE="0666"
          SUBSYSTEM=="usb", ATTRS{idVendor}=="18d1", MODE="0666"
          SUBSYSTEM=="usb", ATTRS{idVendor}=="0bb4", MODE="0666"
          SUBSYSTEM=="usb", ATTRS{idVendor}=="12d1", MODE="0666"
          SUBSYSTEM=="usb", ATTRS{idVendor}=="24e3", MODE="0666"
          SUBSYSTEM=="usb", ATTRS{idVendor}=="2116", MODE="0666"
          SUBSYSTEM=="usb", ATTRS{idVendor}=="0482", MODE="0666"
          SUBSYSTEM=="usb", ATTRS{idVendor}=="17ef", MODE="0666"
          SUBSYSTEM=="usb", ATTRS{idVendor}=="1004", MODE="0666"
          SUBSYSTEM=="usb", ATTRS{idVendor}=="22b8", MODE="0666"
          SUBSYSTEM=="usb", ATTRS{idVendor}=="0409", MODE="0666"
          SUBSYSTEM=="usb", ATTRS{idVendor}=="2080", MODE="0666"
          SUBSYSTEM=="usb", ATTRS{idVendor}=="0955", MODE="0666"
          SUBSYSTEM=="usb", ATTRS{idVendor}=="2257", MODE="0666"
          SUBSYSTEM=="usb", ATTRS{idVendor}=="10a9", MODE="0666"
          SUBSYSTEM=="usb", ATTRS{idVendor}=="1d4d", MODE="0666"
          SUBSYSTEM=="usb", ATTRS{idVendor}=="0471", MODE="0666"
          SUBSYSTEM=="usb", ATTRS{idVendor}=="04da", MODE="0666"
          SUBSYSTEM=="usb", ATTRS{idVendor}=="05c6", MODE="0666"
          SUBSYSTEM=="usb", ATTRS{idVendor}=="1f53", MODE="0666"
          SUBSYSTEM=="usb", ATTRS{idVendor}=="04e8", MODE="0666"
          SUBSYSTEM=="usb", ATTRS{idVendor}=="04dd", MODE="0666"
          SUBSYSTEM=="usb", ATTRS{idVendor}=="0fce", MODE="0666"
          SUBSYSTEM=="usb", ATTRS{idVendor}=="0930", MODE="0666"
          SUBSYSTEM=="usb", ATTRS{idVendor}=="19d2", MODE="0666"
          SUBSYSTEM=="usb", ATTRS{idVendor}=="1bbb", MODE="0666"
        4. Run the following commands:
          sudo cp /tmp/android.rules /etc/udev/rules.d/51-android.rules
          sudo chmod 644   /etc/udev/rules.d/51-android.rules
          sudo chown root. /etc/udev/rules.d/51-android.rules
          sudo service udev restart
          sudo killall adb


        5. Disconnect the USB cable between the phone and the computer.  Reconnect the phone. Run
          adb devices

          to confirm that now it has permission to access the phone.