How to tell what the parent class of a child component is

Question

I have a component that I use as a child to two other components. These two parent components are different classes and I want to be able to do something based off of which one I'm in.

Is there a way to tell this using something like @Host or @Inject and instanceof ? If not, is there another way?

Answer 1

My recommendation is to not do it this way. If you need a different behavior on the child component either:

• Use an @Input property that the parent must fill in, then the child knows what to do with that value.

• Alternatively, use some intermediary, like a state (ie ngrx or akita) or a service that mediates between the components.

Having children know about the parent the way you propose is possible, but again, not what I would recommend.

For example, imagine you have a calendar button, and you use it in 300 hundred different parents, but 150 want it color blue and 150 want it color red.

If you go the way of switching on the parents, you would have to add 300 conditions to your child based on the parent.

Instead, if you pass an input property or a service property is shared, then you don't have to add but generic code to deal with that set of values, which in the red blue is 2.

Answer 2

We can use redux thinking here. Set a state saved in a service , aka the store in redux . Every time one of the two parent component is used, update the state . The child component will know which parent component is being used by reading the state .

Answer 3

Assuming that the parent components don't have any hierarchical relationship or are siblings, the simplest way of doing this and with type-safety is by creating an enum for your parent type:

export enum Parent {
  ParentA = 'Parent A',
  ParentB = 'Parent B'
}

Then you can create an @Input property in your ChildComponent , something like this:

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

import { Parent } from './parent-type.enum';

@Component({
  selector: 'child',
  template: `<h1>My Parent IS {{ parent }}</h1>`,
  styles: [`h1 { font-family: Lato; }`]
})
export class ChildComponent  {
  @Input() parent: Parent;
}

And use it like this in your parents:

For Parent Component 1:

import { Component, Input } from '@angular/core';
import { Parent } from './parent-type.enum';

@Component({
  selector: 'parent-a',
  template: `<child [parent]="parent"></child>`,
  styles: [`h1 { font-family: Lato; }`]
})
export class ParentAComponent  {
  parent = Parent.ParentA;
}

For Parent Component 2

import { Component, Input } from '@angular/core';
import { Parent } from './parent-type.enum';

@Component({
  selector: 'parent-b',
  template: `<child [parent]="parent"></child>`,
  styles: [`h1 { font-family: Lato; }`]
})
export class ParentBComponent  {
  parent = Parent.ParentB;
}

Here's a Sample StackBlitz for your ref.