Add event detection

src/app/components/chart-statistics-month/chart-statistics-month.component.html

@@ -1,22 +1,22 @@
 <section class="container">
     <span>{{ title}}</span>
     <div class="styleSelect" *ngIf="!loadingData">
-    <div class="buttonStyle1 mr-2"><span>Año:</span></div>
-    <select name="purchasePerMonth" class="form-select form-select-sm ng-pristine ng-invalid ng-touched"
-        (change)="onYearChange($event)">
-        <option *ngFor="let year of years" [value]="year">{{ year }}</option>
-    </select>
+        <div class="buttonStyle1 mr-2"><span>Año:</span></div>
+        <select name="purchasePerMonth" class="form-select form-select-sm ng-pristine ng-invalid ng-touched"
+            [(ngModel)]="selectedYear" (change)="onYearChange($event)">
+            <option *ngFor="let year of years" [value]="year">{{ year }}</option>
+        </select>
     </div>
     <div *ngIf="loadingData">
         <fa-icon class="spinner-primary d-flex align-items-center justify-content-center mt-2"
             [icon]="['fas', 'circle-notch']" [spin]="true" [size]="'3x'"></fa-icon>
     </div>
     <div *ngIf="!loadingData && chartDataArray.length === 0" class="alert alert-secondary mt-2 text-center w-fit">
-        No hay información disponible para este periodo. Seleccione otro periodo
+        No hay información disponible para este período. Seleccione otro período.
     </div>
     <div class="canvasStyle" *ngIf="!loadingData && chartDataArray.length > 0">
         <canvas baseChart [data]="barChartData" [options]="barChartOptions" [plugins]="barChartPlugins"
             [legend]="barChartLegend" [type]="'bar'">
         </canvas>
     </div>
-</section>
+</section>

src/app/components/chart-statistics-year-supplier/chart-statistics-year-supplier.component.html

@@ -3,6 +3,7 @@
     [title]="title" 
     [years]="years" 
     [suppliers]="suppliers"
+    [selectedYear]="selectedYear"
     [showMonthSelector]="false"
     [loadingData]="loadingData"
     (loadingDataChange)="setLoadingData($event)"

src/app/components/chart-statistics-year/chart-statistics-year.component.html

@@ -5,7 +5,7 @@
             [icon]="['fas', 'circle-notch']" [spin]="true" [size]="'3x'"></fa-icon>
     </div>
     <div *ngIf="!loadingData && chartDataArray.length === 0" class="alert alert-secondary mt-2 text-center w-fit">
-        No hay información disponible para este periodo.
+        No hay información disponible para este período.
     </div>
     <div class="canvasStyle" *ngIf="!loadingData && chartDataArray.length > 0">
         <canvas baseChart [data]="barChartData" [options]="barChartOptions" [plugins]="barChartPlugins"

src/app/components/chart-table-supplier/chart-table-supplier.component.html

@@ -7,7 +7,7 @@
     <div class="styleDateContainer">
     <div class="styleYear" *ngIf="!loadingData">
         <div class="buttonStyle"><span>Año:</span></div>        
-        <select name="year" class="form-select form-select-sm" (change)="onYearChange($event)">
+        <select name="year" class="form-select form-select-sm" [(ngModel)]="selectedYear" (change)="onYearChange($event)" >
             <option *ngFor="let year of years" [value]="year"> {{year}}</option>
         </select>
     </div>
@@ -20,7 +20,7 @@
       </div>
     </div>
     <div *ngIf="!loadingData && suppliers.length === 0" class="alert alert-secondary mt-2 text-center">
-        No hay información disponible para este periodo. Seleccione otro periodo
+        No hay información disponible para este período. Seleccione otro período.
     </div>
     <div *ngIf="!loadingData && suppliers.length > 0" class="table-responsive custom-table-responsive">
         <table class="table table-striped">

src/app/services/chart.service.ts

@@ -1,6 +1,6 @@
 import { HttpClient } from '@angular/common/http';
 import { Injectable } from '@angular/core';
-import { Observable, map, of } from 'rxjs';
+import { Observable, map } from 'rxjs';
 import { ChartInterface } from '../models/chart-interface';
 import { environment } from 'src/environments/environment';
 import { SucursalesService } from './sucursales.service';