Angular : Working with Nested Components

<!doctype html>

<html>

<head>
  <script src="./lib/main.ts"></script>
</head>

<body>
  <my-app>
    loading...
  </my-app>
</body>

</html>

//our root app component
import {Component, NgModule} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';

import {MyProfileComponent} from './profile';
import {MyFriendComponent} from './myFriend';

@Component({
  selector: 'my-app',
  template: `
    <div>
      <h2>My Profile</h2>
      <my-profile></my-profile>
    </div>
  `
})
export class App {
  name:string;
  constructor() {
    
  }
}

@NgModule({
  imports: [ BrowserModule ],
  declarations: [ App, MyProfileComponent, MyFriendComponent ],
  bootstrap: [ App ]
})
export class AppModule {}

// Shim the environment
import 'core-js/client/shim';

// Angular requires Zones to be pre-configured in the environment
import 'zone.js/dist/zone';

//main entry point
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app';

import './style.css';

platformBrowserDynamic().bootstrapModule(AppModule);

h1,
p {
    font-family: sans-serif;
}

import { Component, Input, Output, EventEmitter } from '@angular/core';
 
@Component({
    selector: 'my-friend',
    template: `
              <div>
                <table>
                  <tr>
                    <td>{{name}}</td>
                    <td>
                      <img 
                      src="https://d1nhio0ox7pgb.cloudfront.net/_img/o_collection_png/green_dark_grey/256x256/plain/user.png" 
                      width="20" />
                    </td>
                    <td>
                      <button (click)='OnClick()'>Ping</button>
                    </td>
                    <td> {{timesPinged}} </td>
                  </tr>
                </table>
              </div>
    `
})
export class MyFriendComponent{
  @Input() name : string;
  timesPinged: number = 0;
  @Output() pingClicked: EventEmitter<string> = new EventEmitter<string>();
  
  OnClick(){
    this.timesPinged++;
    this.pingClicked.emit('You pinged ' 
      + this.name + ' ' 
      + this.timesPinged 
      + (this.timesPinged == 1? ' time' : ' times'));
  }
}

import { Component } from '@angular/core';

@Component({
    selector: 'my-profile',
    template: `
              <img [src]="imgURL" width="50"/>
              <br />
              {{pingMessage}}
              <br />
              Total Pings today : {{totalPings}}
              <h3>My Friends</h3>
              <div *ngFor="let friend of friends">
                <my-friend [name]='friend'
                          (pingClicked)='onFriendPingClicked($event)'>
                </my-friend>
              </div>
    `
})
export class MyProfileComponent{
  imgURL: string;
  friends: Array<string>;
  totalPings: number;
  pingMessage: string;
  constructor(){
    this.imgURL = 
    'https://d1nhio0ox7pgb.cloudfront.net/_img/o_collection_png/green_dark_grey/256x256/plain/user.png';  
    this.friends = [
      'Friend A',
      'Friend B',
      'Friend C',
      'Friend D',
      'Friend E'
    ];
    this.totalPings = 0;
    this.pingMessage = '';
  }
  
  onFriendPingClicked(pingMessage: string): void{
    this.totalPings++;
    this.pingMessage = pingMessage;
  }
  
}

{
    "name": "@plnkr/starter-angular",
    "version": "1.0.3",
    "description": "Angular starter template",
    "dependencies": {
        "@angular/common": "^7.0.0-rc.0",
        "@angular/compiler": "^7.0.0-rc.0",
        "@angular/core": "^7.0.0-rc.0",
        "@angular/platform-browser": "^7.0.0-rc.0",
        "@angular/platform-browser-dynamic": "^7.0.0-rc.0",
        "core-js": "^2.5.5",
        "rxjs": "^6.1.0",
        "zone.js": "^0.8.26"
    },
    "main": "./lib/main.ts",
    "plnkr": {
        "runtime": "system",
        "useHotReload": true
    }
}

{
    "compilerOptions": {
        "experimentalDecorators": true
    }
}