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

At runtime, the array inexplicably becomes null

How can I set up a KeyboardEvent listener in JavaScript?

Arrange information in table format using Angular Material

Tips for effectively handling projects that call for varying versions of TypeScript within Visual Studio

Troubleshooting the NullInjectorError in Angular - Service Provider Missing?

Typescript: Retrieve an interface containing properties that are found in interface A, but not in interface B

Syncing a line's position with the cursor in Angular using the ChartJs Annotation Plugin

Angular 7 navigation successfully updates the URL, but fails to load the corresponding component

Implementing Angular's Advanced Filtering Across Multiple Data Fields

Troubleshooting: Dealing with Cross-Origin Resource Sharing (CORS)

How to refresh a specific component or page in Angular without causing the entire page to reload

Guide on incorporating a YouTube iframe in React with Typescript

Updates made to Angular components do not get transpiled to JavaScript

Restrict the frequency of requests per minute using Supertest

various positions for ngb properties

Encountering the error "Unable to access the 'user' property of an undefined object when working with Angular and Firebase

The correct way to add to a string array that has been passed as props to a functional component

Having trouble accessing undefined properties? Facing issues with the latest Angular version?

What could be causing the issue with Vite build and npm serve not functioning together?

Is there support for TypeScript in express-openid-connect?