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. The @Input(

9 days ago

Latest Post Ansible to Slack by Matthew Davis

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

    }

}

Source Code Repositories:

Matthew Davis

Published 9 days ago

Comments?

Leave us your opinion.

powered by Typeform