The journey of communication: uncovering the essence of @input between parent and

Question

The journey of communication: uncovering the essence of @input between parent and

I'm diving into Angular and currently working on the @Input phase.

Within my main app, there's a child component. Inside app.component.ts, I've declared a test variable that I wish to pass from app.component.ts to child.component.ts.

// app.component.ts:
export class AppComponent {
    test = 10;
}  

// child.component.ts:
export class ChildComponent {
    @Input() fromParent: number;
    childVar = fromParent + 5;

    show() {
        console.log(this.childVar);
    } //this should to show 15 in console...
}

So, how exactly can I achieve this? Any suggestions?

angular typescript input angular7 angular8

Answer 1

Answer №1

Here is a simple example demonstrating how a parent component can bind properties for a child component to access.

Parent component template: parent.component.html

<child-component 
    [fromParent]="fromParent">
</child-component>

Parent component class: parent.component.ts

export class ParentComponent {
  fromParent: string = 'String from parent';
}

Child component class: child.component.ts

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

//...

export class ChildComponent {
  @Input() fromParent: string;
}

Child component template: child.component.html

String from parent: {{ fromParent }}

Answer 2

Here is a simple example demonstrating how a parent component can bind properties for a child component to access.

Parent component template: parent.component.html

<child-component 
    [fromParent]="fromParent">
</child-component>

Parent component class: parent.component.ts

export class ParentComponent {
  fromParent: string = 'String from parent';
}

Child component class: child.component.ts

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

//...

export class ChildComponent {
  @Input() fromParent: string;
}

Child component template: child.component.html

String from parent: {{ fromParent }}

Answer 3

Answer №2

Within the app.component.html file, you invoke the child component's selector (assuming it is named child-app):

<child-app></child-app>

Next, include the property declared as @input() and bind it to the value within the AppComponent (which in this case is test):

<child-app [fromParent]="test" ></child-app>

Lastly, it is recommended to restructure your code snippet as follows:

****child.component.ts:****

export class ChildComponent { // This is not AppComponent
    @Input() fromParent: number;
    childVar: number;


    show() {
        this.childVar = this.fromParent + 5; // This operation should be placed inside a method 
        console.log(this.childVar);
    } // The expected output in the console should be 15...
}

Answer 4

Within the app.component.html file, you invoke the child component's selector (assuming it is named child-app):

<child-app></child-app>

Next, include the property declared as @input() and bind it to the value within the AppComponent (which in this case is test):

<child-app [fromParent]="test" ></child-app>

Lastly, it is recommended to restructure your code snippet as follows:

****child.component.ts:****

export class ChildComponent { // This is not AppComponent
    @Input() fromParent: number;
    childVar: number;


    show() {
        this.childVar = this.fromParent + 5; // This operation should be placed inside a method 
        console.log(this.childVar);
    } // The expected output in the console should be 15...
}

Answer 5

Answer №3

In Angular, property binding and event binding are fundamental concepts.

Simply put, components define custom elements while directives define custom attributes. For example, h1 is a predefined HTML tag, but app-root is not. Therefore, in Angular, components create custom elements and directives create custom attributes.

An attribute or tag becomes a child of another when it is used inside the component html of the parent tag.

A child component can send data to its parent using event binding.

Conversely, a parent component can pass data to its child through property binding.

To indicate that a variable inside a child component can be accessed by the child template, we use the @Input() decorator on the property.

Answer 6

In Angular, property binding and event binding are fundamental concepts.

Simply put, components define custom elements while directives define custom attributes. For example, h1 is a predefined HTML tag, but app-root is not. Therefore, in Angular, components create custom elements and directives create custom attributes.

An attribute or tag becomes a child of another when it is used inside the component html of the parent tag.

A child component can send data to its parent using event binding.

Conversely, a parent component can pass data to its child through property binding.

To indicate that a variable inside a child component can be accessed by the child template, we use the @Input() decorator on the property.

Answer 7

Answer №4

To assign the property to the child selector within your app.component.html, do the following -

