Add component tree

Author: ueler

README.md

@@ -16,7 +16,7 @@ https://stackoverflow.com/questions/35042929/is-it-necessary-to-unsubscribe-from
 
 
 ## How to run the examples by yourself
-The project was set up using the latest Angular CLI. Therefore you can just clone the repository and run
+The project was set up using the latest [Angular CLI](https://github.com/angular/angular-cli) (version 8.3.6). Therefore you can just clone the repository and run
 ``
 npm start
 ``
@@ -233,21 +233,33 @@ this.router.events.subscribe((event) => {
 ```
 To investigate how this observable behaves, we navigated to the component and then navigated to other components afterwards.
 
-## Outcomes
-### Side effects
+### Outcomes
+#### Side effects
 The observables callback is still executed even when the component is destroyed. So there can be unwanted side effects,
 when using certain code in the callback.
 
-### Memory leak
+#### Memory leak
 The above version creates a memory leak, since we use a reference to the component in the callback. 
 Each time we navigate to the component a new dangling component (that cannot be garbage collected) is created.
 If no reference is used, the component gets garbage collected.
 
-## Summary
+### Summary
 You should always unsubscribe when using the events observables from the ``Router`` in components 
 (there is one exception tough, namely if you use it in the root component) as the subscription is still alive, even if
 the component was destroyed by Angular.
 
+## Memory leaks in component trees
+We wondered if a subcomponent of a component with an observable that does not complete could maybe 
+cause a memory leak on the whole component tree upwards.
+
+To this end we created ``ComponentTreeComponent``, which has an infinite time observable in the most inner
+component.
+
+### Outcomes
+As expected, only the component with the timer does not get garbage collected.
+This is good news, as this means the third party components (as used as in this example) 
+cannot affect memory leaks on your components.
+
 ## Recommended ways to unsubscribe
 The obvious way of unsubscribing is how it is done in our examples: Assign the subscription to a class 
 property and unsubscribe in the ``ngOnDestroy()`` method.

angular-app/src/app/app-routing.module.ts

@@ -3,6 +3,7 @@ import {RouterModule, Routes} from '@angular/router';
 import {EmptyComponent} from './empty/empty.component';
 import {RxjsTimerComponent} from './rxjs-timer/rxjs-timer.component';
 import {
+  PATH_COMPONENT_TREE,
   PATH_EMPTY,
   PATH_HTTP_CLIENT,
   PATH_ROUTER_EVENTS,
@@ -14,6 +15,7 @@ import {RxjsTimerCompleteComponent} from './rxjs-timer-complete/rxjs-timer-compl
 import {HttpclientComponent} from './httpclient/httpclient.component';
 import {RouterParamMapComponent} from './router-param-map/router-param-map.component';
 import {RouterEventsComponent} from './router-events/router-events.component';
+import {ComponentTreeComponent} from './component-tree/component-tree.component';
 
 
 const routes: Routes = [
@@ -23,7 +25,8 @@ const routes: Routes = [
   {path: PATH_HTTP_CLIENT, component: HttpclientComponent},
   {path: PATH_ROUTER_PARAM_MAP, component: RouterParamMapComponent},
   {path: PATH_ROUTER_PARAM_MAP + '/:param', component: RouterParamMapComponent},
-  {path: PATH_ROUTER_EVENTS, component: RouterEventsComponent}
+  {path: PATH_ROUTER_EVENTS, component: RouterEventsComponent},
+  {path: PATH_COMPONENT_TREE, component: ComponentTreeComponent}
 ];
 
 @NgModule({

angular-app/src/app/app.component.html

@@ -25,6 +25,9 @@ <h1>Example Angular app with two routes</h1>
   <li>
     <a [routerLink]="RoutingLinks.routerEvents">Angular router events</a>
   </li>
+  <li>
+    <a [routerLink]="RoutingLinks.componentTree">Component tree</a>
+  </li>
 </ul>
 <hr>
 <router-outlet></router-outlet>

angular-app/src/app/app.module.ts

@@ -13,6 +13,9 @@ import { TakeUntilComponent } from './unsubscription-methods/take-until/take-unt
 import { UntilDestroyedComponent } from './unsubscription-methods/until-destroyed/until-destroyed.component';
 import { RouterParamMapComponent } from './router-param-map/router-param-map.component';
 import { RouterEventsComponent } from './router-events/router-events.component';
+import { ComponentTreeComponent } from './component-tree/component-tree.component';
+import { SubComponentOneComponent } from './component-tree/sub-component-one/sub-component-one.component';
+import { SubComponentTwoComponent } from './component-tree/sub-component-one/sub-component-two/sub-component-two.component';
 
 @NgModule({
   declarations: [
@@ -25,7 +28,10 @@ import { RouterEventsComponent } from './router-events/router-events.component';
     TakeUntilComponent,
     UntilDestroyedComponent,
     RouterParamMapComponent,
-    RouterEventsComponent
+    RouterEventsComponent,
+    ComponentTreeComponent,
+    SubComponentOneComponent,
+    SubComponentTwoComponent
   ],
   imports: [
     BrowserModule,

angular-app/src/app/component-tree/component-tree.component.html

@@ -0,0 +1,2 @@
+<p>Component tree</p>
+<app-sub-component-one></app-sub-component-one>

angular-app/src/app/component-tree/component-tree.component.scss

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ComponentTreeComponent } from './component-tree.component';
+
+describe('ComponentTreeComponent', () => {
+  let component: ComponentTreeComponent;
+  let fixture: ComponentFixture<ComponentTreeComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ComponentTreeComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ComponentTreeComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

angular-app/src/app/component-tree/component-tree.component.spec.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-component-tree',
+  templateUrl: './component-tree.component.html',
+  styleUrls: ['./component-tree.component.scss']
+})
+export class ComponentTreeComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

angular-app/src/app/component-tree/component-tree.component.ts

@@ -0,0 +1,2 @@
+<p>Component 1</p>
+<app-sub-component-two></app-sub-component-two>