CODEWITHSUNDEEP
angularangular-components
Anna
Anna

Reputation: 1689

Angular 4: unable to create object of a component

I am using a 3rd party component which is responsible to upload files. I am importing this component in my component as below, but the problem is I am never going inside the if loop. Can anyone guide me how to create an object of UploadComp?

import { UploadComp } from com.package.folder;

export class showUpload {
    @ViewChild (UploadComp) uploadCompObj: UploadComp;


constructor(){
    if(this.uploadCompObj){     //I am never going inside this if
        this.uploadCompObj.popup = true;
    }
} }

The upload component is as below:

export declare class UploadComp implements Oninit{
    popup: boolean;
    overlay: boolean;
    fileName: string;
    errorMsg: any[];
}

Upvotes: 0

Views: 164

Answers (3)

Rahul
Rahul

Reputation: 2128

@ViewChild() is not a part of importing component class it is a part of getting the child component from your component.html

I have couple of changes for you if it works great use it

Remove your @ViewChild() from the component class and your code should read like this - 

uploadCompObj: UploadComp = {
    popup: true,
    overlay: true,
    fileName: null,
    errorMsg: null
};

Next you need to remove declare from the component class you are trying to import - I'm not sure why you used declare but just by exporting a component class you can create an object, if its not an error prob please don't remove it

Now finally you can set value to your properties both in constructor and onInit() but the best practice is to change value in your onInit() try to access there - hope it works

Thanks - Happy coding !!

Upvotes: 0

UI_Dev
UI_Dev

Reputation: 200

Use AfterViewInit() life cycle and use the if condition 

import { UploadComp } from com.package.folder;

        export class showUpload {
            @ViewChild (UploadComp) uploadCompObj: UploadComp;
        }

        constructor(){}
        ngAfterViewInit() {
           if(this.uploadCompObj){     //I am never going inside this if
                this.uploadCompObj.popup = true;
            }
        }
       }

Upvotes: 2

Sachila Ranawaka
Sachila Ranawaka

Reputation: 41445

I think you have to use angular lifecycle hook. Constructor gets called before angular settle down. So use the ngOnInit

ngOnInit(){
    if(this.uploadCompObj){      
        this.uploadCompObj.popup = true;
    }
}

Upvotes: 0

Related Questions