One Step: Angular2 Learning Note (2)：Basic idea: (Add new component/ Add new services/ @Inject/ @Input/ @Outpu/ Two-way Binding)

(1) Create a new angular project by $ng new hello

$cd hello and start it with $ng serve -o (-o means open it with default browser)

This hello application should listen on http://localhost:4200/

The structure of this project can be referred to https://tmp4by.blogspot.com/2018/07/angular2-learning-note-1basic-project.html

For example, if you change the title variable in app.component.ts, the context in app.component.html will follow up
(you should see the server detect your change and re-start)

(2) Create a new component by $ng generate component simple-form (which equals with $ng g c simple-form)

You can use $ng g c simple-form --inline-template --inline-style (which can be shorter, $ng g c simple-form -it -is).
The two options will put your .html and .css into the Typescript file, nothing very special. We use $ng g c simple-form here.

Check src/app/simple-form.component.ts, this describes your component. App-simple-form is the directive name you can use in the view.

Modify the context of src/app.component.html. Delete some redundancy context.

As you can see, the context of simple-form is added into our view

(3) Events and Reference

Add the following code into src/app/simple-form/simple-form.component.html

And add the following code into src/app/simple-form/simple-form.component.ts.
When the button is click (or mouseover, it pass the $event and the value of #myInput to onClick() function)

Open console of your browser to see the console.log output (cmd+option+k in mac)

(4) Dependency Injection

Create a service by $ng g s mail (in complete: $ng generate service mail)

And add to provider in src/app/app.module.ts (Remember to import)

( There is another syntax supporting, list here)

And add this service in constructor in src/app/app.component.ts (Also remember to import)

( Another syntax using inject lists here)

Since we already inject this service into app. Add a array message in src/mail.service.ts

And use this in app.component.html

(5) ngFor

Add the following code to src/app.component.html.

And see the result

(6) @Input/ @Output

@Input and @Output are two method to pass parameter between two components.
It is easier if two components are parent<->child, but passing between two sibling components is still doable.
We use a parent component <app-root> and child component <app-simple-form> as example

In order to pass parameter from root to simple-form.

(1) Declare a @Input [variable] in the receiver component and use it in the view

(2) pass this parameter in the html tag in parent component

(ex: [variable] = … )

And you may see the context in child component is based on parent component

In order to pass parameter from from simple-form to root.

(1) Declare a @Output [variable] in simple-form component, means we are going to pass this parameter out-ward

In the button, add (click)=”variable.emit(message)”. The eventemitter will send it when we click the button

(2) Add (update)=”onUpdate()” in app component as receiver from simple-form component and call the method provided in mail service

(3) Change the value stored in mail service

(7) Two-way binding:

Angular provides [(ngModel)] to implement two-way-binding, which is monitor the specific variable.
The two-way is the combination of ( )->event and [ ]->pass_value_in.
When the value is changed in this component, ()->event will pass the value out, when the value is changed from outside, []->pass_value_in will pass the value out.