Angular - Accessing Host properties from a child component

Question

I created a set of custom form components that renders the label, input and validations.

The component has a layout attribute that allow setting the position of the HTML elements (the component has defaults).

In most cases the layout for all components on a specific form is the same. I would like to be able to set the layout on the host component so the component will try taking it from the host component.

So instead of repeating layout like:

<div class='input-group'>
    <my-input type="text" id="name" label="Name" [layout] ="{'col_label':2, 'col_input':3,'col_validation':2}"></my-input>
    <my-input type="text" id="address" label="address" [layout] ="{'col_label':2, 'col_input':3,'col_validation':2}"></my-input>
    <my-input type="number" id="zip" label="zip" [layout] ="{'col_label':2, 'col_input':3,'col_validation':2}"></my-input>
</div>

I will have properties on my Form’s component

export class UserFormComponent {
    col_label=2;
    col_input=3;
    col_validation'=2;
.
.
.
}

And on the component I can query the host for the values (if exists). something like:

.
.
this._gridLabelColumn = parent.col_label;
this._gridInputColumn = parent.col_input;
.
.

This will make the html much shorter:

<div class='input-group'>
    <my-input type="text" id="name" label="Name"></my-input>
    <my-input type="text" id="address" label="address"></my-input>
    <my-input type="number" id="zip" label="zip"></my-input>
</div>

Please note that components can be hosted in many forms/components, so I really don't know what is the host type.

matejko219 · Accepted Answer · 2018-05-16 08:31:56Z

1

I suggest you to communicate between parent and children using service or @ViewChild. It is all described in guide urls that I pasted.

EDIT: Check this answer but it depends on parent component type.

Other option is to use @Input and pass parent instance into each my-input.

edited May 16, 2018 at 8:31

answered May 16, 2018 at 7:44

matejko219

1,77113 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Ronen Over a year ago

@ViewChild is for the other direction, Parent to child, I need to access child to parent. communicating using a service is not an option as the controls will be used in many projects and code will be very clumsy.

Collectives™ on Stack Overflow

Angular - Accessing Host properties from a child component

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related