mysteries of ng-template and ng-content explained!

notes from a third at-work training on Angular and TypeScript yesterday...

1. The literals (string literal, object literal, array literal) are ways of instantiating state where the thing being created is also being defined and defined with some substance on the same line. This is different than merely newing up a string, array, or object. Observer:
   var stringLiteral = "My dog has fleas.";
   var arrayLiteral = ["foo", "bar", "baz", "qux"];
   var objectLiteral = {
      lucky: 13,
      everything: 42,
      sex: 69,
      delete: 86
   }
   This applies in JavaScript standalone too, not just TypeScript.
2. You may do some where T : Whatever stuff in TypeScript in particular like so:
   function myDoubler<T extends theInterfaceOfMine>(actor:T):T{
      actor.stuff = actor.stuff * 2;
      return actor;
   }
3. http://www.typescriptlang.org/docs/handbook/advanced-types.html has some notes on intersection types and union types.
4. ngOnInit runs after the constructor. The constructor runs as the class itself is initialized but before Angular in the bigger picture has woken up, so Inputs and the like are not accessible at the constructor. For the most part you should just plan on using ngOnInit in lieu of the constructor. You do need the constructor to loop in providers (services) specified at the module wrapping the component.
5. You may have as many attribute directives on a host element as you want but only one structural directive.
6. async as a pipe at an Observable at templates will do a subscribe on the Observable and also clean up the subscription when the component is abandoned. If you don't use the async pipe the Observable will do nothing at the UI.
7. router.activatedRoute.data will allow for handing is some simple data to a route. It cannot be driven by variables or change at all.
8. ContentChild and ContentChildren are like ViewChild and ViewChildren only they are used inside of that which is injected into ng-content tags. ngAfterViewChecked is the first event handler in sequence where one may have at ContentChild and ContentChildren.
9. ng-template allows for a tag for defining a template to be used elsewhere. It's guts will not appear where you strictly have in HTML markup in a component template. Do something like so:
   <ng-template #wackyCopy let-fooBar="bazQux" let-yinYang="whatever">
      <span>{{fooBar}}</span> <strong>{{yinYang}}</strong>
   </ng-template>
   The way variables are handed in with let- is kinda odd, huh? You would turn around and use this stuff somewhere like so with a ngTemplateOutlet:
   <ng-container *ngTemplateOutlet="wackyCopy;context:communicationObject">
   </ng-container>
   The communicationObject object would need to be a public property in your component, perhaps like so:
   communicationObject = {
      bazQux: "Don't turn around",
      whatever: "Der Kommissar's in town"
   }
10. Transclusion of Angular 1 has been renamed content projection in Angular 2 and up. It is the ng-content stuff.
11. If you have multiple ng-content tags use the select property to name the content area like so:
    <ng-content select=["secondaryStuff"]></ng-content>
    Do something like what is below when you hand in content to the greater ng-content, it will allow for a bit of your markup to find its way to the selector tag.
    <div>
       Normal Stuff
       <div secondaryStuff>
          More Stuff
       </div>
    </div>
12. The Renderer2 of Angular 4 is for latching ahold of DOM elements in a jQueryesque manner and manhandling stuff. Use it in tandem with ElementRef.
13. HostBinding lets you decorate the selector tag for a component from a component with CSS or whatever. You may reach up to the selector tag with this. You have to use the global listener to reach up any higher, and therein you are not reaching up, but instead down from the whole of the DOM document. HostListener lets you see catch events that happen at the host element (think selector tag) for the component. You can catch a click event with @HostListener('click') decorating a method at your component.
14. rxjs is functionally reactive stuff for Angular and ngrx as a library has the Redux store and rxjs Observables.