Angular @Input decorator example

Hi there we have prepared a simple program for passing value to parent component to child component. 

what this Angular program does, step by step. Imagine we're building a simple webpage with two main parts: a "Parent" section where you can type something, and a "Child" section that displays what you typed. Let's check step by step.

// parent.component.ts

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

import { FormsModule } from "@angular/forms"; // Import FormsModule

@Component({

  selector: "app-parent",

  template: `

    <div>

      <h2>Parent Component</h2>

      <input

        type="text"

        [(ngModel)]="inputValue"

        (input)="onInputChange()"

        placeholder="Enter value here"

      />

      <p>Entered value: {{ inputValue }}</p>

      <app-child [parentInputValue]="inputValue"></app-child>

    </div>

  `,

  imports: [FormsModule], // Add FormsModule to imports

})

export class ParentComponent {

  inputValue = "";

  onInputChange() {

    // Optional: You could emit an event here if you wanted the parent

    // to do something *in addition* to passing the data down.

    // But in this case, we're just passing the data directly.

  }

}

// child.component.ts

import { Component, Input, OnChanges, SimpleChanges } from "@angular/core";

@Component({

  selector: "app-child",

  template: `

    <div>

      <h2>Child Component</h2>

      <p>Value from parent: {{ displayValue }}</p>

      <p *ngIf="!parentInputValue">No value from parent yet.</p>

    </div>

  `,

})

export class ChildComponent implements OnChanges {

  @Input() parentInputValue: string;

  displayValue: string = "";

  ngOnChanges(changes: SimpleChanges): void {

    if (changes.parentInputValue) {

      this.displayValue = changes.parentInputValue.currentValue;

    }

  }

}

// app.component.ts

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

@Component({

  selector: "app-root",

  template: `

    <div style="text-align: center;">

      <h1>Parent-Child Communication</h1>

      <app-parent></app-parent>

    </div>

  `,

})

export class AppComponent {

  title = "my-app";

}

What the Program Does

This program demonstrates how data is shared between two parts of an Angular application, called "components." Specifically, it shows how data moves from a "Parent" component to a "Child" component. The user types text into an input box in the Parent Component, and that text is then displayed in the Child Component.

Key Concepts

• Components: Angular applications are built using components. You can think of a component as a reusable building block for your webpage. Each component has its own HTML structure (what it looks like) and its own logic (how it behaves). In our case, we have a ParentComponent and a ChildComponent.

• Parent and Child: Components can be organized in a tree-like structure. One component can contain (or "use") another component. The component that contains the other is called the "parent," and the contained component is called the "child." Here, ParentComponent contains ChildComponent.

• ngModel: This is a special directive in Angular that helps us work with form inputs (like text boxes). It does two things:
• It displays the current value of a variable in the input box.
• It updates that variable whenever the user types something in the input box.

• Data Flow: In this program, data flows in one direction: from the ParentComponent to the ChildComponent. The ParentComponent has a variable that holds the text the user types. It then sends that variable's value to the ChildComponent, which displays it.

• @Input(): To allow a Child Component to receive data from its Parent, we use @Input(). In the ChildComponent, @Input() parentInputValue: string; declares that the ChildComponent expects to receive a string of data named "parentInputValue".

How the Program Works (Step-by-Step)

• User Interaction (Parent):
• The user sees an input box in the ParentComponent.
• When the user types something, the ngModel directive updates the inputValue variable in the ParentComponent with whatever the user types.

• Passing Data (Parent to Child):

• In the ParentComponent's HTML, <app-child [parentInputValue]="inputValue"></app-child> is how the data is passed.

  [parentInputValue] tells Angular to bind the parentInputValue property of the ChildComponent.
• ="inputValue" specifies that the value of the inputValue variable from the ParentComponent should be passed to the parentInputValue property of the ChildComponent.
  
  
• Receiving Data (Child):
• The ChildComponent has a property called parentInputValue, decorated with @Input(). This means it's designed to receive a value from its parent.
• When the ParentComponent passes the data, Angular automatically updates the parentInputValue property in the ChildComponent.

• Displaying Data (Child):

• The ChildComponent then displays the value of parentInputValue in its HTML, so the user sees the text they typed in the ParentComponent.