Adding HTML content to a container in Angular 2 using TypeScript

Question

Adding HTML content to a container in Angular 2 using TypeScript

My goal is to add some HTML content to an element. After researching various solutions online, I came across many confusing and ineffective methods.

To achieve this using JavaScript, I can use the following code:

var d1 = document.getElementsByClassName('one');
d1.insertAdjacentHTML('beforeend', '<div class="two">two</div>');

Is there a way to accomplish the same task using typescript/angular2, specifically with RC5?

EDIT

The element with class .one is generated by an external JS script that cannot be modified.

javascript angular typescript

Answer 1

Answer №1

1.

<div class="first" [innerHtml]="htmlToAdd"></div>

this.htmlToAdd = '<div class="second">two</div>';

Check out In RC.1 some styles can't be added using binding syntax

Alternatively

<div class="first" #one></div>

@ViewChild('one') d1:ElementRef;

ngAfterViewInit() {
  d1.nativeElement.insertAdjacentHTML('beforeend', '<div class="second">two</div>');
}

or to avoid direct DOM manipulation:

constructor(private renderer:Renderer) {}

@ViewChild('one') d1:ElementRef;

ngAfterViewInit() {
  this.renderer.invokeElementMethod(this.d1.nativeElement', 'insertAdjacentHTML' ['beforeend', '<div class="second">two</div>']);
}

3.

constructor(private elementRef:ElementRef) {}

ngAfterViewInit() {
  var d1 = this.elementRef.nativeElement.querySelector('.first');
  d1.insertAdjacentHTML('beforeend', '<div class="second">two</div>');
}

Answer 2

1.

<div class="first" [innerHtml]="htmlToAdd"></div>

this.htmlToAdd = '<div class="second">two</div>';

Check out In RC.1 some styles can't be added using binding syntax

Alternatively

<div class="first" #one></div>

@ViewChild('one') d1:ElementRef;

ngAfterViewInit() {
  d1.nativeElement.insertAdjacentHTML('beforeend', '<div class="second">two</div>');
}

or to avoid direct DOM manipulation:

constructor(private renderer:Renderer) {}

@ViewChild('one') d1:ElementRef;

ngAfterViewInit() {
  this.renderer.invokeElementMethod(this.d1.nativeElement', 'insertAdjacentHTML' ['beforeend', '<div class="second">two</div>']);
}

3.

constructor(private elementRef:ElementRef) {}

ngAfterViewInit() {
  var d1 = this.elementRef.nativeElement.querySelector('.first');
  d1.insertAdjacentHTML('beforeend', '<div class="second">two</div>');
}

Answer 3

Answer №2

Introducing the latest feature in Angular - the powerful Renderer2

constructor(private renderer:Renderer2) {}

  @ViewChild('one', { static: false }) d1: ElementRef;

  ngAfterViewInit() {
    const d2 = this.renderer.createElement('div');
    const text = this.renderer.createText('two');
    this.renderer.appendChild(d2, text);
    this.renderer.appendChild(this.d1.nativeElement, d2);
  }

Answer 4

Introducing the latest feature in Angular - the powerful Renderer2

constructor(private renderer:Renderer2) {}

  @ViewChild('one', { static: false }) d1: ElementRef;

  ngAfterViewInit() {
    const d2 = this.renderer.createElement('div');
    const text = this.renderer.createText('two');
    this.renderer.appendChild(d2, text);
    this.renderer.appendChild(this.d1.nativeElement, d2);
  }

Answer 5

Answer №3

Here is an example of how you can achieve this:

customComponent.ts

htmlContent: string = "<h3>Some custom content.</h3>";

//This code contains HTML that needs to be rendered in TypeScript

customComponent.html

<div [innerHTML]="htmlContent"></div>

//This is how you display the HTML content from TypeScript in your template

Answer 6

Here is an example of how you can achieve this:

customComponent.ts

htmlContent: string = "<h3>Some custom content.</h3>";

//This code contains HTML that needs to be rendered in TypeScript

customComponent.html

<div [innerHTML]="htmlContent"></div>

//This is how you display the HTML content from TypeScript in your template

Answer 7

Answer №4

Discover a more Angular-focused approach for a superior solution.

Store your string in a variable within the .ts file
```
MyStrings = ["one","two","three"]
```

Incorporate *ngFor in the HTML file.

<div class="one" *ngFor="let string of MyStrings; let i = index">
     <div class="two">{{string}}</div>
 </div>

If you wish to dynamically add the div element, simply append more strings to the MyStrings array
```
myFunction(nextString){
    this.MyString.push(nextString)
 }
```

By clicking the button containing the myFunction(nextString), you are essentially adding another class="two" div, replicating the action of inserting it into the DOM using pure javascript.

Answer 8

Discover a more Angular-focused approach for a superior solution.

Store your string in a variable within the .ts file
```
MyStrings = ["one","two","three"]
```

Incorporate *ngFor in the HTML file.

<div class="one" *ngFor="let string of MyStrings; let i = index">
     <div class="two">{{string}}</div>
 </div>

If you wish to dynamically add the div element, simply append more strings to the MyStrings array
```
myFunction(nextString){
    this.MyString.push(nextString)
 }
```

By clicking the button containing the myFunction(nextString), you are essentially adding another class="two" div, replicating the action of inserting it into the DOM using pure javascript.

Answer 9

Answer №5

Angular 8 has brought a recent update that requires a static property to be included inside the @ViewChild() method, as mentioned in this link and here. In order to implement this change, you need to adjust your code like so:

@ViewChild('one') d1:ElementRef;

transform it into

// query results available in ngOnInit
@ViewChild('one', {static: true}) foo: ElementRef;

OR

// query results available in ngAfterViewInit
@ViewChild('one', {static: false}) foo: ElementRef;

Answer 10

Angular 8 has brought a recent update that requires a static property to be included inside the @ViewChild() method, as mentioned in this link and here. In order to implement this change, you need to adjust your code like so:

@ViewChild('one') d1:ElementRef;

transform it into

// query results available in ngOnInit
@ViewChild('one', {static: true}) foo: ElementRef;

OR

// query results available in ngAfterViewInit
@ViewChild('one', {static: false}) foo: ElementRef;

Adding HTML content to a container in Angular 2 using TypeScript

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Name or Title of a Polygon/Polyhedron Using Three.js

What is the best way to retrieve strings from an asynchronous POST request?

When is the best time to assign properties to mobx domain objects?

Dealing with unexpected modifications in a React class component

Executing the stop button in the browser with Webdriver IO

Failure to load dependencies for deprecated Angular2 router

Typescript: Verifying the type of an interface

I'm looking for some good .NET MVC frameworks that can help create dynamic AJAX applications

Decide on the chosen option within the select tag

Ensuring your app is compatible with older versions of Node.js: A guide

Determining the best use-case for a React framework like Next or Gatsby versus opting for Create React App

What is the best way to retrieve the IDs of selected items in jQuery selectables?

Unable to update state in my React app when clicking on a button

Unable to view the refreshed DOM within the specifications after it has been altered

Executing mocha using Typescript results in a TypeError [ERR_UNKNOWN_FILE_EXTENSION] because the file extension ".ts" is unrecognized

Error caused by the shouldDisableDate prop in MUI DatePicker's functionality

Generate Angular component unit tests that involve manipulating the DOM using TypeScript

Using node.js to import functions from another file

Determine the height of a DIV element and its contents using JQuery

JSON.stringify doesn't support circular structures in Loopback and mongodb, resulting in a TypeError