Angular7 101: @Input() & @Output()

There are two ways to exchange data between components: Using the @Input() and @Output() decorators or a Service. In this exercise we’ll be using the component decorators.

https://vimeo.com/297674092

The @Input() decorator implements an input property that is available on the component template.

test-input.component.ts

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

@Component({
    selector: 'app-test-input',
    templateUrl: './test-input.component.html',
    styleUrls: ['./test-input.component.scss']
})
export class TestInputComponent {

    @Input() public myInputVariable: string;

}

The @Output() decorator implements an output property & provisions an Observable which is also available on the component template.

test-ouput.component.ts

import {Component, EventEmitter, Output} from '@angular/core';

@Component({
    selector: 'app-test-output',
    templateUrl: './test-output.component.html',
    styleUrls: ['./test-output.component.scss']
})
export class TestOutputComponent {

    @Output() public myOutput = new EventEmitter();

    public buttonClick(): void {

        this.myOutput.emit('helloworld');

    }

}

See also:

• https://matthewdavis.io/angular-components-input-output/
• https://github.com/mateothegreat/ng-byexamples-component-input-output

See more at https://matthewdavis.io