@Input

import { Component, Input } from '@angular/core';
@Component({ ... })
export class ChildComponent {
    @Input() whoami: string;
}

- - -

@Component({
    ...,
    template: `<app-child [whoami]="name"></app-child>`
})
export class ParentComponent {
    name = 'moong';
}

@Output

import { Component, EventEmitter, Output } from '@angular/core';
@Component({
    ...,
    template: `<button (click)="setUserName(user)"></button>`
})
export class ChildComponent {
    user: string = 'moong';
    @Output() whoau: EventEmitter<string> = new EventEmitter();

    setUserName(user: string) {
        this.user = user;
        this.whoau.emit(user);
    }
}

- - -

@Component({
    ...,
    template: `<app-child (whoau)="setName($event)"></app-child>`
})
export class ParentComponent {
    user: string;
    setName(user: string) {
        this.user = user;
    }
}