0

<button alloy #initialFocus></button>

when accessed via:


    ngOnInit(): void {
      this.initalFocusButton.focus();  // undefined unless it's an ElementRef
    }

comes up undefined in OnInit and AfterViewInit(ng8 so it doesn't matter). I've tried various combinations of read and selector, but it can only be queried as an ElementRef. Is there a limitations to querying a directive on a native element?

AlloyButtonDirective:

@Directive({
    selector: `button [alloy]`
})
export class AlloyButtonDirective implements AfterViewInit, OnDestroy {
    private unsubscribe = new Subject();

    // Default mode: Standard
    private currentStyle = Styles.Standard;

    @HostBinding(`class.alloy-button-standard`) @Input('standard')
    get isStandard() { return this.currentStyle === Styles.Standard; }
    set isStandard(value: any) {
        if (value !== false) {
            this.currentStyle = Styles.Standard;
        }
    }
    // More styles and a focus monitor.
    ...
Anthony
  • 7,638
  • 3
  • 38
  • 71

1 Answers1

0

Probably directive is not picked up as a directive - so it is just another HTML attribute. Add default constructor to it and check if it is called.

Antoniossss
  • 31,590
  • 6
  • 57
  • 99
  • The styling is applied to the element, so the directive is constructed, but it isn't the directive by default and is undefined if I try to `read` the directive. – Anthony Nov 12 '19 at 17:21
  • You can try providing stackblitz example, someone will surely help you. – Antoniossss Nov 12 '19 at 19:28