How do I create an Angular2 Component helper that can pass through items from a parent component and use them as if in the same scope?

Question

Im wanting to create a helper component for laying out bootstrap markup. Is created a component with the selector:

<bs-input label="Last Name" model="lastname"></bs-input>

the template for this new component looks like this

<label attr.for="{{model}}">
  {{label}}
</label>
<input class="form-control" bind-model="{{model}}" type="text" />

or is could look like this

<label attr.for="__MODEL__">
  __MODEL__
</label>
<input class="form-control" ng-model="__MODEL__" type="text" />

but the main thing is I need to manipulate or inherit the meta elements in the template to act as replacements for attributes I set in the parent component either be replacing or somehow passing them through. The model is where is comes unstuck.

Of course the template parser can't parse non-native elements so I cannot use mg-model or [(ngModel)] in my template

What is the best way around this? Can I access the template before it is processed but after the constructor is executed?

It's not very clear what do you want to achieve. You can pass data from **parent** to **child** with [angular2 @input](https://angular.io/docs/ts/latest/api/core/InputMetadata-class.html) . Or you can use a [service](https://angular.io/docs/ts/latest/tutorial/toh-pt4.html) to set and get data. — Tiberiu Popescu, Apr 04 '16 at 23:23
Yes that is pretty unclear. I had trouble formulating this question. See this plunker. This is the same question but for angular2 really. http://plnkr.co/edit/A29hl6?p=preview relating to this question http://stackoverflow.com/questions/14115701/angularjs-create-a-directive- that-uses-ng-model — Justin, Apr 05 '16 at 08:41

score 0 · Answer 1 · answered Apr 05 '16 at 06:03

      Things Like validation Should be same as in Helpers 
      just create helper component might be valid.ts

      //in the File where You want to use Helper as Example
      import {Validator} from "../../../helpers/valid"; 

      @Component({
      })

      export class Image{
      constructor(){
       this.Image= fb.group({
       ImageTitle: ["1", Validator.required],
            })
         }
      }

How do I create an Angular2 Component helper that can pass through items from a parent component and use them as if in the same scope?

1 Answers1