Reputation: 539
I have two components, I want to print the text in child component from the parent on click.
Parent Component :
import {Component, OnInit, ViewChild} from '@angular/core';
@Component({
selector: 'parent',
templateUrl: 'parent.html'
})
export class ParentComponent implements OnInit {
@ViewChild(ChildComponent) child;
constructor() {
}
ngOnInit() {
}
click(){
console.log(this.child.text);
}
}
Child Component:
import {Component, OnInit} from '@angular/core';
@Component({
selector: 'child',
templateUrl: 'child.html'
})
export class ChildComponent implements OnInit {
constructor() {
}
ngOnInit() {
const text = 'TEXT HERE';
}
//Some code...
}
I am new to angular. Just want to know how to make it work, I want some constants to be in one point and shared by others. Not necessary the constants has to be in child component only. Just need a good suggestion on how to make it work with a good coding strategy
This is not working for me.
Thanks
Upvotes: 0
Views: 761
Reputation: 692281
text
is a local variable of the ngOnInit
method. It only exists in that method, and disappears when this method exists. You need to make it an instance field of the ChildComponent class:
export class ChildComponent implements OnInit {
text: string;
ngOnInit() {
this.text = 'TEXT HERE';
}
}
Upvotes: 0
Reputation: 1134
my solution is creating a sharedService between these two component
/// SharedService
export class SharedService {
sharedConst: string = 'blabla';
}
//// ParentComponent
@Component({
...,
providers: [SharedService]
})
export class ParentComponent {
constructor(private sharedService: SharedService){}
}
//// ChildComponent
@Component({
...,
template: `{{sharedService.sharedConst}}`
})
export class ChildComponent {
constructor(public sharedService: SharedService){}
}
Upvotes: 1