What is the best way to transfer attributes from a nested component to its parent in Angular 10?

Question

What is the best way to transfer attributes from a nested component to its parent in Angular 10?

Within my parent component, I have a {{title}} and a {{subtitle}} that should dynamically change based on the title and subtitle of my children components. These children are rendered inside a router-outlet, with each child providing its own unique title and subtitle. I have tried multiple approaches but have yet to find a successful solution. Thank you in advance for any assistance. Parent Component HTML:

{{view_titular.title}} {{view_titular.subtitle}}

<div><router-outlet></router-outlet></div>//This is where my different children will be loaded!

Children Component TypeScript:

export class ChildrenComponent implements OnInit {
data: titular = { title: 'children\'s title', subtitle: 'children subtitle' }

I hope this explanation helps clarify things.

angular typescript asynchronous

Answer 1

Answer №1

If you're not using a child selector, it's advisable to establish a common service between the parent and child components.

common.service.ts

public data = new Subject<any>();

child.component.ts

this.commonService.data.next({
    title: 'Title',
    subTitle: 'Sub Title'
});

parent.component.ts

title = '';
subTitle = '';
constructor(private commonService: CommonService) {
    commonService.data.subscribe(data => {
       this.title = data.title;
       this.subTitle = data.subTitle;
    });
}

To resolve the ExpressionChangedAfterItHasBeenCheckedError error, you can choose from either of the following 2 solutions.

1

setTimeout(() => {
    commonService.data.subscribe(data => {
       this.title = data.title;
       this.subTitle = data.subTitle;
    });
});

2

   commonService.data.pipe(
      delay(0),
      tap((data) => {
         this.title = data.title;
         this.subTitle = data.subTitle;
      })
  ).subscribe();

Answer 2

If you're not using a child selector, it's advisable to establish a common service between the parent and child components.

common.service.ts

public data = new Subject<any>();

child.component.ts

this.commonService.data.next({
    title: 'Title',
    subTitle: 'Sub Title'
});

parent.component.ts

title = '';
subTitle = '';
constructor(private commonService: CommonService) {
    commonService.data.subscribe(data => {
       this.title = data.title;
       this.subTitle = data.subTitle;
    });
}

To resolve the ExpressionChangedAfterItHasBeenCheckedError error, you can choose from either of the following 2 solutions.

1

setTimeout(() => {
    commonService.data.subscribe(data => {
       this.title = data.title;
       this.subTitle = data.subTitle;
    });
});

2

   commonService.data.pipe(
      delay(0),
      tap((data) => {
         this.title = data.title;
         this.subTitle = data.subTitle;
      })
  ).subscribe();

Answer 3

Answer №2

Take a look at this link for a detailed explanation on sharing data between Angular components: Click here

Answer 4

Take a look at this link for a detailed explanation on sharing data between Angular components: Click here

Answer 5

Answer №3

Utilize EventEmitter for data sharing

In the child component's .ts file.

@Output() childEvent = new EventEmitter<any>();
  constructor() { }

  sendData() {
    this.childEvent.emit({title,subTitle});
  }

In the parent .html file

<app-child (childEvent)="receiveData($event)"></app-child>

In the parent .ts file

receiveData($event) {
    this.title= $event.title;
this.subTitle= $event.subTitle;
  }

Answer 6

Utilize EventEmitter for data sharing

In the child component's .ts file.

@Output() childEvent = new EventEmitter<any>();
  constructor() { }

  sendData() {
    this.childEvent.emit({title,subTitle});
  }

In the parent .html file

<app-child (childEvent)="receiveData($event)"></app-child>

In the parent .ts file

receiveData($event) {
    this.title= $event.title;
this.subTitle= $event.subTitle;
  }

What is the best way to transfer attributes from a nested component to its parent in Angular 10?

Answer №1

Answer №2

Answer №3

Similar questions

Adding Components Dynamically to Angular Parent Dashboard: A Step-by-Step Guide

Automatically export as a namespace in a declaration file

Wijmo encountered an error: Expected date but received different data

Organizing data with JavaScript: Transforming a flat array into nested JSON structures

Sending a POST request in Angular 7 with custom headers and request body

What could be causing Node Pdfkit to sometimes generate a corrupted file within my code?

Creating an Express server using Webpack, TypeScript, and ESM

Angular - Cannot assign operator function of type 'OperatorFunction<IUser, void>' to parameter of type 'OperatorFunction<Object, void>'

What are some methods for simulating user interaction on input and button elements?

Potential absence of object.ts(2531)

Create a constant object interface definition

What is the best way to incorporate Redux into your project?

Adding strings in Typescript

The process of sorting through an array of objects based on their specific types in TypeScript

What factors contribute to 'tslib' having more downloads than 'typecrypt'?

What is the best way to securely store JWT refresh tokens on both the front-end and back-end?

What role do the esm directories serve within Angular 2 modules?

An error in npm occurred: "The name "@types/handlebars" is invalid."

Two trigger functions in Angular animations are not functioning as expected

Loading and unloading an Angular 6 component