1

First things first, I'm working in Angular 7 and I got the following "app": enter image description here

The top bar is a date filter, that gives the opportunity to choose the day "From" (De in portuguese) and the day "To" (Até in portuguese). It is supposed, by choosing these days, the graphic show only the respective interval, for example: day 2019/01/01 to 2019/02/02. Simple as that. So now I will show the logic I use to pass the data from the the bar component (filtro-data.component) to the parent (charts-report.component), and then from the parent to many graphics, but for now we only will use the (dimensao-component). I'm only working with de From input to give it to the zoom: min.

filtro-data. component.ts

export class FiltroDataComponent implements OnInit {

  dateDe : any;
  dateAte : any;

  @Output() dateDeEvent = new EventEmitter<string>()

  constructor() { }

  ngOnInit() { }

  sendMessage() {
    this.dateDeEvent.emit(this.dateDe);
  }
}

filtro-data.component.html

<input id="dateDe" name="dateDe" [(ngModel)]="dateDe" type="date" required>
<input type="date" id="dateAte" name="dateAte" [(ngModel)]="dateAte" required>
<button (click) = "sendMessage()">Aplicar</button>~

So here I preparred the data from the inputs to send them to the parent. Here's the parent:

charts-report.component.ts

export class ChartsReportComponent implements OnInit {
  @ViewChild(DimensaoComponent) dimensaoC: DimensaoComponent; //to import the component dimensao

  constructor(private formbulider: FormBuilder, private route: ActivatedRoute) {  }

  dateDe: any;

  receiveMessage($event) {
    this.dateDe = $event;
    this.dimensaoC.updateChart() //this will make sense
  }

  ngOnInit() {}
}

charts-report.component.html

<app-filtro-data (dateDeEvent)="receiveMessage($event)"></app-filtro-data>
 <app-dimensao [dateDe]="dateDe"></app-dimensao>

With all of this I will send the information to my component dimensao...

dimensao.component.ts

@Input() dateDe : any;

(...)
        time: {
            unit: 'day',
            min: this.dateDe
        }
(...)
   updateChart(){
    this.LineChart.update();
  }   

I did some "tests" and the dimensao component receive the date I choose in the filter-date.component, so it's all good...but then the graphic doesn't update when I click in the button "Aplicar", even with the function to do it (see receiveMessage in charts-report.component)... I've tried many things, but nothing work it out. Do you know what I could do? I just want the graphic to update with the new data in "min". Thank you.

Pedro Relvas
  • 678
  • 7
  • 19

0 Answers0