Skip to content

Instantly share code, notes, and snippets.

@tedhagos
Last active December 18, 2018 01:50
Show Gist options
  • Save tedhagos/0ae38e6ca5b9a90778b7b77728b4c012 to your computer and use it in GitHub Desktop.
Save tedhagos/0ae38e6ca5b9a90778b7b77728b4c012 to your computer and use it in GitHub Desktop.
book sample with parent and child component
To create the project
ng new parentchild
ng g c childone
cd parentchild
npm install --save bootstrap
<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>
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
},
]
}
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 { }
.childstars {
font-size: 2em;
color: orange;
}
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() {
}
}
<span class="childstars">
{{calculatedStars()}}
</span>
/* 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;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment