How to override stencil component template in Angular 2?

Question

I use the https://github.com/telekom/scale components library (not writing my own library). All components there were built using Stencil and they can be used without problems.

However, I need to change a Stencil component html a bit and add an additional label for example.

The problem is that I cannot find out how to extend Stencil component and override its rendering template.

I know I can just simply reconstruct the template by the sources of render method but I hope there is a better way.

Answer 1

Lets say that we have a component with the bla-bla-tag selector. There are a couple of options that might be applied depending on your case.

Case 1: Prepend some stuff inside nested component

<bla-bla-tag>
  <span>I want to see it before inner component stuff</span>
</bla-bla-tag>

Case 2: Modify DOM

The problem was to wait until inner component fully loads its view.

Fortunately, there was a hook in HTMLStencilElement interface: componentOnReady(): Promise<this>;.

Stencil docs have the following example:

export class HomeComponent {
  @ViewChild(TestComponent) myTestComponent: ElementRef<TestComponent>;

  async onAction() {
    await this.myTestComponent.nativeElement.testComponentMethod();
  }
}

So the end solution for me was to access the stencil component via ViewChild and then use the hook from above example.

View:

<scale-text-field
            #input
...
        ></scale-text-field>

Component code:

@Component({
    selector: 'bla-bla-tag',
    templateUrl: './some.component.html',
    styleUrls: ['./some.component.scss'],
    changeDetection: ChangeDetectionStrategy.OnPush,
    encapsulation: ViewEncapsulation.None
})
export class SomeComponent implements AfterViewInit {

    @ViewChild('input') textField!: ElementRef<HTMLScaleTextFieldElement>;

    ngAfterViewInit() {
        this.textField.nativeElement.componentOnReady().then(scaleTextField => {
// any dom modifications
        })
    }
}

Also, I needed to work with some css classes so to prevent Angular from encapsulating them: ViewEncapsulation.None