ppetpadriew/angular_tutorial_note.md

## angular_tutorial_note.md

      
    Raw
  

              angular_tutorial_note.md
            
          
When we render custom component, we need to use the selector value defined in the custom component

// TS part
@Component({
  selector: 'app-sidebar',
  ...
})
class SidebarComponent extends Component {

}

// HTML part
<body>
  <app-sidebar></app-sidebar>
</body>


How to assign property on construct in Angular ? (angular/di.js#22)

We shouldn't do that. We should separate component and state class. If you want to have class to holder data, create a separate class and inject it into component class.


We can use module visualization to find the circular dependencies (https://github.com/pahen/madge)
All components are directive.
NgModel (Need to import FormModule)

One way binding: [ ]: Component to View only
Two way binding: [( )]: Component to View and View to Component

If use within a form, the input required "name" attribute to make two way binding works


Form

any control elements, need to define "name" attribute. Name you defined will appear in the NgForm object.
Use #spy to monitor the state of the input
To reset control states, use NgForm.reset()


Directive

selector: surround seleector with [] tells Angular that the directive should be used as attrbiute. ({selector: [selector]})
providers: the provider that we want our component to attach to. Using multi: true means to get multiple instances when getting particular provider with token


<input type="text" #spy>
{{spy.className}}


In TS, we can instantiate object and assign to the variable in declaration section.
DI

Type hint in constructor class can be used for automatic DI
Angular has Injector tree like parent and child. The resolve and create dependencies process will start from the child up to the parent.
We can use DI as standalone system without Angular if we want to. (We shouldn't want this most of the time since Angular does all for us)
We need to tell Angular how we want the dependency to be attached. By default (Angular 6), when we create the service using angular-cli, it will attach your service to root.


Observable

Can emit sequences of value while Promise can't
Can be used as an alternative to promise. It gives and behave similar to Promise
It has been used by the Angular HttpModule


Component Interaction

use [] in the component selector to pass down the data to child component. The child component need to define @Input decorator to the field.
use @Output to send data from child component to parent component.
Capture the child's event by EventEmitter class
Events
We can use ngOnChanges in the component class to hook the changes of field in component. The alternative way is to use setter (Typescript/JS feature).


How to write tests ?
How to reduce code duplication for displaying error messages in form validation
https://blog.thoughtram.io/angular2/2015/11/23/multi-providers-in-angular-2.html
Workshop to get more understanding on https://stackoverflow.com/questions/38420933/angular-2-useexisting-providers
Try standalone DI
https://angular.io/guide/cheatsheet