added an example with Renderer2

Author: yfain

Angular4/inter-component/.angular-cli.json

@@ -1,7 +1,7 @@
 {
   "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
   "project": {
-    "name": "w3"
+    "name": "Inter-component communications"
   },
   "apps": [
     {
@@ -178,6 +178,31 @@
         "dev": "environments/environment.ts",
         "prod": "environments/environment.prod.ts"
       }
+    },
+    {
+      "name":"renderer",
+      "root": "src",
+      "outDir": "dist",
+      "assets": [
+        "assets",
+        "favicon.ico"
+      ],
+      "index": "index.html",
+      "main": "main-renderer.ts",
+      "polyfills": "polyfills.ts",
+      "test": "test.ts",
+      "tsconfig": "tsconfig.app.json",
+      "testTsconfig": "tsconfig.spec.json",
+      "prefix": "app",
+      "styles": [
+        "styles.css"
+      ],
+      "scripts": [],
+      "environmentSource": "environments/environment.ts",
+      "environments": {
+        "dev": "environments/environment.ts",
+        "prod": "environments/environment.prod.ts"
+      }
     }
   ],
   "e2e": {

Angular4/inter-component/src/app/renderer/app.component.ts

@@ -0,0 +1,24 @@
+import {Component, ElementRef, Renderer2, ViewChild} from "@angular/core";
+@Component({
+  selector: 'app-root',
+  template: `    
+
+    <input type="text" placeholder="Enter  your name">
+    <input class="dummy" type="text" placeholder="dummy field" >
+    
+    <button (click)="setFocusToDummy()">Set focus to the dummy input</button>
+
+  `
+})
+export class AppComponent {
+
+// @ViewChild('dummy') dummy: ElementRef;  // you'll need to add #dummy to the <input field>
+
+  constructor (private renderer: Renderer2){}
+
+  setFocusToDummy(){
+     // this.renderer.selectRootElement(this.dummy.nativeElement).focus();
+
+     this.renderer.selectRootElement('.dummy').focus();
+  }
+}

Angular4/inter-component/src/app/renderer/app.module.ts

@@ -0,0 +1,13 @@
+import { BrowserModule } from '@angular/platform-browser';
+import { NgModule } from '@angular/core';
+
+import { AppComponent } from './app.component';
+
+@NgModule({
+  declarations: [
+    AppComponent
+  ],
+  imports: [BrowserModule],
+  bootstrap: [AppComponent]
+})
+export class AppModule { }

Angular4/inter-component/src/main-renderer.ts

@@ -0,0 +1,4 @@
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { AppModule } from './app/renderer/app.module';
+
+platformBrowserDynamic().bootstrapModule(AppModule);