Angular check if Button was clicked

0
votes

I want to display a changed text value only if a Button has been clicked. The text value depends on an input field, and is dynamically bound to the input value of the text field with [(NgModel)]="textValue"... I first enter some ID number into the input box and it directly changes my text. But I only want the text with the "ID-value" to change after I clicked the button, and called the new charts data with my function "getChartsData()".

This is how my html looks like:

<input [(ngModel)]="monatConst" placeholder="Demonstrator-ID">
<button class="btn btn-danger float-xl-right mt-1" 
    (click) = "getChartsData()">  Call HTTP Request
  </button> 
<br>
<div *ngIf="monatConst">Chart für Demonstrator mit ID: {{monatConst}} </div><br>

<ngx-charts-bar-vertical
  [view]="view"
  [scheme]="colorScheme"
  [results]="dataArray"
  [gradient]="gradient"
  [xAxis]="showXAxis"
  [yAxis]="showYAxis"
  [legend]="showLegend"
  [showXAxisLabel]="showXAxisLabel"
  [showYAxisLabel]="showYAxisLabel"
  [xAxisLabel]="xAxisLabel"
  [yAxisLabel]="yAxisLabel">
</ngx-charts-bar-vertical>

How can I best realize that the text with the ID field is only changed after clicking the button, and calling the new charts data? For the moment, I bound the ID variable two way with ngModel and put it directly into the text field with data binding {{..}}

2
javascripthtmlangulardata-binding
You should change the title from Angular.js to just Angular, since you are using Angular v2+ - skovmand

2 Answers

0
votes

I found a much simpler solution, it was pretty stupid from me ;) :

<div *ngIf="dataArray?.length>0; else noChartBlock">
    Chart für Demonstrator mit ID: {{monatConst}}
<ngx-charts-bar-vertical
  [view]="view"
  [scheme]="colorScheme"
  [results]="dataArray"
  [gradient]="gradient"
  [xAxis]="showXAxis"
  [yAxis]="showYAxis"
  [legend]="showLegend"
  [showXAxisLabel]="showXAxisLabel"
  [showYAxisLabel]="showYAxisLabel"
  [xAxisLabel]="xAxisLabel"
  [yAxisLabel]="yAxisLabel">
</ngx-charts-bar-vertical>
</div>

<ng-template #noChartBlock>
  <b>There is no data for Demonstrator with ID: {{monatConst}} !</b>
</ng-template>

I just packed my Text inside the ngIf selector so that it displays the text if something was found, otherwise it goes to the else template block... ;P

0
votes

.html

 <input [(ngModel)]="monatConst" placeholder="Demonstrator-ID">
<button class="btn btn-danger float-xl-right mt-1" 
    (click) = "getChartsData();setText(monatConst)">  Call HTTP Request
  </button> 
<br>
<div *ngIf="Demonstrator_ID">Chart für Demonstrator mit ID: {{Demonstrator_ID}} </div><br>

.ts 

   monatConst:any;
   Demonstrator_ID: any;

   setText(text){
      this.Demonstrator_ID=text;
    }