Ändern Sie Stil und Bindung in Angular 2

Question

Ich bin ein Neuling in Angular 2, so dass ich es studiere und einige beweisen.

Ich versuche, eine einfache Komponente zu erstellen und einige dynamische Probleme zu machen.

Das ist also meine Komponente:

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; 
    //} 
} 

und das assoziierte Vorlage:

<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> 

Also, wenn ich einen Wert von "enabletext" im Konstruktor macht alles funktioniert gut. Gut.

Jetzt versuche ich, einen Schritt nach vorne und verwenden Sie die Komponente außerhalb zu machen, so dass diese erstellt:

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

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

und in seiner Vorlage i die previus Komponente bin mit:

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

So ist die "placeholder" und "labeltext" funktionieren gut, nicht der enabletext, die Komponente ändert ihren Stil nicht, egal welchen Wert die boolesche Variable hat.

Was ich vermisse?

Der nächste Schritt ist eine Boolesche Variable in der homecomponent zu erstellen, damit ich den Stil der Textcomponent ändern, wie ich auf diese Weise will

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

Wie werde ich es tun?

Vielen Dank an all

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>