title: Dynamic change headerName ag-grid Angular 2?
body: <p>I have this code: </p>
  
  <pre><code>public fy: string = "17";
  let months = ['July', 'August', 'September', 'October', 'November', 'December', 'January', 'February', 'March', 'April', 'May', 'June',];
  
          function headerCellRendererFunc(year, params) {
              const eHeader = document.createElement('span');
              eHeader.innerText = `${params.colDef.headerName} ${year}`;
              return eHeader;
          }
  
          const januaryIndex = months.indexOf('January');
          months.map((month, index, arr) =&gt; {
              const year = januaryIndex === 0 || index &gt; januaryIndex ? this.fy : this.fy + 1;
  
              return &lt;ColDef&gt;{
                  headerName: month,
                  headerCellRenderer: headerCellRendererFunc.bind(null, year),
                  field: `data.${month}`,
                  editable: isEditable,
                  valueGetter: cellMonthValueGetter(month, index),
                  cellFormatter: cellMonthValueFormatter,
                  newValueHandler: cellMonthNewValueHandler(month),
                  width: 100,
              };
          }).forEach((colDef) =&gt; colDefs.push(colDef));
  </code></pre>
  
  <p>and this function: </p>
  
  <pre><code>refresh(): void {
      let jobId = +this.route.snapshot.parent.params['id'];
      this.jobService.getJob(jobId).then(result =&gt; {
          this.job = result.Object;
          this.fy = result.Object.FinancialYearName;
          this.jobService.getTimePhasing(jobId).then(result =&gt; {
              this.setModel(result.Object);
          });
      });
  }
  </code></pre>
  
  <p>As you can see, the FY mod will change after the request. How do I change it in columns? I tried again to call the grid rendering function, (<strong>this.gridOptions.api.refreshView ();</strong>) but that did not help me.</p>