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';

@Component({
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

<hr>
<p>
cockpit works!
</p>
<p><strong>Name:</strong> {{ element.name }}, <strong>id:</strong> {{ element.id }}</p>

File: app.component.ts

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

@Component({
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

<h1>
{{title}}
</h1>
<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": [
"../node_modules/bootstrap/dist/css/bootstrap.min.css",
"styles.css"
],

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,

<app-sum></app-sum>

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,