Angular16 - All about @Input and @Output directive in Angular

Check the angular version. by running angular version command

Angular CLI: 16.2.0
Node: 18.17.0
Package Manager: npm 9.6.7
OS: win32 x64

Angular: 16.2.0
... animations, cli, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------       
@angular-devkit/architect       0.1602.0
@angular-devkit/build-angular   16.2.0
@angular-devkit/core            16.2.0
@angular-devkit/schematics      16.2.0
@schematics/angular             16.2.0
rxjs                            7.8.1
typescript                      5.1.6
zone.js                         0.13.1

PS C:\Users\Ajeet\Desktop\Projects\Projs_Angular\stackmarket\stock-market>

EXAMPLE @Input()

Create a new angular app by running the command and a class named as Person.

ng new stack-market
ng generate class person --skip-tests

The class is as follows.

  export class Person {
  constructor(public name: string, public age: number) {}
}

Create a child component called child

ng generate component child --flat --skip-tests --inline-template --inline-style

child.component.ts file

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

@Component({
  selector: 'app-child',
  template: `
    <h2>Child component: Input and Output directives</h2>
    <h1>{{ datafromApp.name }} is {{ datafromApp.age }} years old.</h1>
  `,
})
export class ChildComponent {
  @Input() datafromApp: any;
}

app.module.ts file

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { ChildComponent } from './child.component';

@NgModule({
  declarations: [AppComponent, ChildComponent],
  imports: [BrowserModule],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

app.component.html file

<app-child [datafromApp]="appData" ></app-child>

app.component.ts file

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
})
export class AppComponent {
  appData = { name: 'Ajeet', age: 20 };
}

EXAMPLE @Input() and @Output 

child.component.ts file

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

@Component({
  selector: 'app-child',
  template: `
    <h2>Child component: Input and Output directives</h2>
    <h1>{{ datafromApp.name }} is {{ datafromApp.age }} years old.</h1>

    <button style="font-size: larger;" (click)="OnButtonClick($event)">
      Click me...
    </button>
  `,
})

export class ChildComponent {
  @Input() datafromApp: any;
  person: Person;
  @Output() private emitter: EventEmitter<Person>;
  constructor() {
    this.emitter = new EventEmitter<Person>();
    this.person = new Person('Adam', 23);
  }
  //event handler in parent will receive emitted data
  OnButtonClick(event: any) {
    this.emitter.emit(this.person);
  }
}

app.component.ts file

import { Component } from '@angular/core';
import { Person } from './person';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
})
export class AppComponent {
  appData = { name: 'Ajeet', age: 20 };

  GetClick(person: Person) {
    this.appData.name = person.name;
    this.appData.age = person.age + 10;
  }
}

app.component.html file

<app-child [datafromApp]="appData" (emitter)="GetClick($event)"></app-child>

Run the application using ng serve -o command. We get the following.