Issue
I have 2 components: AppComponent
and export class InnerComponent
. AppComponent
embed InnerComponent
via @ViewChild
. After that i need display to console variables value from InnerComponent
. However i get error message to console because this.InnerComponent is undefined.
Please help me display a
variable to console from AppComponent
.
AppComponent:
import { AfterViewInit, Component, ViewChild } from '@angular/core';
import { InnerComponent } from './inner/inner.component';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
})
export class AppComponent implements AfterViewInit {
@ViewChild(InnerComponent) innerComponent: InnerComponent;
ngAfterViewInit() {
console.log(this.innerComponent); // undefined
console.log(this.innerComponent.a); // error
}
}
InnerComponent:
import { Component } from '@angular/core';
@Component({
selector: 'app-inner',
templateUrl: './inner.component.html',
styleUrls: ['./inner.component.css'],
})
export class InnerComponent {
a = 200;
}`enter code here`
Solution
Your app.component.html
template doesn't actually contain the <app-inner>
component. If you haven't put it in the template, it's not a child you can select with @ViewChild
Your template looks like this:
<div class="app">app:</div>
But it should look like this so the element can be selected
<div class="app">
app:
<app-inner></app-inner>
</div>
Answered By - Chris Barr
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.