Angular4: Pass data from parent to child component (part 5)

Set  up an ng project,

$ ng new angularcomponentpassing

Create a new component,

$ ng g c cockpit

File: cockpit.component.ts

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

selector: 'app-cockpit',
templateUrl: './cockpit.component.html',
styleUrls: ['./cockpit.component.css']
export class CockpitComponent implements OnInit {
@Input('srvElement') element: {name: string, id: number;}
constructor() { }

ngOnInit() {

Note: ‘srvElement’ is an alias for ‘element’ and can be left out above like this,

@Input() element: {name: string, id: number;}
constructor() { }

File: cockpit.component.html

cockpit works!
<p><strong>Name:</strong> {{ }}, <strong>id:</strong> {{ }}</p>

File: app.component.ts

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

selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']

export class AppComponent {
title = 'app works!';
serverElements = [{name: 'John', id: 8}, {name: 'Matt', id: 10}];

File: app.component.html

<app-cockpit *ngFor="let serverElement of serverElements" [srvElement]="serverElement">hello</app-cockpit>

If the alias for ‘element’, which is ‘srvElement’ is not used then the above line should be,

<app-cockpit *ngFor="let serverElement of serverElements" [element]="serverElement">hello</app-cockpit>

Angular 4: Bootstrap & Components (part 2)

First install Bootstrap,

$ npm install --save bootstrap

Then add bootstrap to .angular-cli.json which can be found in the root of the project. Find the ‘styles’ and add the path for bootstrap like this,

"styles": [

Then in the project root run,

$ npm install,

Create a component called ‘sum’ with,

$ ng g c sum

Next get the sum component into the root component.
Go to src/app/app.component.html and place the selector for the sum component which is,


This gets placed as follows,

Now that we’ve placed our sum component in the root component we would like to set it’s contents. This can be done in src/app/sum/sum.component.html

And so at http://localhost:4200 we should see the contents of the sum component inside the root component like this,