Important Parts in Angular 6 - will be updated.

OnDestroy()

Unsubscribe from Observables and DOM events. Stop interval timers. Unregister all callbacks that this directive registered with global or application services. You risk memory leaks if you neglect to do so.


EventEmitter

Here are the pertinent excerpts from that HeroDetailComponent:
src/app/hero-detail.component.ts (template)
template: ` <div> <img src="{{heroImageUrl}}"> <span [style.text-decoration]="lineThrough"> {{prefix}} {{hero?.name}} </span> <button (click)="delete()">Delete</button> </div>`

src/app/hero-detail.component.ts (deleteRequest)
// This component makes a request but it can't actually delete a hero. deleteRequest = new EventEmitter<Hero>(); delete() { this.deleteRequest.emit(this.hero); }

The component defines a deleteRequest property that returns an EventEmitter. When the user clicks delete, the component invokes the delete() method, telling the EventEmitter to emit a Hero object.

Now imagine a hosting parent component that binds to the HeroDetailComponent's deleteRequest event.

src/app/app.component.html (event-binding-to-component)

<app-hero-detail (deleteRequest)="deleteHero($event)" [hero]="currentHero"></app-hero-detail>

When the deleteRequest event fires, Angular calls the parent component's deleteHero method, passing the hero-to-delete (emitted by HeroDetail) in the $event variable.

Two-way binding ( [(...)] )

Angular offers a special two-way data binding syntax for this purpose, [(x)]. The [(x)] syntax combines the brackets of property binding, [x], with the parentheses of event binding, (x).


Directives

src/app/highlight.directive.ts
import { Directive, ElementRef } from '@angular/core';

@Directive({ selector: '[appHighlight]' }) export class HighlightDirective { constructor(el: ElementRef) { el.nativeElement.style.backgroundColor = 'yellow'; }

}

The import statement specifies an additional ElementRef symbol from the Angular core library:

You use the ElementRef in the directive's constructor to inject a reference to the host DOM element, the element to which you applied appHighlight.

ElementRef grants direct access to the host DOM element through its nativeElement property.

This first implementation sets the background color of the host element to yellow.

@HostListener
The @HostListener decorator lets you subscribe to events of the DOM element that hosts an attribute directive, the <p> in this case. Of course you could reach into the DOM with standard JavaScript and attach event listeners manually. There are at least three problems with that approach: 1.You have to write the listeners correctly. 2.The code must detach the listener when the directive is destroyed to avoid memory leaks. 3.Talking to DOM API directly isn't a best practice.

Input or output?

Input properties usually receive data values. Output properties expose event producers, such as EventEmitter objects.

The terms input and output reflect the perspective of the target directive.

Reference: https://angular.io