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.
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');
}
}