Angular

Runtime configuration
Runtime environment configuration with Angular

Debugging
Chrome 
 inspect element 
 select your component and it will be assigned to $0 
 run 
 ng.probe($0).componentInstance
 
 change values as you desire or call object class members 
 to trigger the changes run 
 ng.probe($0)._debugInfo._view.changeDetectorRef.detectChanges()

Access Parent Component
Using @Input and a little trick to send the this of the parent to the child. I guess you can do it the other way around also, to access child from parent via an @Output 
 Parent Component 
 import { Component } from '@angular/core';

@Component({
 selector: 'app-root',
 template: '<app-child [parnt]="var2"></app-child>',
 style: ''
})
export class AppComponent {
 title = 'app works!';
 var1 = "val1";
 var2 = this;
}
 
 Child Component 
 import { Component, Input, EventEmitter, OnInit } from '@angular/core';

@Component({
 selector: 'app-child',
 template: '{{parnt.var1}}',
 style: ''
})
export class ChildComponent implements OnInit {
 @Input() parnt;
}
 
 You should see "val1" printed, the value of the var1 of the parent printed in the child template.

Router :: Subscribe to Route Changes
This example will change the function of a contextual button in a bootstrap/navbar 
 import { Component, OnInit } from "@angular/core";
import { Router, NavigationEnd } from "@angular/router";

import "rxjs/add/operator/filter";

@Component({
 selector: "my-app",
 templateUrl: `
 <nav class="navbar navbar-fixed-top navbar-light bg-faded">
 <a routerLink="/" class="navbar-brand">{{title}}</a>
 <div class="nav navbar-nav pull-xs-left">
 <a routerLink="/contacts" routerLinkActive="active" class="nav-item nav-link">Contacts</a>
 <a routerLink="/features" routerLinkActive="active" class="nav-item nav-link">Features</a>
 <a routerLink="/tools" routerLinkActive="active" class="nav-item nav-link">Tools</a>
 </div>
 <div class="nav navbar-nav pull-xs-right">
 <button routerLink="contextButtonLink" [disabled]="!contextButtonActive" type="button" class="btn btn-primary">{{contextButtonLabel}}</button>
 </div>
 </nav>
 <router-outlet></router-outlet>
`
})
export class AppComponent implements OnInit {
 title:string = "My App";

 contextButtonLabel:string = "New";
 contextButtonLink:string = "/";
 contextButtonActive:boolean = false;

 constructor(
 # inject the Router
 private router: Router,
 ) {
 }

 ngOnInit() {
 // subscribe to desired router changes, for example NavigationEnd events
 this.router.events.filter(
 e => e instanceof NavigationEnd
 ).subscribe(
 e => { this.contextButton(e); }
 );
 }

 contextButton(event) {
 if (event.urlAfterRedirects === "/contacts") {
 this.contextButtonLabel = "New";
 this.contextButtonLink = "/contacts/new";
 this.contextButtonActive = true;
 } else {
 // this.contextButtonLabel = "Disabled";
 // this.contextButtonLink = "/";
 this.contextButtonActive = false;
 }
 }
}

Structural Directives - The Asterisk (*) Prefix
The (*) is a syntactic sugar. You'll have a ng-template wrapped arround the host element with the *directive. 
 This snippet 
 @Component({
 selector: 'app-root',
 templateUrl: './app.component.html',
 styles: []
})
export class AppComponent {
 la = [1, 2, 3];
}
 
 app.component.html 
 <div *bla="la">
 some content
</div>
 
 will be transformed into 
 <ng-template [bla]="la">
	<div>
 	some content
 </div>
</ng-template>
 
 The bla directive moved to ng-template element where it is now a property binding
 meaning the BlaDirective should have an @Input() bla which will get the value of la . 
 
 The div element who hosted the *directive moved inside the ng-template . 
 and you need the directive like this 
 import { Directive, Input, TemplateRef, ViewContainerRef } from '@angular/core';

@Directive({
 selector: '[bla]'
})
export class BlaDirective {

 @Input() set bla(value) {
 console.log(value);
 }
 
 constructor(
 private templateRef: TemplateRef<any>,
 private viewContainer: ViewContainerRef) { }
}
 
 Structural directives need TemplateRef and ViewContainer. 
 TODO display the content of the template