I noticed that the button of Clarity design system does not contain a wrapper element in the DOM. I like this for various reasons (clarity – no pun intended, accessibility).

I’ve looked around for solutions to do such a thing. Some solutions risk impacting Angulars change detection and other mechanics.

The solution Clarity chose seems very clean. But I can’t get it to work: best result I managed was to still get the wrapper element and the contents placed as sibling in the DOM.

Here is Clarity’s code for the button:
https://github.com/vmware-clarity/ng-clarity/blob/main/projects/angular/src/button/button-group/button.ts
And this is how it renders:

As far as I can see how they did it:

• put component contents in a ng-template with a ref
• link the ref to a viewchild

@Component({
  selector: 'clr-button',
  template: `
    <ng-template #buttonProjectedRef>
      <button

export class ClrButton implements LoadingListener {
  @Output('click') _click = new EventEmitter<boolean>(false);

  @ViewChild('buttonProjectedRef', { static: true }) templateRef: TemplateRef<ClrButton>;

Strangely I can’t see where the property name of the viewchild (“templateRef”) is being used.