Angular 2: ag-grid-angle Making Editable Cells

I'm working with ag-grid-angular I understand that to make a cell editable, the call of the cellEditingStarted event is made with something like (cellEditingStarted)="function ($ event) " within the ag-grid-angular-material tags, I leave an example.

      <div class="full-container">
    <ag-grid-angular style="width: 100%; height: 900px;" class="full-grid ag-theme-material" [rowData]="rowData" [columnDefs]="columnDefs" [singleClickEdit]="true" (cellEditingStarted)="onRowClicked($event)">
    </ag-grid-angular>
  </div>

Another Event that helps me to make an editable cell with a single click is [singleClickEdit]="true"

However, adding all that, the cell is not editable.

In the controller I have the following:

 // Angular Core
 import { Component, Input, OnInit, ViewChild } from '@angular/core';

 // Forms
 import { FormBuilder, FormGroup, Validators, ReactiveFormsModule } from '@angular/forms';
 import { MatStepper } from "@angular/material/stepper";

 // Services
 import { CategoriesService } from "../../../services/form-wizard/categories/categories.service";
 import { TemplateService } from "../../../services/form-wizard/template/template.service";

 import { category } from '../interfaces/category';

 @Component({
   selector: 'app-form-wizard',
   templateUrl: './form-wizard.component.html',
   styleUrls: ['./form-wizard.component.css']
 })

 export class FormWizardComponent implements OnInit {

   @Input() model: string;
   @ViewChild('stepper') stepper: MatStepper;

   public isLinear = false;
   public firstFormGroup: FormGroup;
   public secondFormGroup: FormGroup;
   public categories: any;
   public categorySelected: string;
   public columnDefs: any[];
   public rowData: any[];
   public categoriesFModel: any;


   constructor(
     private _formBuilder: FormBuilder,
     private categoriesService: CategoriesService,
     private _templateS: TemplateService
   ) {
     this.categorySelected = null;
   }

   ngOnInit() {
     this.firstFormGroup = this._formBuilder.group({
       firstCtrl: ['', Validators.required]
     });
     this.secondFormGroup = this._formBuilder.group({
       secondCtrl: ['', Validators.required]
     });

     this.categoriesService.getCategories(this.model).subscribe(success => {
       this.categories = this.categoriesService.categoriesTransform(success);
     }, error => {
       console.log('error: ', error);
     });
     this.columnDefs = this.createHeaders();
   }

   /**
    * [receiveMessage description]
    * @param  selected [description]
    * @return          [description]
    */
   public receiveMessage = (selected: string) => {
     this.categorySelected = selected;

     let p = this.getIdFromCategory(this.categories, this.categorySelected);
     let id = this.categories[p].id;

     this.categoriesService.getCategoriesFromModel(this.model,           id).subscribe(success => {
       this.categoriesFModel = success;
       this.rowData = this.createRowData(this.categoriesFModel);
     }, error => {
       console.log('error: ', error);
     });

     this.stepper.next();
   }

   /**
    * [getIdFromCategory description]
    * @param  categories [description]
    * @param  selected   [description]
    * @return            [description]
    */
   public getIdFromCategory = (categories: any, selected: string) => {
     return this.categories.findIndex(x => x.name === selected);
   }

   /**
    * Function to create the headers of the ad-grid
    * @return [A array with the headers]
    */
   private createHeaders = () => {
     const columnDefs = [
       { headerName: "Name", field: "Field" },
       { headerName: "Required", field: "Required" },
       { headerName: "Label", field: "Label" },
       { headerName: "Hidden", field: "Hidden" },
       { headerName: "ACL", field: "ACL" }
     ];

     return columnDefs;
   }

   /**
    * Function to Create the rowData of categories of a Model
    * @return [Return a Array with the rowData]
    */
   private createRowData = (categoriesModel: any = null) => {
     var rowData: any = [];
     if (categoriesModel !== null) {
       for (var key in categoriesModel) {
         if (categoriesModel[key].hasOwnProperty('StandardName')) {
           rowData.push({
             Field: categoriesModel[key]['StandardName'],
             Required: true,
             Label: 'Hola',
             Hidden: true,
             ACL: 0
           });
         }
       }
     } else {
       console.log('Dont have Categories');
     }

     return rowData;
   }
   public onRowClicked = (event) => {
     console.log(event);
   }
 }

A sample of how the view is being viewed:

What am I doing wrong?