CODEWITHSUNDEEP
angulartypescriptangular-directive
SjVnyk
SjVnyk

Reputation: 758

Cannot read property 'nativeElement' of undefined Angular 6

I am trying to create a custom Spinner component for my App, So I have created

spinner.component.ts

export class SpinnerComponent implements AfterViewInit {

    @ViewChild("spinner") spinner: ElementRef;

    constructor() { }

    ngAfterViewInit(): void {
        this.spinner.nativeElement.style.display = "none";
    }

    public show = (): void => { this.spinner.nativeElement.style.display = "block"; };

    public hide = (): void => { this.spinner.nativeElement.style.display = "none"; };

}

spinner.component.ts

<img #spinner src="assets/images/dotSpinner.gif" class="loading"/>

And I'm trying to control this spinner in my other components, like

sample.component.ts

import { SpinnerComponent } from "../spinner/spinner.component";

export class SimpleComponent {

    private spinner: SpinnerComponent = new SpinnerComponent();

    constructor() {}

    actionHandler = (data: any): void => {
        this.spinner.show();
        this.clientActionService.subscribe(
            data => {
                this.spinner.hide();
                this.clientAction = data;
            },
            err => {
                this.spinner.hide();
            }
        );
    }

}

But I'm getting error ERROR TypeError: Cannot read property 'nativeElement' of undefined at SpinnerComponent.show

Upvotes: 5

Views: 6674

Answers (3)

Bhavin
Bhavin

Reputation: 501

spinner.component.ts // html code

 <img *ngIf="isShowSpinner" src="assets/images/dotSpinner.gif" class="loading"/>

 <button (click)="show()"> Show </button>
 <button (click)="hide()"> Hide </button>

spinner.component.ts //typescript code

public isShowSpinner: boolean = false;
constructor() { }

public show() { this.isShowSpinner = true; }    
public hide() { this.isShowSpinner = false; }

Please try this.

Upvotes: 1

Chellappan வ
Chellappan வ

Reputation: 27293

Use forwardRef

forwardRef is used when the token which we need to refer to for the purposes of DI is declared, but not yet defined. It is also used when the token which we use when creating a query is not yet defined.

   import { SpinnerComponent } from "../spinner/spinner.component";   
    export class SimpleComponent {   
        constructor(constructor(@Inject(forwardRef(() => SpinnerComponent )) private ref:any)) {}

        actionHandler = (data: any): void => {
            this.ref.show();
            this.clientActionService.subscribe(
                data => {
                    this.ref.hide();
                    this.clientAction = data;
                },
                err => {
                    this.ref.hide();
                }
            );
        }

    }

Upvotes: 0

Vivek Kumar
Vivek Kumar

Reputation: 5040

If you want workaround then

<img
    [ngStyle]="{'display': displayVal}"
    src="assets/images/dotSpinner.gif"
    class="loading"/>

Typescript code

display = "none";
public show = (): void => { this.displayVal = "block"; };
public hide = (): void => { this.displayVal = "none"; };

Upvotes: 0

Related Questions