I've seen this question asked before with a lot of answers available through Google search. However, I'm still unable to figure out what I'm doing wrong in passing a value from one component to another. Here's what I have tried:
<app-dpedit [parentValue]= "testValue"> </app-dpedit>
The testValue is a string variable initialized with a dummy string in the parent.ts file.
In the child component, here's the setup:
@Component({
selector: 'app-dpedit',
templateUrl: './dpedit.component.html',
styleUrls: ['./dpedit.component.css'],
})
export class DPEditComponent implements OnInit {
@Input() parentValue: string;When I log the parentValue, it returns as "undefined". I've also attempted using "inputs: ['parentValue']" instead of "@Input", but encountered the same issue. Can someone please help me identify the problem?
EDIT: The entire child ts file has been included below:
import { Component, OnInit, Input } from '@angular/core';
import { Router } from '@angular/router';
import { FormBuilder, FormGroup, Validators, FormArray } from '@angular/forms';
import { ActivatedRoute } from '@angular/router';
import { GetDataProcessingService } from "../../../service/getServices/get-data-processing.service";
import { ProfileComponent } from "../profile/profile.component";
@Component({
selector: 'app-dpedit',
templateUrl: './dpedit.component.html',
styleUrls: ['./dpedit.component.css']
})
export class DPEditComponent implements OnInit {
@Input() parentValue: string;
//region variables
currentURl;
dataProcessingEditForm: FormGroup;
formValid = false;
theDP = {};
yesNoArray = ["Yes", "No"];
yesNoFlag = false;
_ref: any;
//endregion
constructor(
private getDataProcessingService: GetDataProcessingService,
private router: Router,
private formBuilder: FormBuilder,
private activatedRoute: ActivatedRoute
) {
this.createForm();
}
createForm() {
this.dataProcessingEditForm = this.formBuilder.group({
legalReference: ['', Validators.compose([
Validators.required
])],
Title: ['', Validators.compose([
Validators.required
])],
Description: ['', Validators.compose([
Validators.required
])],
dataProcessor: ['', Validators.compose([
Validators.required
])],
dataController: ['', Validators.compose([
Validators.required
])],
timeEstimation: ['', Validators.compose([
Validators.required
])],
justifyDuration: ['', Validators.compose([
Validators.required
])],
ExistingRecipientName: ['', Validators.compose([
Validators.required
])],
ExistingRecipientLocation: ['', Validators.compose([
Validators.required
])],
RecipientYesNo: ['', Validators.compose([
Validators.required
])],
recipient: [],
addRecipient: [],
DSofSectors: ['', Validators.compose([
Validators.requiredTrue
])],
DTofSectors: ['', Validators.compose([
Validators.requiredTrue
])],
typeOfProcessing: ['', Validators.compose([
Validators.required
])]
});
}
ngOnInit() {
console.log("here ===> " + this.parentValue)
}
}