Dev Me
asked on
Angular component inheritance
I am facing issue that I don't understand with Angular inheritance.
I have a component like
app.parent.ts
then I have child component
child.component.ts
I see the order of execution is parent component constructor -> parent ngOnInit -> childConstructor-> parent constructor->child ngOnInit.
looking at the console output, I don't the "found" value anywhere, it gives me undefined. I am expecting the found value to be seen in child component's console call.
But when I pass "found" via template like [found] ='found' to child.component.html from parent.component.html I see the found value.
What am I missing?
I have a component like
app.parent.ts
@Component({
selector: 'app-parent-component',
templateUrl: './parent.component.html',
styleUrls: ['./parent.component.scss']
})
export class ParentComponent implements OnInit {
public found: String;
}
constructor(
private parentService: ParentService,
private titleService: Title
) {
console.log(this.found);
}
ngOnInit() {
// lets make a call and initialized the root object and children
this.parentService.getParent().subscribe(root => {
this.parentRoot = root;
this.parentRoot.PARENT.parent.Field.forEach(fi => {
this.found = fi.found;
});
});
console.log(this.found);
}then I have child component
child.component.ts
export class ChildComponent extends ParentComponent implements OnInit {
}
constructor(
private parentService: ParentService,
private titleService: Title
) {
super(parentService, titleService);
console.log(this.found);
}I see the order of execution is parent component constructor -> parent ngOnInit -> childConstructor-> parent constructor->child ngOnInit.
looking at the console output, I don't the "found" value anywhere, it gives me undefined. I am expecting the found value to be seen in child component's console call.
But when I pass "found" via template like [found] ='found' to child.component.html from parent.component.html I see the found value.
What am I missing?
ASKER
Sorry these are typo...Here is updated code.. For ngOnInit() ..I assumed that it is understood that it is there but guess not..I have provided it below now.
why you have a closing brace '}' on line 9 of the parent code and line 3 of the child code?
@Component({
selector: 'app-parent-component',
templateUrl: './parent.component.html',
styleUrls: ['./parent.component.scss']
})
export class ParentComponent implements OnInit {
public found: String;
constructor(
private parentService: ParentService,
private titleService: Title
) {
console.log(this.found);
}
ngOnInit() {
// lets make a call and initialized the root object and children
this.parentService.getParent().subscribe(root => {
this.parentRoot = root;
this.parentRoot.PARENT.parent.Field.forEach(fi => {
this.found = fi.found;
});
});
console.log(this.found);
}
}export class ChildComponent extends ParentComponent implements OnInit {
constructor(
private parentService: ParentService,
private titleService: Title
) {
super(parentService, titleService);
console.log(this.found);
}
ngOnInit(){
}
How are you invoking the child - how is it being used?
ASKER
parent.html
child.html
<app-child></app-child>child.html
{{found}}
Ok so in the child you have this
The next question is why are you inheriting from the parent rather than passing the found value to the child?
@Component({
selector: 'app-child',
templateUrl: './child.component.html',
styleUrls: ['./child.component.scss']
})The next question is why are you inheriting from the parent rather than passing the found value to the child?
ASKER
I have bunch of fields that I want child to access, around 10 or so, I was passing it before using @Input(). The HTML code looked "primitive". I thought of using "inheritance" that typescript provides.
I have bunch of other children who would need the same information but render them differently. "extending" parent would be easier. So later on if I need to add more fields to the parent and use them in the children template, I could easily do so.
I have bunch of other children who would need the same information but render them differently. "extending" parent would be easier. So later on if I need to add more fields to the parent and use them in the children template, I could easily do so.
So all children have to be rendered inside a parent.
And all children inside a parent inherit the same data?
And all children inside a parent inherit the same data?
ASKER
Parent is like a main container which gets the data from the server and depending on children distributes different objects from JSON received from server.
Few children inherit the same data to render differently.
Few children inherit direct child objects received from parent server call.
Few children inherit the same data to render differently.
Few children inherit direct child objects received from parent server call.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Interesting...not true inheritance but I can live with @Input() decorators for now. Thanks.
You are welcome.
Where is the ngOnInit in the child component?