Изменить стиль и привязку в Angular 2

Question

Я новичок в Angular 2, поэтому я изучаю его и делаю некоторые доказательства.

Я пытаюсь создать простой компонент и сделать некоторые динамические проблемы.

Так что это мой компонент:

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

@Component({ 
    selector: 'textboxcomponent', 

    template: require('./textboxparameter.component.html'), 
}) 

export class TextBoxComponent 
{ 
    @Input() labeltext: string; 
    @Input() placeholdertext: string; 
    @Input() enabletext: boolean; 

    //constructor() { 
    // this.enabletext= false; 
    //} 
} 

и адъюнкт шаблон:

<div class="form-group" > 
    <label for="surname"> {{labeltext}} </label> 
    <input class="form-control" id="surname" type="text" required autofocus 
      placeholder={{placeholdertext}} 
      [style.background-color]="enabletext ? 'green': 'red'"/> 
</div> 

Итак, если я совершу значение "enabletext" в конструкторе все работает отлично. Хорошо.

Теперь я пытаюсь сделать шаг вперед и использовать компонент снаружи, так создал это:

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

@Component({ 
    selector: 'home', 
    template: require('./home.component.html') 
}) 
export class HomeComponent { 
} 

и в шаблоне я использую компонент previus:

<textboxcomponent labeltext="Surname" enabletext="false" placeholdertext="placeholder example"></textboxcomponent> 

Так «placeholder» и «labeltext» работают отлично, ma не enabletext, компонент не меняет свой стиль независимо от значения булевой переменной.

Что мне не хватает?

Следующий шаг заключается в создании булеву переменную в homecomponent так что я буду менять стиль textcomponent, как я хочу таким образом

<textboxcomponent labeltext="Surname" enabletext="homeEnabled" 
placeholdertext="placeholder example"></textboxcomponent> 

Как я буду это делать?

Спасибо всем

Answer 1

<div class="form-group" > 
    <label for="surname"> {{labeltext}} </label> 
    <input class="form-control" id="surname" type="text" required autofocus 
      placeholder={{placeholdertext}} 
      [style.background]="enabletext ? 'green': 'red'"/> 
</div>