0

I have input. There are deferent behaviours for that input - depending on - who is the 'parent' of that input.

I have the following structure.

In my first example here input has the first parent app-chip-list.

APP COMPONENT HTML

<app-form-field>
   <app-chip-list>
      <input />
   </app-chip-list>
</app-form-field>

FORM FIELD HTML

  <ng-content></ng-content>

CHIP LIST

<ng-content></ng-content>

In my second example

APP COMPONENT HTML

<app-form-field>
      <input />
</app-form-field>

the input has parent app-form-field component. And because of that the behaviour of the input will be different.

How can i check this ?

peckoski
  • 105
  • 6

2 Answers2

0

try using @input and @output emitter to pass data between parent and child, to get data from the input field you can two-way-bind the value property to a variable and first you need to restructure your warping components example: inside the ChipList.component.html=> place the and wise versa for other warpers

Harish
  • 104
  • 6
0

If <input/> is a native HTML input, wrap it in a Custom component.

You can inject a reference to the parent component into this custom component and possibly find out what type of component the parent is.

This will only work if you know in advance what possible parents your custom component could have as you have to use their Classes in the constructor to get a reference to them. Something like this might work:

export class CustomComponent   {
constructor(@Optional @Host() formFieldParent: AppFormField, @Optional @Host() parent: appChipListParent) {}

The following question discusses approaches:

Accessing a property in a parent Component

pobman
  • 41
  • 4