Animate Components with Angular 2

Here I come again!

In this time, I am going to explain how to animate components with Angular2. I do the next animations: bounce, fade, flip, roll, rotate, zoom and others.

Here you can see the demo (click the Project link button).

First of all, we will take a look to the structure of the components I developed.

We need, like in all Angular2 projects, an app.module.ts:

We have the root component. The real components we will use extends them and gets his properties:

Now we are going to explain an example animation. All animations go by the same way. If you understand one, you are going to understand all.

I choose the roll-animation.component.ts, because is the most easy to explain and to learn too.

We have three parts of a component: the css file, the html file and the typescript file).

The css file and the html file:

The typescript file:

In this file, we could see that the component RollAnimationComponent extends the RootAnimationComponent.

The other important thing you must look at is the attribute animations of the @Component. We can see, there's a trigger for ever event, that is defined by a transition that it is applied to any change of the component. And into the transition, we have different animations that will occur in any change of the component.

Any animate have a time (in miliseconds) and a transformation style. In this example, we could see a translate3d and a rotate3d and how change the opacity and the offset.

And finally, the easiest think. With only one line we call the component in my html file:

Here, in my domain, you could take a look to my animations (http://davidmartinezros.com/Angular2/components-animations-project/).

My project was inspired in this other project (http://daneden.github.io/animate.css/.) has done in AngularJS.

This is the repositori of my project where I develop my animations.

Here you can find the documentation in angular.io to do your animations.

Try it and have fun!

Bind json data to html table with Angular 2

Here I come again!

In this example I will show how to bind a JSON file with an html table with Angular2 (the new version of AngularJS, but with Typescript).

Here you can see the demo (click the Project link button).

We need a Service Object and a Component Object and I'm going to use Angular-cli to create them.

First of all, take a look to Service class:

(we will create them with: ng generate service [my.servicename.service])

And I make the next modifications:

The Service returns an Observable of any type, that makes asyncron the call from the Component. So you can extend the code by using any structure of JSON file and making some modifications.

Now I will show you the Component, that we will create with the instruction (ng generate component [componentname.component]):

 

The Component will call our Service and save the information of the JSON file.

Now comes the HTML file and the CSS file:



Here you can see the use of ngFor, the declaration of a variable with "let" and the attribute "async" that makes asyncron our request.

The JSON file will look like this. You can put the attributes you want, but it's important that the HTML file have the sames name of the JSON file's attributes.



And finally, I can show you the structure of the project that has been done with Angular-Cli, as I said in the beginning.



This is my Git Repository where I push this project and you can get it: https://github.com/davidmartinezros/bind-json-array-to-html-table.

Thanks for reading me, I hope it will help you!

Try it and have fun!

Wishes returns

The last article was to remember something that I'm not compromised over.

When there are thinks in life than you are not compromised over, one thing carries out to another.

When you have remembered all of them, you know which you liek one, which you like two and which let you touch the infinite.

The search is funny and, when you find what you want to do, the life smiles you.

To remember John makes whishes returns.

And which is you will ask yourserlves?



So, is part of the imagination, the fantasy and my vocation. Something that I could learn, funs me and it could be useful for me. Also is important that is something I have prepared for.

All makes sense. With 3D everything has it's place. My mind is organised, my virtual memory increases, my habilities are more virtuous and to write ceases to be an essentially professional and other reasons make me to write.

My aim is now to concentrate in videogame development with Unity's Software, concretely Unity3D. It's in which are made the videogames at the moment.

My idea is make a remake videogame, but with actually thing. I'm going to explain it:

"I saw a game in the Barcelona Games World with the name Ghost’n Goblins of the company Capcom. And I remember how were the old games. Nicely done games, funny games, actually games are overly complicated, makes think too much and don't enjoy so much.. My idea is to do a game like old ones, but with the actually thinks".

I search collaborators, if you are interested contact me and we talk about how you can aid the project.

I'm going to publish news about the project “Ghost’n Goblins: The Remake”.

Here's my project git repository.

Try it and have fun!