pass the value from parent component to child with input decorator with router

Question

I'm trying to pass the value from the input tag of the parent component to the child component. I'm using

parent component ts

import { Component, ViewChild, ElementRef } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
  constructor(private route:ActivatedRoute,private router:Router){}
  @ViewChild('parentData', {static:false}) parentData:ElementRef;
  parentValue='';
  submitted=false;
  InputEvent='thanks'
  navToChild(){
    this.router.navigate(['child']);
    this.parentValue=this.parentData.nativeElement.value
    this.submitted=true;
  }
}

this gives the value

parent html

<div class="container mt-5">
  <div class="card">
    <div class="card-header">
      <h2>Main Component</h2>
    </div>
    <div class="card-body">
      <input type="text"  #parentData class="form-control" placeholder="enter text"/>
      <button class="btn btn-primary" (click)="navToChild()">submit</button>
    </div>
  </div>
</div>
<app-child *ngIf="submitted" [inputName]="parentValue">
</app-child>

<router-outlet></router-outlet>

then passing it to the child component with [parentData]='parent' in child selector, and in child selector, I use an input decorator and the variable is

child component

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

@Component({
  selector: 'app-child',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.css']
})
export class ChildComponent implements OnInit {
  @Input() inputName: string;

  constructor(private route: ActivatedRoute) { }

  ngOnInit() {
    console.log(this.inputName);

  }
}

child HTML

<p>child works! {{inputName}}</p>

I want to pass the data to the child component with routing (i mean when I click on the submit button in the parent class that should pass the value to the child class and it should change the link for example

before submit: http://localhost:4200/ after submit: http://localhost:4200/child-component

I'm able to pass the value with state and queryParams but I want to pass with the input decorator by navigating to the child component.

please ask me if you don't understand the question, I tried my best to explain my query. when I submit the value and try to console log it, it says undefined.

thank you for the answer.

Answer 1

You need to bind the inputName property in the child to the parentValue property of the parent like below:

<app-child *ngIf="submitted" [inputName]="parentValue"> </app-child>

Also, you need to remove <router-outlet></router-outlet> from parent as well because you already called child component in parent component.

Also, your navToChild function should be like below:

navToChild(){
    this.parentValue=this.parentData.nativeElement.value
    this.submitted=true;
    this.router.navigate(['child']);
}

You can see working example here.