SAP / ui5-webcomponents-ngx

UI5 Web Components for Angular provides directives for each UI5 Web Component. The directives allow to easily build your Angular application following the SAP Design System.
https://ui5-webcomponents-ngx.netlify.app/
Apache License 2.0
23 stars 4 forks source link

feat: enable setting bollean attrs to ui5webc ngx wrappers #133

Closed ilhan007 closed 2 weeks ago

ilhan007 commented 2 weeks ago

Summary

The PR changes the angular component/wrapper/directive generation so that all boolean properties are declared with the @Input({ transform: booleanAttribute }) to enable setting boolean attributes.

Previously, the only way to set boolean attributes used to be via the property syntax:

<ui5-checkbox [disabled]="true"></ui5-checkbox>

While now, the same can be done with a simple attribute:

<ui5-checkbox disabled></ui5-checkbox>

How it works

Generating all boolean properties (known as inputs in the Angular terminology) with @Input({ transform: booleanAttribute }).

Previously

@Component({
  selector: 'ui5-checkbox',
})
export class CheckboxComponent {
  disabled!: boolean;
}
  <!-- Wasn't working before -->
<ui5-checkbox disabled></ui5-checkbox> 

Now

@Component({
  selector: 'ui5-checkbox',
})
export class CheckboxComponent {
  @Input({ transform: booleanAttribute }) disabled!: boolean;
}
  <!-- Working now -->
<ui5-checkbox disabled></ui5-checkbox>

Fixes: https://github.com/SAP/ui5-webcomponents-ngx/issues/128

netlify[bot] commented 2 weeks ago

Deploy Preview for ui5-webcomponents-ngx ready!

Name Link
Latest commit 2561e6317feca04185b7e45d9e34c97e6f161036
Latest deploy log https://app.netlify.com/sites/ui5-webcomponents-ngx/deploys/66730771d9030000087ebc96
Deploy Preview https://deploy-preview-133--ui5-webcomponents-ngx.netlify.app
Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.