If you were to create a diagram of your components on a particular screen (that is, view/page), drawing arrows between them to indicate the flow of data, the arrows would point from one component's outputs to another component's inputs.

In code, as we'll see later in our implementations, the ways in which we bind outputs and inputs are in our component templates (that is, in the HTML). But to have binding in HTML, we need to create our components in code and we need to give them interfaces.

Let's take a quick look at a concrete example—it'll show how a parent component could pass data to its child component. To demonstrate this, let's first create our two components.

Here is our DadComponent, which will be the parent component:

import {Component } from '@angular/core';
@Component({
    selector: 'dad',
    template: `<h1>Hello. {{message}}.</h1> <br/> 
        <son *ngFor="let name of arrSonNames" 
        [Name]="name">
        </son>
    `,
})
export class DadComponent { 
    message : string = "I'm a Dad";
    arrSonNames = ['Justin','','Brendan'];
}

Here is our SonComponent, which will be the child component:

import { Component, Input, OnInit } from '@angular/core';
@Component({
    selector: 'son',
    template: `<h2>Hi. I'm a son, and my name is {{_name}}.</h2>`
})
export class SonComponent implements OnInit {
    _name: string;
    constructor() {
        console.log("The son component was just instantiated.");
    }
    ngOnInit(){
        console.log("The son component is now fully initialized.");
    }
    @Input()
    set Name(name : string ) {
        this._name = (name && name.trim()) || "I am a son."; 
    }
    get Name() {
        return this._name;
    }
}

There's a lot going on in this little bit of code. I won't describe what's going on in the previous code blocks. Rather, I'd like for you to study it for a few minutes and see if you can figure out what's going on. You should have enough information from previous chapters, along with with some basic knowledge of JavaScript/TypeScript, and an understanding of getters and setters (as many languages have). I know you can do it—give it a try. I'll give you two hints: 1) @Input() is a decorator, and in this case, it creates the public interface of SonComponent; 2) DadComponent will end up creating three instances of SonComponent. Two of the sons will know their own name, and unfortunately, one of the sons won't know his name. What does he say? What are the names of the sons that do know their name? Can you see why three sons are created? Can you guess what would be written to the console, and how many times it would be written?

We're going to see a lot of this pattern throughout our implementations, so don't worry if it looks strange, or seems a bit complicated, and you can't answer all of the questions I've asked. This stuff should become second nature to you after a while. And yes, I will be explaining our implementation code from now on—not in excruciating detail, but in enough detail for you to understand the material at hand. For now, I just wanted you to get a feel for what this passing of data via component interfaces looks like.