Sunday, April 17, 2016

Creating your own Angular2 pipe.

Creating angular 2 pipe is easy.

First we need to create our pipe component and then wire up into basic component.

Lets get started. We are going to create a pipe component that takes a given number and add it up with a hard coded number like this.

{{ 1 | addup: 10 }}

1 is the given number.
10 is a hard coded number.

Lets create our pipe component. As you can see, we only need to decorate with @Pipe and implement PipeTransform and override "transform method"



And lets use it in our component :-



So we are importing our pipe "Addup" component in and then we need to inject our pipe in our component.

Finally, use the | operator to apply our newly created operator.

That's it. 

Saturday, April 16, 2016

Angular2 Multiple component - Interaction using @Output and @Output




Lets say you're building multiple components in your control. There must be some interaction that goes on between main component and child components. Lets take a look how we can do that.

Before proceeding further, it is also important to note that property binding - @Output is used to pass data from parent to child. Event binding @Output is to pass data from child to parent.

We are going to build a component that retrieve a list of item from server and display it on a list on main component and when you click on an item, the child will render out more details.


Next lets take a look at what our main component looks like :-


As you can see we have actually used Angular2 directive here called - "stockdetails". Perhaps it is easier to see here :-



[stock]  = is a directive and it must match @Input in our child component.

When we select a item on the list, we update a variable call stockDetail and you can see we are trying to pass it into "stock" directive (which you will see it in the next code snippet).

Here is the stock detail component. We  decorate it with @Input and then it get render into our component's view.



That's all it is!


Wednesday, April 13, 2016

Angular2 working with http

Things get more interesting when working with Http in Angular 2.

You will need to include angularjs2 http script.



Lets create a simple component that grab data from a rest service and renders on your component. Lets start with a component :-



If you look at "ngOnInit", this is a directive that automatically gets call when your component loads or alternatively you can use ES6 "constructor". But there are not the same. ngOnInit allows child components to setup their events or initiate a get request.

Our http request are called via getStock() and it uses reactive js to help to turn raw data into json.

this.http.get("http://jsonplaceholder.typicode.com/posts/1").map((res: Response) =>



res.json()).subscribe(

data => {
this.info = new Article(data.id, data.title, data.title);
},
err => console.log(err),
() => console.log('done!'));
};

As you can see, we use http.get() and then calls map to convert data into JSON format. Next we pass this to subscribe and data gets loaded in our markup / front end. All in a single statement. Cool.

Catches here :-

you need to import rxjs/Rx, otherwise you will not be able to call map method.

If you look at your mark up you see that we have a question mark beside our object attribute

you need to inject HTTP_PROVIDERS in our main.ts file as show below :-



If you missed that you, you will get "no http provider found " and lots of red colored text.

Sunday, April 10, 2016

Angular tutorial - Setup environment.


Just went through John Papa AngularJs first look tutorial.

I guess the best way to get people started is to get your environment ready.  Download from here.

Make sure you have npm installed and run the following command :-

npm install


In this tutorial, we are going to use typescript as our primary development js language.

Let's go create a really simple component. Angular2 requires @Component in your es6 module.



Our view looks like this. It's pretty simple, all you need is a uniquely named html markup to specify where you need to load it.




Next we need to create a separate file that binds our component together.




That's all you need to create a simple component.



Further reference:-

What are the attribute / property available under @Component.? Well I'm glad you ask that question. You can get all the answer here.

We have

1. viewProviders
2. template
3. templateUrl
4. styles
5. styleUrls
6. directives
7. pipes