Angular 2/4 learning

learning-angular-2-notes.md

Learning Angular 2

Modules:

NgModules consolidate components, directives, and pipes into cohesive blocks of functionality, each focused on a feature area, application business domain, workflow, or common collection of utilities.

Modules can also add services to the application. Such services might be internally developed, such as the application logger. Services can come from outside sources, such as the Angular router and Http client.

Data Binding:

1. Interpolation

   <li>{{dog.name}}</li>

   The easiest way to display a component property is to bind the property name through interpolation. With interpolation, you put the property name in the view template, enclosed in double curly braces: {{dog.name}}.

   The {{dog.name}} interpolation displays the component's dog.name property value within the <li> element.

2. Property Binding

   <dog-detail [dog]="selectedDog"></dog-detail>

   <button [disabled]="!selectedDog"></button>

   The [dog] property binding passes the value of selectedDog from the parent AppComponent to the dog property of the child DogDetailComponent.

   Putting square brackets around a property, to the left of the equal sign (=), makes it the target of a property binding expression. You must declare a target binding property to be an input property. Otherwise, Angular rejects the binding and throws an error.

   The most common property binding sets an element property to a component property value.

3. Event Binding

   <li (click)="selectDog(dog)"></li>

   The (click) event binding calls the component's (AppComponent) dogHero method when the user clicks a dog's name.

4. Two-way Data Binding

   <input [(ngModel)]="dog.name">

   Two-way data binding is an important fourth form that combines property and event binding in a single notation, using the ngModel directive.

   In two-way binding, a data property value flows to the input box from the component as with property binding. The user's changes also flow back to the component, resetting the property to the latest value, as with event binding.

Decorators:

@NgModule({
  imports:      [ BrowserModule ],
  providers:    [ Logger ],
  declarations: [ AppComponent ],
  exports:      [ AppComponent ],
  bootstrap:    [ AppComponent ]
})

Decorators are functions that modify JavaScript classes. Angular has many decorators that attach metadata to classes so that it knows what those classes mean and how they should work

Components:

A component controls a patch of screen called a view.

You define a component's application logic — what it does to support the view — inside a class. The class interacts with the view through an API of properties and methods.

export class HeroListComponent implements OnInit {
  heroes: Hero[];
  selectedHero: Hero;

  constructor(private service: HeroService) { }

  ngOnInit() {
    this.heroes = this.service.getHeroes();
  }

  selectHero(hero: Hero) { this.selectedHero = hero; }
}

Metadata:

Metadata tells Angular how to process a class.

Looking back at the code for HeroListComponent, you can see that it's just a class. There is no evidence of a framework, no "Angular" in it at all.

In fact, HeroListComponent really is just a class. It's not a component until you tell Angular about it.

To tell Angular that HeroListComponent is a component, attach metadata to the class.

In TypeScript, you attach metadata by using a decorator.

@Component({
  selector:    'hero-list',
  templateUrl: './hero-list.component.html',
  providers:  [ HeroService ]
})
export class HeroListComponent implements OnInit {
/* . . . */
}

Here is the @Component decorator, which identifies the class immediately below it as a component class.

The @Component decorator takes a required configuration object with the information Angular needs to create and present the component and its view.

Templates:

You define a component's view with its companion template. A template is a form of HTML that tells Angular how to render the component.

Directives:

aka Instructions in the DOM!

There are three kinds of directives in Angular:

1. Components: Directives with a template.
2. Structural Directives: Change the DOM layout by adding and removing DOM elements. e.g. ngIf or ngFor
3. Attribute Directives: Change the appearance or behavior of an element, component, or another directive. e.g. ngStyle or ngClass

Component Interaction:

Pass properties data from child to parent component with Event Emitters:

The child component exposes an EventEmitter property with which it emits events when something happens. The parent binds to that event property and reacts to those events.

The child's EventEmitter property is an output property, typically adorned with an @Output decoration as seen in this VoterComponent:

...
export class VoterComponent {
  @Input()  name: string;
  @Output() onVoted = new EventEmitter<boolean>();
  voted = false;
 
  vote(agreed: boolean) {
    this.onVoted.emit(agreed);
    this.voted = true;
  }
}

Pass properties data from parent to child component with @Input binding:

@Input ... pass properties data from parent to child component

Lifecycle:

ngOnChanges: called after a bound input property changes

ngOnInit: called once the component is initialized

ngDoCheck: called during every change detection run

ngAfterContentInit: called after contect (ng-content) has been projected into view

ngAfterContentChecked: called every time the projected content has been checked

ngAfterViewInit: called after the component's view (and child views) has been initialized

ngAfterViewChecked: called every time the view (and child views) have been checked

ngOnDestroy" called once the component is about to be destroyed