Using @Input between parent and child component via routing module in Angular

Question

This is parent component :

parent.component.ts ==>

import { Component, OnInit, Input } from '@angular/core';
@Component({
  selector: 'app-parent',
  templateUrl: '<div>
                 <h1>I am the parent</h1>
                 <p>{{textForChild}}</p>
                </div>'
})
export class ParentComponent implements OnInit {

  @Input() textForChild!: string;

  constructor() {}

  ngOnInit(): void { }

}

And this is the app-routing.module.ts ==>

{
    path: '',
    component: ParentComponent,
    children: [
      {
        path: 'children-url',
        loadChildren: () =>
          import('@modules/child.module').then((m) => m.ChildModule),
      }
    ],
  },

\\\\\\\\\\\\\

And This is Child Component :

child.module.ts ==>

const routes: Routes = [
  {
    path: ':id',
    component: ChildComponent,
  },
];

@NgModule({
  declarations: [ChildComponent],
  imports: [RouterModule.forChild(routes)],
})

The question is,
if I code in child.component.html, how to fill the textForChild above?

AbdulKareem · Accepted Answer · 2022-04-10 08:53:17Z

1

One way is injecting ParentComponent inside ChildComponent constructor.

@Component({...})
class ChildComponent {

   constructor(parent:ParentComponent) {
   // access properties of parent here
   parent.textForChild
   }
}

Note: This approach has a very big disadvantage i.e. Now you child component can only used under ParentComponent

answered Apr 10, 2022 at 8:53

AbdulKareem

1,20710 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Garry14 Over a year ago

Thank you.. I see it works.. But do you have any suggest to another way?

Collectives™ on Stack Overflow

Using @Input between parent and child component via routing module in Angular

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related