Angular2 - Attribute directive for a custom input component

Question

I have a component called <app-craftinput>. I'm using this on different layouts.

The template is: <input type="text" name="" value="" class="input__field input__field--type1">

What is the best method to add attributes like <app-craftinput [value]='23' [label]='Email'></app-craftinput> in the component's template?

Brad Axe · Accepted Answer · 2017-02-05 03:36:28Z

1

Is this what you're looking for?

child .component.ts:

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

export class app {

@Input() value:number;

}

parent .component.html:

<app-craftinput [value]="3"></app-craftinput>

in order to utilize the information passed from the parent in your child element, in child .component.html:

<label for="{{value}}">{{value}}</label>

answered Feb 2, 2017 at 19:47

Brad Axe

8157 silver badges17 bronze badges

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

3 Comments

Thank you! But how it will work if I'll have a 'label' in the template and I want to add it to the component? (and display it, of course)

@MihaiGota is this label within the app-craftinput element?

Is within the component template. Something like: <label for="">Name</label> <input name="test" class="" />.