Breite Eingang Fokus wachsen in angular2

Question

ich angular2 neu bin, habe ich ein Problem mit meinem Eingang die autoGorw ein Attribut hat es ist eine eigene Richtlinie und hat zwei events(Fokus) und (Blur), onFocus() Ich möchte die Eingabegröße zu erhöhen und onBlur() Ich möchte die Größe auf die Standardgröße verkleinern, sowohl die events wurden ausgelöst und zeigen Ergebnisse in der Konsole, aber input Größe wird nicht erhöht, gibt es keinen Fehler in meiner Konsole Ich weiß nicht, was ich vermisse.

Entschuldigung Ich versuchte in Plunker für Live-Demo, um Sie leicht zu verstehen, konnte aber nicht gemacht.

Hier ist mein Code

Auto-grow.directive.ts

import {Directive, ElementRef, Renderer} from '@angular/core' 

// ElementRef => Gives access to host element 
// Renderer => Gives access to modify that element 

@Directive({ 
    selector: '[autoGrow]', 
    host:{ 
    '(focus)' : 'onFocus()', 
    '(blur)' : 'onBlur()' 
    } 
}) 
export class AutoGrowDirective{ 
constructor(private el : ElementRef, private renderer : Renderer){  
}  
onFocus(){ 
    console.log("Triggered !"); // its working upto this line. 
    this.renderer.setElementStyle(this.el.nativeElement,'Width','500'); 
} 
onBlur(){ 
    this.renderer.setElementStyle(this.el.nativeElement,'Width','120'); 
} 
} 

courses.component.ts

import {Component} from '@angular/core' 
import {AutoGrowDirective} from './auto-grow.directive' 

@Component({ 
    selector:"courses", 
    template:` 
    <h2>This is Courses component</h2> 
    <p>{{ title }}</p> 
    <input type="text" autoGrow /> 
    `, 
    directives: [AutoGrowDirective] 
}) 

export class CoursesComponent{ 
    title = 'This is the title of Courses Page!'; 
} 

app.component.ts

import { Component } from '@angular/core'; 
import {CoursesComponent} from './courses.component'; 

@Component({ 
    selector: 'my-app', 
    template: '<h1>Hello Angular!</h1><courses></courses>', 
    directives:[CoursesComponent] 
}) 
export class AppComponent { } 

HTML

In html innerhalb des Körpers Ich habe die Wähler

<my-app>Loading Please wait...</my-app> 

Answer 1

Ich denke, man nur px in '500px' fehlen und 'width' klein geschrieben werden soll.

Ich würde es auf diese Weise tun, aber:

@Directive({ 
    selector: '[autoGrow]', 
}) 
export class AutoGrowDirective { 
    @HostBinding('style.width.px') 
    width:number = 120; 

    @HostListener('focus') 
    onFocus() { 
    this.width=500; 
    } 

    @HostListener('blur') 
    onBlur(){ 
    this.width = 120; 
    } 
} 

Plunker example

Answer 2

der Breite gut für mich funktioniert 'px' Hinzufügen.

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

@Directive({ 
    selector: '[autoGrow]', 
    host: { 
    '(focus)': 'onFocus()', 
    '(blur)': 'onBlur()' 
    } 
}) 

export class AutoGrowDirective { 
    constructor(private el: ElementRef, private renderer: Renderer) { 

    } 
    onFocus() { 
    this.renderer.setElementStyle(this.el.nativeElement, 'width', '200px'); 
    } 
    onBlur() { 
    this.renderer.setElementStyle(this.el.nativeElement, 'width', '100px'); 
    } 
}