Passing null values between components using @Input()

Question

Passing null values between components using @Input()

One component is sending values to another:

paquete-detalle.component.ts

nombre: string;
precio: number;

ngOnInit() {
const id = this.activatedRoute.snapshot.paramMap.get('id');
  this.fs.getPaqueteObject(id).valueChanges().subscribe(paquete => {
    this.nombre = paquete.nombre;
    this.precio = paquete.precio;
  });
}

paquete-detalle.component.html

{{nombre}} {{precio}} //Values are printed correctly here.
<app-reserva [precio]="precio" [nombre]="nombre"></app-reserva>

Next, in reserva.component.ts:

@Input() precio: number;
@Input() nombre: string;

constructor( private fs: FirebaseService, private fb: FormBuilder, ) {
    this.forma = fb.group ({
      nombre: [ this.nombre ],
      precio: [ this.precio ],
    });
   }

ngOnInit() {
    console.log(this.precio, this.nombre);
  }

While trying to save the values in a reactive form, I am getting null (undefined in the console) for this.price and this.name.

However, in reserva.component.html, the values are displayed as expected:

 <div class="text-center">
    <h4>{{nombre}}</h4>
    <p>From: USD {{precio}} / person</p>
 </div>

What is the correct method to pass values between components?

angular typescript

Answer 1

Answer №1

It's important to ensure that your component initialization logic is placed within the ngOnInit() method. In cases where your parent component contains asynchronous operations in its own ngOnInit(), you should delay the creation of your app-reserva component until all necessary data is available.

paquete-detail.component.ts

name: string = null;
price: number = null;

ngOnInit() {
const id = this.activatedRoute.snapshot.paramMap.get('id');
  this.fs.extractPackageInfo(id).valueChanges().subscribe(package => {
    this.name = package.name;
    this.price = package.price;
  });
}

paquete-detail.component.html

{{name}} {{price}} //Ensure these values are printed correctly.
<app-reserva *ngIf="price && name" [price]="price" [name]="name"></app-reserva>

reservation.component.ts

@Input() price: number;
@Input() name: string;

constructor( private fs: FirebaseService, private fb: FormBuilder, ) {
}

ngOnInit() {
  this.form = fb.group ({
    name: [ this.name ],
    price: [ this.price ],
  });
  console.log(this.price, this.name);
}

This answer offers a detailed explanation on the distinction between constructor and ngOnInit.

If your child component initializes an empty form, it may be due to the fact that the child component was created before the parent component completed the callback in

this.fs.extractPackageInfo(id).valueChanges().subscribe()

. By following this approach, your reservation.component.ts will not render until the parent component has fetched all the necessary data for the child.

In addition to this method, you can explore using OnChanges to have your child component respond to changes in @Input() properties or utilize Resolvers to fetch data for the route before loading the component.

Answer 2

It's important to ensure that your component initialization logic is placed within the ngOnInit() method. In cases where your parent component contains asynchronous operations in its own ngOnInit(), you should delay the creation of your app-reserva component until all necessary data is available.

paquete-detail.component.ts

name: string = null;
price: number = null;

ngOnInit() {
const id = this.activatedRoute.snapshot.paramMap.get('id');
  this.fs.extractPackageInfo(id).valueChanges().subscribe(package => {
    this.name = package.name;
    this.price = package.price;
  });
}

paquete-detail.component.html

{{name}} {{price}} //Ensure these values are printed correctly.
<app-reserva *ngIf="price && name" [price]="price" [name]="name"></app-reserva>

reservation.component.ts

@Input() price: number;
@Input() name: string;

constructor( private fs: FirebaseService, private fb: FormBuilder, ) {
}

ngOnInit() {
  this.form = fb.group ({
    name: [ this.name ],
    price: [ this.price ],
  });
  console.log(this.price, this.name);
}

This answer offers a detailed explanation on the distinction between constructor and ngOnInit.

If your child component initializes an empty form, it may be due to the fact that the child component was created before the parent component completed the callback in

this.fs.extractPackageInfo(id).valueChanges().subscribe()

. By following this approach, your reservation.component.ts will not render until the parent component has fetched all the necessary data for the child.

In addition to this method, you can explore using OnChanges to have your child component respond to changes in @Input() properties or utilize Resolvers to fetch data for the route before loading the component.

Answer 3

Answer №2

The Input() values cannot be accessed within the constructor until they have been passed to the child component. Try constructing your form inside the ngOnInit() lifecycle hook and everything should work smoothly!

Answer 4

The Input() values cannot be accessed within the constructor until they have been passed to the child component. Try constructing your form inside the ngOnInit() lifecycle hook and everything should work smoothly!

Answer 5

Answer №3

Code Playground - https://stackblitz.com/edit/angular-9d3bu4-so-56527061

Ensure that the parent component has specified the values for price and name when using

<app-reservation [price]="price" [name]="name"></app-reservation>

app.component.ts

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular';

  price = 24.50;
  name = "boots"
}

app.component.html

<app-reserva [precio]="precio" [nombre]="nombre"></app-reserva>

Answer 6

Code Playground - https://stackblitz.com/edit/angular-9d3bu4-so-56527061

Ensure that the parent component has specified the values for price and name when using

<app-reservation [price]="price" [name]="name"></app-reservation>

app.component.ts

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular';

  price = 24.50;
  name = "boots"
}

app.component.html

<app-reserva [precio]="precio" [nombre]="nombre"></app-reserva>

Answer 7

Answer №4

Make sure to eliminate the brackets from the component and opt for using the double curly brace interpolation syntax {{ }}:

<app-reserva precio="{{precio}}" nombre="{{nombre}}"></app-reserva>

Visit this link for more information.

Answer 8

Make sure to eliminate the brackets from the component and opt for using the double curly brace interpolation syntax {{ }}:

<app-reserva precio="{{precio}}" nombre="{{nombre}}"></app-reserva>

Visit this link for more information.

Passing null values between components using @Input()

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Angular HTTP post call is failing to redirect to the correct URL

The classification of a property is determined by the types of the other properties present

Simplify the cognitive load of the function

Clicking on the mat-icon-button with the matSuffix in the password field will always trigger a

Updating Radio Button Value in React Using TypeScript Event Handler

Leverage Angular, NodeJS, and Sequelize to extract data from HTML tables

Expanding generic properties in React Native

Contrasting the provision of ComponentStore directly versus utilizing provideComponentStore in Angular standalone components

Double loading of functions on tab pages

Sending detailed exception information from asp.net core to the client (such as Angular)

How can I hide the title bar on screens in expo?

The TypeScript declarations for Forge Viewer do not include typings related to Profiles

Experiencing a type error within Redux in a React Native project utilizing TypeScript

React router loader is not functioning correctly when trying to fetch data

Type of Request: POST Error Code: 400 Unacceptable Request Referrer Directive: strict-origin-when-cross-origin

Is there a way to accurately capture the timestamp of when a user clicks the submit button in Angular 2 framework?

Pass the API_BASE_URL parameter from the Angular 7 configuration

What is the best way to create a sortable column that is based on a nested object within data.record?

Type inference in Typescript is especially powerful when used in conjunction with decorators

As soon as you start typing in the TextInput field, the keyboard abruptly disappears