Angular2: Apply any property binding to child element

Question

Assume this simple Angular 2 app

Main component:

@Component({
    selector: "app"
})
@View({
    directives: [ChildComponent]
    template: '<child-component></child-component>'
})
export class App {}

Child component

@Component({
    selector: "child-component",
    template: '<input type="text" id="applyEverythingToMe" />'
})
export class ChildComponent {}

How can we apply any property binding, directive, whatsoever to the applyEverythingToMe input field, without defining everything via @Attribute, ... in the ChildComponent?

Assume e.g. we want to disable the input via

<child-component [disabled]="true"></child-component>

The plunk: https://plnkr.co/edit/kndYdGFsp8sEzCPpcKdq?p=preview

Edit:

As the first answers missed our actual problem, here is a bit more background:

We are using <input type="date" /> and split up the banana-in-the-box into () and [] (e.g. described here: https://stackoverflow.com/a/39890184/1256072). This of course clutters every component with the parseDate, and it is also annoying that we cannot use [(ngModel)]. As we did not find any way to extend the ngModel directive to e.g. myModelDate which automatically splits [()] and applies the parse method, we created our own component which implements ControlValueAccessor so we can bind it with [(ngModel)]. This components template only contains this one input type=date field. We now want our own component to behave just like any other input, so we can simply use <my-date [disabled]="true"/> or <my-date [attr.whatever]="something" /> without explicitly defining all attributes via @Input, @Attribute, ...

I suggest you work through the Tour of Heroes tutorial and then re-ask the question if you still have it. The tutorial will answer that question for you--and many more. — Anthony Gatlin, Dec 17 '16 at 05:38
No, unfortunately it doesn't. I edited my initial question to give a bit more background what we are trying to achieve. — Marco Schulte, Dec 17 '16 at 12:16
`@View({` was removed about 9 months ago. What Angular2 version are you using? — Günter Zöchbauer, Dec 18 '16 at 12:22
I find your question quite confusing and it's entirely unclear to me what the question is about. — Günter Zöchbauer, Dec 18 '16 at 12:25

score 0 · Answer 1 · answered Dec 17 '16 at 07:12

0

Use the @Input() decorator on the properties that you want to expose in the child component.

For example:

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

@Component({
    selector: "child-component",
    template: '<input type="text" />'
})
export class ChildComponent {
  @Input disabled: boolean;
}

answered Dec 17 '16 at 07:12

Manny Ovena

11
2

That is exactly what we are trying to avoid. – Marco Schulte Dec 17 '16 at 12:17

Angular2: Apply any property binding to child element

1 Answers1