How to get specified htmlelement in my view using angular2 and typescript

Question

I am facing a problem. I want to get an htmlelement in my view in angular2 this is my view

<p>
    <button (click)="setJSON()">Set JSON</button>
    <button (click)="getJSON()">Get JSON</button>
</p>
<div id="jsoneditor">

</div>

I would like to access the jsoneditor in my class and pass it to my JSONEditor https://github.com/josdejong/jsoneditor/blob/master/docs/api.md to tell it where to rendering the editor.

This is my class:

export class JsonComponent {

    container: HTMLElement;
    editor1: JSONEditor;
    options;

    constructor(public router: Router, public element: ElementRef) {

        this.container = this.element.nativeElement

        this.options = { "mode": "tree", "search": true };            
        this.editor1 = new JSONEditor(this.container,this. options);
        var json = {
            "Array": [1, 2, 3],
            "Boolean": true,
            "Null": null,
            "Number": 123,
            "Object": { "a": "b", "c": "d" },
            "String": "Hello World"
        };
        this. editor1.set(json);
        this. editor1.expandAll();
    }                  

    setJSON() {
        alert("setJson");
    }
    getJSON() {
        alert("getJson");
    }
}

ElementRef :Represents a location in a View that has an injection, change-detection and render context associated with it. but i don't have all these(injection etc) I just need to tell the editor where to show the editor. — Bob Zhang
– Bob Zhang, Commented Jan 20, 2016 at 3:08

Massimiliano Kraus · Accepted Answer · 2018-11-18 00:43:48Z

9

Maybe something like this:

import {Component, ElementRef, Inject, OnInit} from 'angular2/core';

@Component({
    selector: 'my-component',
    templateUrl: './my-template.html'
})
export class SomeComponent implements OnInit {
    elementRef: ElementRef;

    constructor(@Inject(ElementRef) elementRef: ElementRef) {
        this.elementRef = elementRef;
    }

    ngOnInit() {
        console.log(this.elementRef.nativeElement.querySelector('#jsoneditor'));
    }
}

This should locate the editor element from the component element.

edited Nov 18, 2018 at 0:43

Massimiliano Kraus

3,8925 gold badges32 silver badges51 bronze badges

answered Jan 20, 2016 at 3:15

TGH

39.4k13 gold badges106 silver badges140 bronze badges

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

2 Comments

Bob Zhang Over a year ago

didn't work nativeElement does not have queryselector() method.

Pierre-Olivier Pignon Over a year ago

According to Angular documentation, the use of ElementRef is risky. Prefer Renderer2. Example : const elementToRemove = this.renderer.selectRootElement('#id-of =-element'); You can you a class selector as well

Hien Nguyen · Accepted Answer · 2019-06-28 05:25:01Z

You can use Template reference variables <div #editor id="jsoneditor">

HTML

<p>
    <button (click)="setJSON()">Set JSON</button>
    <button (click)="getJSON()">Get JSON</button>
</p>
<div #editor id="jsoneditor">
</div>

TS

export class AppComponent {
  @ViewChild('editor') editor: ElementRef;

  constructor(public element: ElementRef) {
  }

  setJSON() {

    var json = {
      "Array": [1, 2, 3],
      "Boolean": true,
      "Null": null,
      "Number": 123,
      "Object": { "a": "b", "c": "d" },
      "String": "Hello World"
    };

    this.editor.nativeElement.innerHTML  = json.String;
  }
  getJSON() {
    alert("getJson");
  }
}

https://stackblitz.com/edit/angular-template-reference-variable?file=src/app/app.component.html

Collectives™ on Stack Overflow

How to get specified htmlelement in my view using angular2 and typescript

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related