mitzen

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. 

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" d...

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 int...

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