Moar!

I'm crack smoking my way through a series of online trainings on Angular 4. Some things from this weekend are:

1. You may define a custom shape for an input on a component like so:
   @Input whatever: { foo: string, bar: Boolean, baz: number, qux: Date };
2. @Input('significance') whatever: any; is an example of having an alias at an Input. (You may have one of these at an Output too.) Where you hand something in for the Input from outside the component you will have/use "significance" at the component tag, but inside it's just: "whatever"
3. The styles and stylesUrls metadata properties at a component's decorator by default will be scoped to the component that uses them and components set here will not bleed into other components. To make this happen there are some compiler tricks that dress up the CSS you give. Setting all the text to be red in color at one component will not bias a neighboring component. If you want to affect everyone outside of yourself, so to speak, there is a way to do so. You may use, at your component's decorator, the metadata property of encapsulation like so:
   encapulation: ViewEncapsulation.None
   ViewEncapsulation has two other settings besides None. The first is Emulated which is the default setting we really just discussed and the other, red-headed stepchild, is Native, which attempts to use the Shadow DOM to manipulate a tree of nodes. Do note that a Shadow DOM approach (walling off a bit of the DOM into a pseudosecondDOM) is not supported by all browsers.
4. The pound sign led variables inside of a tag which are sort of the new ids are formerly called local references. A local reference may be handed into other things in the same template only, for example a click event such as (click)="whatever(myLocalReference)" and yet with something like @ViewChild('myLocalReference') myComponentSideVariable: ElementRef you may have at the local reference at the TypeScript side of the component and do things like:
   let foo = this.myComponentSideVariable.nativeElement.value;
5. The stuff inside of a component's selector tag is generally just a temporary message to be displayed before a component and its template loads, however, if you actually want to use this, whatever it is, in the template for the component, you may use this tag to make it happen:
   <ng-content></ng-content>
6. I'm learning a little more about some of the esoteric lifecycle hooks. ngDoCheck runs when there is a change. It runs when change detection runs, be it when a button is clicked or a timer is fired, etc. ngAfterContentInit runs when the parent (well, wrapping) component's view loads and ngAfterContentChecked when it is done loading while ngAfterViewInit happens when the view for the component itself starts loading and ngAfterViewChecked when it is done loading. ngOnDestroy fires off when a component is destroyed. So when would you have an example of a component being destroyed? Well, let's say you have an array as a property in a component and that array feeds an *ngFor loop at the template and furthermore inside the *ngFor loop there is a selector tag for a nested component. OK, well, in that scenario, when you drop something out of the array you are also dropping a component. Something like ngDoCheck gets looped in from @angular/core as DoCheck. Basically at the imports you use the same names without the leading ng.
7. <div *ngIf="whatever; else elsey">True</div>
   <ng-template #elsey>False</ng-template>
   ...is an example of using an else condition with an *ngIf and do note that along these lines there is also support for a then condition...
   <div *ngIf="whatever; then thenish else elsey">True</div>
   <ng-template #thenish>Still True</ng-template>
   <ng-template #elsey>False</ng-template>
8. new EventEmitter<{ foo: string, bar: Boolean, baz: number, qux: Date }> is also legit.
9. @ContentChild is kinda like @ViewChild but it applies to content in the ng-content tag. It may be had at as soon as the ngAfterContentInit lifecycle hook while @ViewChild may be had at the ngAfterViewInit lifecycle hook.
10. At an event or an attribute you may always pass a function call with a variable (or two or three) or a equality comparison for true or false result. At events you may just hand in a string or an object instead of $event or make $event a second parameter.
11. At a component selector tag you may have an *ngFor and then also hand in the child variable name to an attribute at the tag.