0

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.here check image

thank you for the answer.

Cassidy
  • 3,328
  • 5
  • 39
  • 76
Shaik Subhan
  • 284
  • 1
  • 10
  • If your child component is displayed using a "router outlet", it is not possible (when using Angular Template Binding) to pass values directly from the parent component to the child component. In this case, you can use a service that stores the data from the parent component and loads it into the child component when needed. See [this](https://stackoverflow.com/questions/41451375/passing-data-into-router-outlet-child-components) post. – riorudo Jan 04 '23 at 07:52
  • I'm not passing the value in the router-outlet selector, I'm passing in the child component selector. like : @riorudo – Shaik Subhan Jan 04 '23 at 09:11
  • I'm not sure I understand the question or the routing thing confuses me. So if you want to send the form data to the child component after submitting, then just store the form data in a variable, like `onSubmit(){this.parentValue = this.parent.nativeElement.value}` which you then pass to the child component, like `[parentData]='parentValue'`. – riorudo Jan 04 '23 at 09:30
  • html : ```

    Main Component

    ```     – Shaik Subhan Jan 04 '23 at 11:40
  • @HardikSolanki I tried even then I get undefined in the child component. – Shaik Subhan Jan 05 '23 at 05:10
  • You need to bind the `inputName` property in the child to the `parentValue` property of the parent like this ` `. Also, assign input value to `parentValue` variable before router navigate as well as do same for `submitted` variable as well. – Hardik Solanki Jan 05 '23 at 05:11
  • @LazyKing Can you setup your code as example on somewhere? – Hardik Solanki Jan 05 '23 at 05:12
  • @HardikSolanki https://codesandbox.io/s/serene-sea-rmczpr?file=/src/app/app.component.ts – Shaik Subhan Jan 05 '23 at 05:33
  • @LazyKing I have also update your code, please check it. I have made changes as per my answer and all seems working fine. – Hardik Solanki Jan 05 '23 at 05:37

1 Answers1

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.

Hardik Solanki
  • 3,153
  • 1
  • 17
  • 28