How to use a component which starts disable but has to start enable?

Question

I have aN autocomplete componenent at my application which starts disable. It's a component which is called in a lot of place at my application.

COMPONENT AUTOCOMPLETE

 ngOnInit() {
    this.internalForm = this.formBuilder.group({
      value: [null]
    });
    this.internalForm.get('value').disable();   }

I need to start the componenent enable this time.

I already tried:

ANOTHER COMPONENET

ngOnInit() {
    this.carregarDropDowns();
    this.form.get('cboControl').enable();
}

But it doesn't work.

Answer 1

You can have an @Input property in your first component and disable your autocomplete based on the input option value. e.g.

@Component({
   selector: 'auto-complete',
   templateUrl: 'auto-complete.component.html'
})
export class AutoCompleteComponent {
  @Input() enabled: boolean;

  ngOnInit() {
    this.internalForm = this.formBuilder.group({
      value: [null]
    });

    if (!this.enabled) {
        this.internalForm.get('value').disable();
    }
}

Then you can pass enabled flag to it when you want it enabled.

<auto-complete enabled="true"></auto-complete>

Edit: Changing the code example to avoid changing old code as per requested in comment