How can I read and write an Angular component variable from Javascript?

Question

I have been created a component with a form and a file uploader.

I need to modify a typescript variable to disabled a "Done" button. I mean, i need to prevent that my form will submit before the upload has done.

code:

(follow the uploading variable)

import { Component, OnInit} from '@angular/core';
declare var $: any;

@Component({
    selector: 'app-child-add-moment',
    templateUrl: './child-add-moment.component.html',
    styleUrls: ['./child-add-moment.component.css']

})
export class ChildAddMomentComponent implements OnInit {

    private FILE_UPLOAD_URL = 'http://localhost/uploader/ajax_upload_file.php';

    uploading = false;
    uploadedFiles = 0; // I need change this variable from $('#filer_input2') success function

    constructor() { }

    ngOnInit() {
        this.initializeUploader();
    }

    initializeUploader(): void {

        $('#filer_input2').filer({
            changeInput: '<a class="btn btn-primary">Add photo</a>',
            showThumbs: true,
            theme: 'dragdropbox',
            templates: {
            box: '<ul class="jFiler-items-list jFiler-items-grid"></ul>',
            item: '<li class="jFiler-item">{{fi-name}}</li>',
            itemAppend: '<li class="jFiler-item">{{fi-name}}</li>',
            progressBar: '<div class="bar"></div>',
            itemAppendToEnd: false,
            canvasImage: true,
            removeConfirmation: true,
            _selectors: {
                list: '.jFiler-items-list',
                item: '.jFiler-item',
                progressBar: '.bar',
                remove: '.jFiler-item-trash-action'
            }
        },
        uploadFile: {
            url: this.FILE_UPLOAD_URL,
            data: null,
            type: 'POST',
            enctype: 'multipart/form-data',
            synchron: true,
            beforeSend: function() {

                // This show FALSE value but this value is not from "uploading" var from the component. 
                console.log(this.uploading);

                if (!this.uploading) {
                    this.uploadedFiles = 0;
                }

                // I set this variable to TRUE to DISABLE some buttos from my template. But this setter, dont change the value of the "uploading" variable from the component.
                this.uploading = true;

            },
            success: function(data, itemEl, listEl, boxEl, newInputEl, inputEl, id)
            {
                this.uploadedFiles++;

                const filerKit = inputEl.prop('jFiler');

                filerKit.files_list[id].name = new_file_name;

                if (filerKit.files_list.length === this.uploadedFiles) {
                    console.log('All files have been uploaded');

                    // When upload has been finished, I set this variable to FALSE to ENABLE some buttons again.
                    this.uploading = false;

                    this.uploadedFiles = 0;
                }

            },
            error: null,
            onComplete: null
        },   
        dialogs: null,
        captions: {
            button: 'Choose Files',
            feedback: '"Choose files To Upload',
            feedback2: 'files were chosen',
            drop: 'Drop file here to Upload',
            removeConfirmation: '"Are you sure you want to remove this file?',
            errors: null
        }
    });

}

How can I modify "uploading" variable from "beforeSend" and "success" functinos?

Something important: I want to bind my var "uploading" with the template.

It is for enable and disable a button:

<button type="button" class="btn btn-primary" [class.disabled]="uploading"> Add </button>

Thanks

once success change the this.loading to done and in your html Done button condition put a condition like [hidden]="loading" — Aniruddha Das
– Aniruddha Das, Commented Jan 10, 2018 at 16:54
Does this Jquery Library create the button you want to disable? changeInput: '<a class="btn btn-primary">Add photo</a>' — jriver27
– jriver27, Commented Jan 10, 2018 at 16:56

Marventus · Accepted Answer · 2018-01-10 20:50:01Z

2

You need save a reference to the class inside the class method and then call it from inside the callback:

At the class method level:

export class ChildAddMomentComponent implements OnInit {
    uploading = false;

    initializeUploader(): void {
        var self = this;
        // some code
    }
}

Inside your callback:

  self.uploading = true;

edited Jan 10, 2018 at 20:50

answered Jan 10, 2018 at 17:01

Marventus

8491 gold badge7 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Giancarlo Sereni Over a year ago

Thanks for your answer but when I declare "self.uploading = true; " in my callback, typescript compiler says: "Property 'uploading' does not exist on type 'Window'."

Marventus Over a year ago

Ok, in that case, try this inside your initializeUploader method: var self = this;

Giancarlo Sereni Over a year ago

It Works @Marventus !! I added "const self = this;" in initializeUploader and that compiler error is gone. Thanks!

Marventus Over a year ago

Great! I have modified the answer accordingly.

Collectives™ on Stack Overflow

How can I read and write an Angular component variable from Javascript?

code:

1 Answer 1

At the class method level:

Inside your callback:

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

code:

1 Answer 1

At the class method level:

Inside your callback:

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related