I have a custom Angular library that I want to enhance by encapsulating the ng-zorro button (along with other components) and adding my own attribute selector instead of the ng-zorro selector, as well as incorporating additional properties to the original component.
Looking at the source code of ng-zorro, you'll find the implementation of the nz-button attribute:
@Component({
selector: 'button[nz-button], a[nz-button]',
exportAs: 'nzButton',
preserveWhitespaces: false,
changeDetection: ChangeDetectionStrategy.OnPush,
encapsulation: ViewEncapsulation.None,
template: `
<span nz-icon nzType="loading" *ngIf="nzLoading"></span>
<ng-content></ng-content>
`,
host: {
class: 'ant-btn',
'[class.ant-btn-primary]': `nzType === 'primary'`,
'[class.ant-btn-dashed]': `nzType === 'dashed'`,
// ...
}
})
Unlike a @Directive, this is a @Component that selects elements based on the condition button[nz-button].
Below is the component I developed to wrap the aforementioned component:
@Component({
selector: 'button, a',
preserveWhitespaces: false,
imports: [
NzButtonModule
],
changeDetection: ChangeDetectionStrategy.OnPush,
encapsulation: ViewEncapsulation.None,
template: `<ng-content></ng-content>`,
styleUrls: ['./button.component.scss'],
standalone: true,
host: {
'nz-button': '',
class: 'btn',
'[class.btn-primary]': `color === 'primary'`,
'[class.btn-secondary]': `color === 'secondary'`,
// ...
}
})
export class ButtonComponent {
@Input() size: ButtonSize = 'md';
@Input() shape: ButtonShape = 'default';
@Input() color: ButtonColor = 'primary';
@Input() fill: ButtonFill = 'solid';
@Input() expand: ButtonExpand = 'default';
}
My goal is to have all ng-zorro attributes and my own attributes on the <button> tag within consumer components. This will allow me to introduce new attributes to the native tag and customize the ant styles in specific scenarios.
In simple terms, I aim to utilize both [nzType] (from ng-zorro) and shape (from my ButtonComponent) on a <button> element.