CODEWITHSUNDEEP
angular
Snehan Jain
Snehan Jain

Reputation: 33

NgOnChanges not firing even after changing value of @Input boolean?

I am new to angular and have seen a various answers on this but could not solve it.I am using Angular 11. Here is my code for it:

    @Component({
      selector: 'app-custom-quill-editor',
      templateUrl: './custom-quill-editor.component.html',
      styleUrls: ['./custom-quill-editor.component.css'],
    })
    export class CustomQuillEditorComponent implements OnInit, OnChanges {
      static textChange() {
        throw new Error('Method not implemented.');
      } 
      quill1: any;
       data: any[] = [new Temp()];
       @Input() flag:boolean=false;
      constructor(private getDataService: GetDataService) {   
      }
    ngOnChanges(changes:SimpleChanges){
    console.log("In ng changes");
 console.log(changes);
let tdelta = {
      ops: this.data,
    };
    var Delta = Quill.import('delta');
    //let editor = new Quill('#editor');  // finding quill editor with id editor
    const delta = new Delta(tdelta);
    //editor.setContents( delta ,'api');
    var quill = new Quill('#editor-container', {
      modules: {
        toolbar: [
          ['bold', 'italic', 'underline'],
          ['blockquote'],
          [{ header: 1 }, { header: 2 }],
          [{ list: 'ordered' }, { list: 'bullet' }],
        ],
      },
      placeholder: 'Compose an epic...',
      theme: 'snow', // or 'bubble'
    });
    this.quill1 = quill;
    this.quill1.updateContents(delta, 'api');
    //trigerring these events if text is changed in editor
    quill.on(
      'text-change',
      this.textChange
    );
  }
    }
 ngOnInit(){
    this.getDataService.getJSON().subscribe((fetchedData) => {
      console.log('Fetched data in component');
      console.log(fetchedData);
      console.log("data before assigning it to fetchedData");
      console.log(this.data);
      this.data=fetchedData;
      console.log(this.flag);
      this.flag=!this.flag;
      console.log(this.flag);
      //this.cd.detectChanges();

      console.log("data after assigning it to fetchedData");
      console.log(this.data);
      console.log('Final data array');
      console.log(this.data);

    });
  }

In the console I can see that the value of the variable flag changes, but still ngOnChnages is not fired. Is there any alternative method to do this?

Upvotes: 1

Views: 809

Answers (1)

Eliseo
Eliseo

Reputation: 57919

why not use a setter in the input?

_private flag
@Input set flag(value){
   this._flag=value;
  ...do something...
}

get flag()
{
   return this._flah
}

Upvotes: 2

Related Questions