0

Say, there's a relation between two components in Angular:

// Parent component: ParentComponent
// Child component: ChildComponent

// in ParentComponent template
<pp-child></pp-child>

------

export class ChildComponent implements OnInit {
  constructor(
    // wonder if there's something like:
    // private parentRef: HostParentRef
  ) {}
  ngOnInit() {
    console.log(this.parentRef); // This would print ParentComponent
  }
}

What I want to know is if there's a way to find out its parent component's type in ChildComponent level. If there is, I would get ParentComponent in this case.

Any insight would be appreciated!

Edit: I'm not talking about accessing parent's property or communicating between two. I'm just simply wondering about parent component's type of a component on runtime.

DongBin Kim
  • 1,799
  • 5
  • 23
  • 43
  • what you mean by identity?. if you want to share any data from parent component to child you can pass it as props. it will be helpful if you can describe what is your current problem is! – Mohamed Rashiq Oct 31 '19 at 05:44
  • Have you looked at this: https://stackoverflow.com/questions/35267146/accessing-a-property-in-a-parent-component? – shaktimaan Oct 31 '19 at 05:44
  • @RashiqKodakkad Component Type I suppose. In above case, `ParentComponent` is the case. – DongBin Kim Oct 31 '19 at 05:45
  • @DongBinKim please show demonstration – Mohamed Rashiq Oct 31 '19 at 05:49
  • @shaktimaan I have but I don't see any clue which has to do with my question. – DongBin Kim Oct 31 '19 at 05:49
  • I can't understand what you want exactly. why do you get parents type? if you want to receive props from parent you can do it. I wonder if any other problems you have. please share your code if possible. – Amir Christian Oct 31 '19 at 06:06
  • @DongBinKim I really want to help you. Please tell me want do you want to do by referring parent component. (like change style or property). Please use code sandbox to demonstrate your problem. i think it will help others to understand problem – Mohamed Rashiq Oct 31 '19 at 06:33
  • @AmirChristian I have no particular purpose with it. I just simply want to know if it's possible. – DongBin Kim Oct 31 '19 at 07:01
  • @RashiqKodakkad I'm not curious about communication between child and parent component. I just simply wonder if it's possible to know the parent component's type in the child component level. No particular purpose with it. – DongBin Kim Oct 31 '19 at 07:02

2 Answers2

0

You can do it by passing a parameter as the name of the parent so that your child component can get to know who is the parent component and what data is to be processed 

<pp-child [parentInfo]="parentData"> </pp-child>

And take the input in child component as 

@Input() parentInfo;
constructor(){
 console.log(parentInfo);
}

You can also get the info of the parent using this keyword also 

<pp-child [parentInfo]="this"> </pp-child>

Then when you check the parentInfo keyword then you get the whole parent component info also.
Or you can get the parent Element of a element as we do in javascript but it will give you the direct parent element like div if it in a div

Hitech Hitesh
  • 1,641
  • 1
  • 9
  • 18
-1

You can use eventEmitter.

This is a small example which will give you some insight:

parent.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-parent',
  template: `
    Message: {{message}}
    <app-child (messageEvent)="receiveMessage($event)"></app-child>
  `,
  styleUrls: ['./parent.component.css']
})
export class ParentComponent {

  constructor() { }

  message:string;

  receiveMessage($event) {
    this.message = $event
  }
}

child.component.ts

import { Component, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-child',
  template: `
      <button (click)="sendMessage()">Send Message</button>
  `,
  styleUrls: ['./child.component.css']
})
export class ChildComponent {

  message: string = "Hola!"

  @Output() messageEvent = new EventEmitter<string>();

  constructor() { }

  sendMessage() {
    this.messageEvent.emit(this.message)
  }
}

This URL will get some help: https://angularfirebase.com/lessons/sharing-data-between-angular-components-four-methods/

Soumya Ranjan Swain
  • 187
  • 2
  • 15