I am trying to give inputs in a form in parent component and want to display those inputs in child c-CodePudding

I am trying to give inputs in a form in parent component. and i want those inputs to be displayed in child component using @input. But I am unable to do that. I appreciate any answers. Thank you.

**loginform.html (parent) : **

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <div >
        <h2 id="registration">Login Form</h2>
        <form (ngSubmit)="navToDisplayForm()" #f="ngForm">

            <div>
                <label for="firstname">First Name</label>
                <input type="text" id="firstname" placeholder="Your name.." name="firstname"
                    [(ngModel)]='userModel.firstnamedetail' required>
                


                <label for="middlename">Midddle Name</label>
                <br>
                <input type="text" id="middlename" placeholder="Your middlename.." name="middlename"
                    [(ngModel)]='userModel.middlenamedetail' required>
                
                <br>
                <label for="lastname">Last Name</label>
                <input type="text" id="lastname" placeholder="Your lastname.." name="lastname"
                    [(ngModel)]='userModel.lastnamedetail' required>
                


            </div>


            <br><br>

            <button  type="submit" routerLink="/userdata" (click)="navToDisplayForm()"
                value="Submit" id="btn">Submit</button>
            <p>Not Regestered? <span>Create Account</span></p>
        </form>


    </div>
    

</body>
<app-userdata [childData]="sendToChild"></app-userdata>


</html>

**loginform.ts (parent) : **

import { Component, OnInit } from '@angular/core';
import { NgForm } from "@angular/forms";
import { Router } from '@angular/router';

@Component({
  selector: 'app-loginform',
  templateUrl: './loginform.component.html',
  styleUrls: ['./loginform.component.css']
})
export class LoginformComponent implements OnInit {

  userModel = {
    firstnamedetail: '',
    middlenamedetail: '',
    lastnamedetail: ''
  }
  


 

  sendToChild: any;



  

  constructor(
    private route: Router
  ) { }

  ngOnInit(): void {
  }

  onSubmit() {
    

  }



  navToDisplayForm() {
    this.sendToChild = this.userModel;
    
   //this.route.navigate(['/userdata'])
  }
}

**userdata.ts (child) **

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

@Component({
  selector: 'app-userdata',
  templateUrl: './userdata.component.html',
  styleUrls: ['./userdata.component.css']
})
export class UserdataComponent implements OnInit {
  


 

  constructor(
    private route: ActivatedRoute,
    private router: Router
  ) { }

  @Input() childData: any = {
    firstnameToDisplay: '',
    middlenameToDisplay: '',
    lastnameToDisplay: ''
  };

  


  ngOnInit(): void {


  }

  

  
}

userdata.html (child)

<div>
    <form >
        
        <p>First Name: {{childData.firstnameToDisplay}}</p>
        <p> Middle Name: {{childData.middlenameToDisplay}}</p>
        <p>Last Name :{{childData.lastnameToDisplay}}</p>
        
        </div> -->
        
    </form>
</div>

I have tried everything, but its not working.. sorry for too many comments in code.

i have tried everything i knew. but not working

CodePudding user response：

Here issue is you are actually binding wrong data you are sending data as firstnamedetail and trying to use that as firstnameToDisplay binding not work like this. You can update your binding in userData.ts with @Input() childData: any; and your userData.html with this snippet.

<div>
  <form >
    <p>First Name: {{ childData?.firstnamedetail ?? '' }}</p>
    <p>Middle Name: {{ childData?.middlenamedetail ?? '' }}</p>
    <p>Last Name :{{ childData?.lastnamedetail ?? '' }}</p>
  </form>
</div>

Here ?. is called optional chaining which will return undefined in case childData.property is undefined and in case of undefined ?? (Nullish coalescing operator) will show empty string.

CodePudding user response：

I solved it myself/... I took ngIf condition for the form..and now its displaying