<!-- replace element selector with yours -->
<app-child [fromParent]="test"></app-child>

Additionally, you can choose to implement the OnChanges interface in your child.component.ts. This will look like this -

export class ChildComponent implements OnChanges {
    @Input() fromParent: number;
    childVar = fromParent + 5;

    ngOnChanges() { // automatically called when updated by parent.
        console.log(this.childVar);
    }

    show() { // called when needed
        console.log(this.childVar);
    }
}

Answer 8

To assign the property to the child selector within your app.component.html, do the following -

<!-- replace element selector with yours -->
<app-child [fromParent]="test"></app-child>

Additionally, you can choose to implement the OnChanges interface in your child.component.ts. This will look like this -

export class ChildComponent implements OnChanges {
    @Input() fromParent: number;
    childVar = fromParent + 5;

    ngOnChanges() { // automatically called when updated by parent.
        console.log(this.childVar);
    }

    show() { // called when needed
        console.log(this.childVar);
    }
}

Answer 9

Answer №5

Each time you add a child component, you are setting up its variable. For example, within the parent's template, you would include the following:

<app-child [fromParent]="test"></app-child>

Answer 10

Each time you add a child component, you are setting up its variable. For example, within the parent's template, you would include the following:

<app-child [fromParent]="test"></app-child>

Answer 11

Answer №6

*Imagine a scenario where the apples component remains constant across instances, but we require a unique description for each one. Input comes to our rescue.*  

  // app.component.html
<app-apple [description]="appleDescription"></app-apple>

Any property within app.component.html can serve as appleDescription.

// apple.component.ts
import { Component, OnInit, Input } from '@angular/core';
...
export class AppleComponent implements OnInit {
   @Input() description: string;
...

The parent component, in this case app.component.html, passes on the description. The [description] attribute accepts any value, making it accessible throughout apple.component.html or apple.component.ts like any other regular class property with standard change detection mechanism applied.

// apple.component.html
{{ description || 'No input provided yet...' }}

Answer 12

*Imagine a scenario where the apples component remains constant across instances, but we require a unique description for each one. Input comes to our rescue.*  

  // app.component.html
<app-apple [description]="appleDescription"></app-apple>

Any property within app.component.html can serve as appleDescription.

// apple.component.ts
import { Component, OnInit, Input } from '@angular/core';
...
export class AppleComponent implements OnInit {
   @Input() description: string;
...

The parent component, in this case app.component.html, passes on the description. The [description] attribute accepts any value, making it accessible throughout apple.component.html or apple.component.ts like any other regular class property with standard change detection mechanism applied.

// apple.component.html
{{ description || 'No input provided yet...' }}

The journey of communication: uncovering the essence of @input between parent and

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Similar questions

Ways to access the types of function parameters

Implicated Generic in TypeScript

Extracting values from an *ngFor loop in Angular 8 - Here's how to do

Tips for simulating mouse events in Jasmine tests for Angular 2 or 4

Sharing functions between Angular components

Question from Student: Can a single function be created to manage all text fields, regardless of the number of fields present?

Error: The variable "redirectTo" has not been declared. This error can be found in the

Checking to see if a string meets the criteria of being a valid ARGB value

Building a personalized React component poses challenges when working with MUI REACT interfaces

Typescript: Ways to fix the error 'rxjs/Rx does not have any exported member 'SubscriptionLike'

Verify the completeness of data types within an array in typescript

Using path aliases in a Typescript project with Typescript + Jest is not a viable option

Is Webpack CLI causing issues when trying to run it on a .ts file without giving any error

Building an AngularJS Service with TypeScript that is Non-Singleton: A Step-by-Step Guide

Using ngrx store select subscribe exclusively for designated actions

Trigger the Material UI DatePicker to open upon clicking the input field

Using ReactiveForms to create templates that dynamically generate recursive structures

Prevent automatic submission of forms when selecting attributes in HTML forms using AngularJS

Why isn't the table in the select query updating after an insert query is executed in Express?

"Upon invoking the services provider in Ionic 2, an unexpected undefined value was