Hostbinding on component with attribute selector not working

Question

The goal: I want to customize a component attribute from within a directive using @Hostbinding. The attribute name is disabled.

The problem: I'm getting this error:

Can't bind to 'disabled' since it isn't a known property of 'sd-form'.\n1. If 'sd-form' is an Angular component and it has 'disabled' input, then verify that it is part of this module.\n2. If 'sd-form' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.\n3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. recognized, yet it's part of the component on which the directive is used.

This is my directive

@Directive({
  selector: '[sixDisableNotAutorized]'
})
export class NotAutorizedDisableDirective extends RxjsComponent implements AfterViewChecked {

  @Input('sixDisableNotAutorized')
  autority: AuthorityEnum;

  @HostBinding('disabled')
  disabledState: boolean;
  ...
}

this is my component:

@Component({
  selector: 'sd-form[radio-group], sd-form[radio-group-inline]',
  templateUrl: './form-radio-group.component.html',
  styleUrls: [
    './form-radio-group.component.scss',
  ],
  encapsulation: ViewEncapsulation.None
})
export class SdFormRadioGroupComponent extends CustomValueAccessorComponent<ISdFormComponentItem> implements ControlValueAccessor {

  currentValue: ISdFormComponentItem;

  @HostBinding('class.six__is-disabled')
  @Input()
  disabled = false;

  ...
}

this is the dom:

<sd-form radio-group
         formControlName="myForm"
         idField="myForm"
         nameField="myForm"
         [sixDisableNotAutorized]="'EDITION_BI_CHANTIER'">
</sd-form>

BunyamiN · Accepted Answer · 2021-09-28 15:10:28Z

1

change @HostBinding('disabled') to @HostBinding('attr.disabled')

answered Sep 28, 2021 at 15:10

BunyamiN

5914 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

oualid qannouf Over a year ago

It did add the disabled attribute but apparently the onChange of the component didn't trigger so no effect until now :\

oualid qannouf Over a year ago

I understand now, i think the hostbinding edit the value of the attribute statically and silentely. I will add some css to disable the input child of the component. sorry i didn't specify that the component has a child who needs to be set to disable true.

Collectives™ on Stack Overflow

Hostbinding on component with attribute selector not working

1 Answer 1

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Related