Access local variable in Component fails in Angular 2

Question

I want to get the DOM element and initialize a JSON Editor without using ElementRef.

Code:

import {Component, ViewChild} from 'angular2/core';

@Component({
    selector: 'json-editor',
    template: `
        <div #container class="json-editor-container"></div>
    `
})
export class JSONEditorComponent implements OnChanges {
    @ViewChild('container') private container = null;

    constructor() {
    }
}

No matter how, this.container is still null. Which part of code I wrote is wrong?

Solution:

Before you access the ViewChild attribute, you must confirm the view has initialized. Also @VarChild returns ElementRef, if you want to process it further requires DOMElement, please use nativeElement attribute which is a Element

import {Component, ViewChild} from 'angular2/core';

@Component({
    selector: 'json-editor',
    template: `
        <div #container class="json-editor-container"></div>
    `
})
export class JSONEditorComponent implements OnChanges {
    @ViewChild('container') private container = null;
    private isViewInitialized: boolean = false;

    constructor() {
    }

    ngAfterViewInit() {
        this.isViewInitialized = true;
    }

    triggeredFromParentComponentOrWhatever() {
        if (this.isViewInitialized) {
            // Should work
            console.log(this.container.nativeElement);
        }

        // Might not work as view might not initialized
        console.log(this.container.nativeElement);
    }
}

Well for one you are not actually passing anything to @ViewChild, have you tried adding 'container' to your directives and trying it? Also you are then instantiating container to null afterwards, which will always make it null. Also could maybe you explain exactly what you are trying to do? — Morgan G
– Morgan G, Commented Mar 3, 2016 at 4:06
I'm still not entirely sure what you are trying to do, what it appears the question you are looking at was trying to do was get data from a 'parent' element via input and apply it to the HTML <audio control> element which is his 'child' element. I am quoting those because I would not exactly call it a parent or child element in that specific case. Are you just trying to get and submit data? If you are, this is a backwards way of doing it. So maybe explain what you are trying to do better please. — Morgan G
– Morgan G, Commented Mar 3, 2016 at 4:26
Also here is the plunker put out by Angular2 for how @ViewChild works plnkr.co/edit/eNsFHDf7YjyM6IzKxM1j?p=preview — Morgan G
– Morgan G, Commented Mar 3, 2016 at 4:27

Günter Zöchbauer · Accepted Answer · 2016-03-03 05:19:45Z

1

You can't access container in the constructor. It is only set just before ngAfterViewInit()

ngViewInit() {
  container.nativeElement...
}

edited Mar 3, 2016 at 5:19

answered Mar 3, 2016 at 4:33

Günter Zöchbauer

661k235 gold badges2.1k silver badges1.6k bronze badges

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

4 Comments

tom10271 Over a year ago

ngAfterViewInit() { console.log(this.container); }Actually it is still not working

Günter Zöchbauer Over a year ago

Do you get any error message? I don't think it makes a difference, but can you try removing = null? There might be something else wrong in your app. What do you want to do with the element reference anyway? Can't you do that with binding?

Günter Zöchbauer Over a year ago

What fixed it in the end?

tom10271 Over a year ago

I am sorry actually I made mistake, it works. Sorry for leaving comment without confirmation...

Collectives™ on Stack Overflow

Access local variable in Component fails in Angular 2

Code:

Solution:

1 Answer 1

4 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

Code:

Solution:

1 Answer 1

4 Comments

Linked

Related