Angular Components Interaction
Angular Components are a logical piece of code for Angular JS application. Angular Components consists of the following −
Template − This is used to render the view for the application. This contains the HTML that needs to be rendered in the application. This part also includes the binding and directives.
Class − This is like a class defined in any language such as C. This contains properties and methods. This has the code which is used to support the view. It is defined in TypeScript.
Metadata − This has the extra data defined for the Angular class. It is defined with a decorator.
Common component communication scenarios are listed, in which two or more components share information.
Pass data from parent to child with input binding
HeroChildComponent has two input properties, typically adorned with @Input decorations.
component-interaction/src/app/hero-child.component.ts
import { Component, Input } from ‘@angular/core’;
import { Hero } from ‘./hero’;
@Component({
selector: ‘hero-child’,
template: `
<h3>{{hero.name}} says:</h3>
<p>I, {{hero.name}}, am at your service, {{masterName}}.</p>
`
})
export class HeroChildComponent {
@Input() hero: Hero;
@Input(‘master’) masterName: string;
}
The second @Input aliases the child component property name masterName as ‘master’.
The HeroParentComponent nests the child HeroChildComponent inside an *ngFor repeater, binding its master string property to the child’s master alias, and each iteration’s hero instance to the child’s hero property.
component-interaction/src/app/hero-parent.component.ts
import { Component } from ‘@angular/core’;
import { HEROES } from ‘./hero’;
@Component({
selector: ‘hero-parent’,
template: `
<h2>{{master}} controls {{heroes.length}} heroes</h2>
<hero-child *ngFor=”let hero of heroes”
[hero]=”hero” [master]=”master”></hero-child>
`
})
export class HeroParentComponent {
heroes = HEROES;
master = ‘Master’;
}
E2E test that all children were instantiated and displayed as expected:
component-interaction/e2e-spec.ts
// …
let _heroNames = [‘Mr. IQ’, ‘Magneta’, ‘Bombasto’];
let _masterName = ‘Master’;
it(‘should pass properties to children properly’, function () {
let parent = element.all(by.tagName(‘hero-parent’)).get(0);
let heroes = parent.all(by.tagName(‘hero-child’));
for (let i = 0; i < _heroNames.length; i++) {
let childTitle = heroes.get(i).element(by.tagName(‘h3’)).getText();
let childDetail = heroes.get(i).element(by.tagName(‘p’)).getText();
expect(childTitle).toEqual(_heroNames[i] + ‘ says:’);
expect(childDetail).toContain(_masterName);
}
});
// …
IT Professionals, Web Developers, Web Programmers, IT students can Apply for the certification course to move ahead in their careers.
Back to Angular 4 Tutorial Main Page 
