如何将数据绑定到 Angular8 材质中的按钮文本值

Question

I need help with binding a data to a button text, any help please

  ngOnInit() {
   this.summaryService.getSummaryAll()
      .pipe(
      take(1)
      ).subscribe(data => this.summary = data);
}

HTML

<button mat-flat-button  class="rectangle">
    <div class="external">{{ summary.tools }} </div>
</button>

Thank you

Answer 1

Eldar's comment above was the key... You can mock the behavior of an API call with delay from a promise or an observable or your API...

relevant component.ts :

export class ButtonOverviewExample {
  summaryPromise = {tools:''};
  summaryObservable = {tools:''};

  constructor(private srv:AppService){
    srv.getButtonTextViaPromise().then(
      (dataa:string)=>{ console.log(dataa); this.summaryPromise = { tools: dataa}; }
    )

    srv.getButtonTextViaObservable().subscribe(
      (dataa:string)=>{ console.log(dataa); this.summaryObservable = { tools: dataa}; }
    )
  }

}

relevant service.ts :

  getButtonTextViaPromise() {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve("text from promise");
      }, 5000);
    });
  }

  getButtonTextViaObservable() {
      return of("text from observable").delay(5000);
  }

relevant html :

<button mat-button>{{ summaryPromise?.tools }}</button>
<button mat-button>{{ summaryObservable?.tools }}</button>

complete working stackblitz