the Input directive exposes the property to the template

example use is displaying a list of something with each something displayed in its own control

    ...
    @Component({
        ...
    })
    export class ServerElementComponent implements OnInit {
        @Input() element: {type: string, name: string, content: string};
        ...
    }
        

    ...
    @Component({
        ...
    })
    export class ServerElementComponent implements OnInit {
        @Input(< public alias >) element: {type: string, name: string, content: string};
        ...
    }
        

import the Output directive

decorate the events with the Output directive to expose the events

note one Output property uses public aliasing

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

    @Component({
        selector: 'app-cockpit',
        ...
        })
    export class CockpitComponent implements OnInit {
        @Output('xserverCreated') serverCreated = new EventEmitter<{ serverName:=serverName string,=string, serverContent:=serverContent string=string }=}>();
        @Output() blueprintCreated = new EventEmitter<{ serverName:=serverName string,=string, serverContent:=serverContent string=string }=}>();
        ...
        onAddServer() {
            this.serverCreated.emit({ serverName: this.newServerName, serverContent: this.newServerContent });
        }
        onAddBlueprint() {
            this.blueprintCreated.emit({ serverName: this.newServerName, serverContent: this.newServerContent });    
        }
    }      
        

	<app-cockpit 
		(xserverCreated)="onServerAdded($event)"
		(blueprintCreated)="onBlueprintAdded($event)">
	</app-cockpit>
        

    ...
    export class AppComponent {
        ...
        onServerAdded(serverData: {serverName: string, serverContent: string}) { ... }

        onBlueprintAdded(blueprintData: {serverName: string, serverContent: string})   ... }
    }   
        

usable only in template, not in TypeScript

octothorpe denotes a local reference

    <div class="col-xs-12">
        ...
        <input type="text" class="form-control" #nameInput>
        ...
        <input type="text" class="form-control" [(ngModel)]="newServerContent">
        <br>
        <button
            class="btn btn-primary"
            (click)="onAddServer(nameInput)">Add Server</button>
        <button
            class="btn btn-primary"
            (click)="onAddBlueprint(nameInput)">Add Server Blueprint</button>
    </div>  
        

handler methods are changed because they take HTMLInputElement args

    ...
    export class CockpitComponent {

        @Output('xserverCreated') serverCreated = new EventEmitter<{ serverName:=serverName string,=string, serverContent:=serverContent string=string }=}>();
        @Output() blueprintCreated = new EventEmitter<{ serverName:=serverName string,=string, serverContent:=serverContent string=string }=}>();

        newServerContent = '';

        onAddServer(nameInput: HTMLInputElement) {
            //    this.serverCreated.emit({ serverName: this.newServerName, serverContent: this.newServerContent });
            this.serverCreated.emit({ serverName: nameInput.value, serverContent: this.newServerContent });
        }

        onAddBlueprint(nameInput: HTMLInputElement) {
            //    this.blueprintCreated.emit({ serverName: this.newServerName, serverContent: this.newServerContent });    
            this.blueprintCreated.emit({ serverName: nameInput.value, serverContent: this.newServerContent });    
        }
    }
        

    <div class="col-xs-12">
        <p>Add new Servers or blueprints!</p>
        <label>Server Name</label>
        <input type="text" class="form-control" #nameInput>
		
        <label>Server Content</label>
        <input type="text" class="form-control" #contentInput >
		
        <br>
        <button 
            class="btn btn-primary" 
            (click)="onAddServer(nameInput)">Add Server</button>
        <button 
            class="btn btn-primary" 
            (click)="onAddBlueprint(nameInput)">Add Server Blueprint</button>
    </div>
        

the element property is assigned the reference

    import { Component, OnInit, EventEmitter, Output, ViewChild, ElementRef } from '@angular/core';
    ...
    export class CockpitComponent implements OnInit {
        ...
        @ViewChild('contentInput') contentInput: ElementRef;
        ...

        onAddServer(nameInput: HTMLInputElement) {
            this.serverCreated.emit({ serverName: nameInput.value, serverContent: this.contentInput.nativeElement.value });
        }

        onAddBlueprint(nameInput: HTMLInputElement) { 
            this.blueprintCreated.emit({ serverName: nameInput.value, serverContent: this.contentInput.nativeElement.value });
        }
    }    
        

    <some-component>    
        This text will never be rendered...    
    </some-component>        
        

    <div>
        <ng-Content></ng-Content>
        This is the SomeComponent
    </div>
        

the output will be

    This text will never be rendered...
    This is the SomeComponent
        

lifecycle hooks

• ngOnChanges - called after a bound input property changes
• ngOnInit - called once the component is initialized
• ngDoCheck -called during every change detection fun
• ngAfterContentInit - called after content (ng-count) has been projected into view
• ngAfterContentChecked - called everytime the projected content has been checked
• ngAfterViewInit - called after the component's view and child component views have been initialized
• ngAfterViewChecked - called everytime the component's view and child component views have been checked
• ngOnDestroy - called once the component is about to be destroyed