I am currently working on an Angular 11 application where I have implemented an icon to trigger the loading of a graph. However, I have noticed that there is a delay in loading the graph when the icon is clicked. To prevent users from triggering the icon multiple times while the graph is still loading, I would like to disable the icon until the graph has fully loaded.
Here is the code snippet for the icon:
<span (click)="createChartFromMap(selectedSensor.sensor.charts[0], selectedSensor.properties['key'], selectedSensor.properties['name'])"
class="ml-auto">
<fa-icon [icon]="selectedSensor.sensor.icon" [styles]="{'color': '#BF0404'}" size="lg" class="menu-list-item">
</fa-icon>
</span>
and here is the method used:
createChartFromMap(element: string, node: string, name: string) {
// Method implementation goes here
}
The service responsible for loading the data for the graphs looks like this:
// Service implementation goes here
In order to address the issue, I created an observable called $blockButtonGraph. Now, the question is how to effectively utilize this observable?
Thank you.