ボタンテキストを変更し、angular2のボタンイベントをクリックして無効にする方法

Question

<ボタン>のボタンをangular2でクリックすると、どのようにテキストを変更しますか？

たとえば、ボタンのテキストを[保存]から[保存中]に変更し、無効にすることもできます。

私はAngularJS、jQuery、およびplain JSでこれを行う方法を知っていますが、私はAngular2でこれを行う方法についていくつかのアイデアを持っていますが、私はいくつかの古風なやり方でAngular2について言えば、

Answer 1

<button (click)="setSaving($event.target, 'saving')">save</button> 

、その後、あなたのコンポーネントで：

テンプレート：

setSaving(element, text){ 
    element.textContent = text; 
    element.disabled = true; 
} 

ます。また、ここでRenderer

Answer 2

を使用してプロパティを設定することができますが私のために働いた非同期呼び出しのための例です：

<button (click)="loadMore($event.target)">load more</button> 

コンポーネント（擬似コード）：

export class MyComponent{ 

    button; 

    constructor(private _apiService: ApiService){} 

    ngOnInit() 
    { 
     this.load(); 
    } 

    load() 
    { 
     this._apiService 
      .getAsyncFrom('/sample/url') 
      .subscribe(data=> { 

       // do something with your data 

       // enable it 
       if(this.button) 
       { 
        this.button.textContent = 'load more'; 
        this.button.disabled=false; 
       } 
      }); 
    } 

    loadMore(element) 
    {  
     // assign to class 
     this.button = element; 

     //disable it 
     this.button.textContent = 'loading...'; 
     this.button.disabled=true; 

     this.load(); 
    } 
} 

基本的にクラスに要素を割り当て、あなたがそれを必要な場所にアクセスします。