Angular 2 components

Components are key parts in an angular 2 (or 4) application.
Let’s see how to write a component.

Filename: “user.component.ts” (ts = TypeScript)

import { User } from "./user.model";
import { Component, Input } from "@angular/core";

@Component({
selector: "mean-user",
templateUrl: "./user.component.html"
})

export class UserComponent {
@Input("inputUser") user: User;
}

import
A classic. You need to import all the things you will need in the component. angular/core is the library provided for us by the angular people.

@Component
This is called a decorator.
It is used to set some settings and to just say: “Hey buddy, this is a freaking Component”

selector
Suppose we have a page that needs to contain this component.
Well, that page just has to use the tag and.. Boom, magic!

templateUrl
What we would like to render with this component? The html contained in this html, you fool!

export class
Hey World! Now you will all notice the existence of this wonderful Component called UserComponent!

@Input(“inputUser”) user: User;
When we call this component we can give him an object!
Just do this:

<mean-user [inputUser]"user"></mean-user>

user is the object you pass to this Component.

Next thing you want to do is build one thousand more components and conquer the world.
Don’t forget to add explosions.