Switching to Angular - Third Edition

Defining the inputs and outputs

Let's use a bottom-up approach, and start with the InputBox component. Before that, we need a couple of imports from Angular's @angular/core package:

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

In this snippet, we import the @Component, @Input, and @Output decorators and the EventEmitter class. As their names state, @Input and @Output are used for declaring the directive's inputs and outputs. EventEmitter is a generic class (that is, accepting a type parameter), which when combined with properties decorated with @Output, allows them to emit values.

As the next step, let's take a look at the InputBox component's declaration:

// ch5/inputs-outputs/app.ts @Component({ selector: 'text-input', ...