Currently, I am encountering an issue with passing an object from a parent component to a child component in Angular. Whenever I run the command ng serve, an error is thrown stating that the passed object cannot be found. However, on occasions when I save a file, triggering a rebuild of the system, it works correctly and serves the app without any errors.
I suspect that the problem lies in the fact that the data being passed originates from a service that fetches data. If my assumption is accurate, what steps can I take to resolve this issue?
Here is the code for the Parent Component:
@Component({
selector: 'app-design-studio',
templateUrl: './design-studio.component.html',
styleUrls: ['./design-studio.component.scss']
})
export class DesignStudioComponent implements AfterViewInit {
designData: any;
// Private
private _unsubscribeAll: Subject<any>;
constructor(private _studio: DesignStudioService) {
// Set the defaults
this.searchInput = new FormControl('');
// Set the private defaults
this._unsubscribeAll = new Subject();
this._studio.onDesignChanged
.pipe(takeUntil(this._unsubscribeAll))
.subscribe(response => {
this.designData = response;
// Prepend and append the cost and menu data
this.designData.menu.unshift(this.projectMenu);
this.designData.menu.push(this.costMenu);
// Add the array to hide/show the side menus
this.designData.menuShow = [];
this.designData.menu.forEach((value, index) => {
this.designData.menuShow[index] = false;
});
});
}
ngOnInit() {
this._studio.onDesignChanged
.pipe(takeUntil(this._unsubscribeAll))
.subscribe(response => {
this.designData = response;
// Prepend and append the cost and menu data
this.designData.menu.unshift(this.projectMenu);
this.designData.menu.push(this.costMenu);
// Add the array to hide/show the side menus
this.designData.menuShow = [];
this.designData.menu.forEach((value, index) => {
this.designData.menuShow[index] = false;
});
});
}
}
And here is the code for the Child Component:
import { Component, OnInit, Input } from '@angular/core';
@Component({
selector: 'design-sidebar',
templateUrl: './sidebar.component.html',
styleUrls: ['./sidebar.component.scss']
})
export class SidebarComponent implements OnInit {
@Input() designData: designData;
constructor() { }
ngOnInit(): void {
}
}
The error occurs in the Child Component (the second designData is underlined with an error):
ERROR in src/app/main/design-studio/sidebar/sidebar.component.ts:12:22 - error TS2304: Cannot find name 'designData'.
@Input() designData: designData;