Get components element reference instead of the component reference in template

Question

I need to get the kendo-maskedtextbox container element ref, to properly anchor a hover component to it. However i get the components instance when using #cprNrAnchor, is there any way to do it, or am i out of luck seeing it being private in a third party component.

<div class="form-group" fxLayout="row" fxLayoutAlign="start center">
                <label fxFlex="150px" class="form-control-label">CPR-nr.</label>
                <kendo-maskedtextbox #cprNrAnchor mask="000000-0000" class="form-control" fxFlexOffset="20px" formControlName="cprNr"></kendo-maskedtextbox>
                <control-messages [anchor]="cprNrAnchor" [control]="personinfoForm.get('cprNr')"></control-messages>
            </div>

try like this `@ViewChildren('cprNrAnchor', {read: ElementRef})` — Max Koretskyi, Jun 15 '17 at 16:19
Unfortunate that requires me to have one for each form field then, in a form — Blom, Jun 15 '17 at 16:41
like this `@ViewChildren(KendoMaskedTextBoxComponent, {read: ElementRef}) comps;` then? — Max Koretskyi, Jun 15 '17 at 16:48

score 0 · Answer 1 · answered Jun 17 '17 at 19:22

You can either use the MaskedTextBox's input field as anchor, e.g.:

<form #templateForm="ngForm" novalidate>
        <p>Enter valid postcode (A9 9AA)</p>
        <kendo-maskedtextbox #mtb
            name="value1"
            [(ngModel)]="value"
            [mask]="mask"
            [maskValidation]="maskValidation"
        ></kendo-maskedtextbox>
        <button [disabled]="!templateForm.valid" type="submit" class="k-button">Submit</button>
    </form>
    <kendo-popup 
      [popupClass]="'content popup'" 
      [anchor]="mtb.input" 
      (anchorViewportLeave)="show = false" 
      *ngIf="!templateForm.valid">
        Invalid input content
    </kendo-popup>

Sample 1

... or get a reference to the container via the ViewChild reference in the AfterViewInit handler, and set it as anchor for the popup, e.g.:

<kendo-maskedtextbox #mtb...

@ViewChild('mtb') private mtb;
//...    
ngAfterViewInit() {
  this.mtbWrapper = this.mtb.input.nativeElement.parentElement;
}
<kendo-popup 
      [popupClass]="'content popup'" 
      [anchor]="mtbWrapper"

Sample 2

Get components element reference instead of the component reference in template

1 Answers1