0

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

hayden
  • 2,643
  • 17
  • 21
JEET ADHIKARI
  • 529
  • 2
  • 6
  • 19

2 Answers2

1

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){}
}
Khaled Ahmed
  • 1,074
  • 8
  • 21
  • This is a good solution, but just want to know if this is a good idea in my case. In my huge application, I have only 3 constants string that I want to share withing only two components. Is it okay to make a complete new service just for this much ?? I am new... I just want to know – JEET ADHIKARI Jan 04 '18 at 07:19
  • I think yes it's a good idea because if you want to use these constant after that not only in those two component but also in more other components this will not cost you any changes in the future – Khaled Ahmed Jan 04 '18 at 07:22
  • True .. How about I just make a class, keep the constants there and import the class everywhere needed instead of making a service... I am not denying your solution. Just trying to get into depth.. I hardly have anyidea about angular – JEET ADHIKARI Jan 04 '18 at 07:24
  • 1
    it's a good solution too if you will make it only for declaring some constants and it's better than my solution – Khaled Ahmed Jan 04 '18 at 07:31
  • I got some confidence from your reply. Thanks Khaled.. Appreciate it – JEET ADHIKARI Jan 04 '18 at 07:32
0

textis 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';
   }
}
JB Nizet
  • 678,734
  • 91
  • 1,224
  • 1,255