book sample with parent and child component

README

To create the project

ng new parentchild
ng g c childone

cd parentchild
npm install --save bootstrap

app.component.html

<h1>{{title}}</h1>

<table class="table">
  <thead>
    <tr>
      <th>Title</th><th>Author</th><th>Rating</th>
    </tr>
  </thead>
  <tbody *ngFor="let book of books">
    <td>{{book.title}}</td>
    <td>{{book.author}}</td>
    <td>
      <stars [star_rating]="book.rating">
      </stars>
    </td>
  </tbody>
</table>

app.component.ts

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {

  title = "Parent and Child Demo"
  books = [
    {
      title: "War and Peace",
      author: "Leo Tolstoy",
      rating: 4
    },
    {
      title: "Nicholas Nickleby",
      author: "Charles Dickens",
      rating: 3
    },
    {
      title: "Memoirs of Sherlock Holmes",
      author: "Arthur Conan Doyle",
      rating: 5
    },
  ]
}

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';
import { ChildoneComponent } from './childone/childone.component';

@NgModule({
  declarations: [
    AppComponent,
    ChildoneComponent
  ],
  imports: [
    BrowserModule,
    FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

child.component.css

.childstars {
  font-size: 2em;
  color: orange;
}

child.component.ts

import { Component, OnInit, Input } from '@angular/core';

@Component({
  selector: 'stars',
  templateUrl: './childone.component.html',
  styleUrls: ['./childone.component.css']
})
export class ChildoneComponent implements OnInit {

  @Input() star_rating:number;

  constructor() { }

  calculatedStars():string {
    let retval = "";
    for(let i = 0;i < this.star_rating; i++ ){
      retval += "*";
    }
    return retval;
  }

  ngOnInit() {
  }

}

childone.component.html

<span class="childstars">
  {{calculatedStars()}}
</span>

styles.css

/* You can add global styles to this file, and also import other style files */

@import '~bootstrap/dist/css/bootstrap.min.css';

body, input, button {
  font-family: sans-serif;
  font-size: 1.3em;
}

.child {
  border: 1px solid #cacaca;
}

.output {
  border: 2px dashed #cacaca;
  background: beige;
}