troubleshooting Question

Passing HTML button value to .html page in Angular 7

Avatar of Paul Konstanski
Paul KonstanskiFlag for United States of America asked on
* DOMHTMLAngular
6 Comments2 Solutions279 ViewsLast Modified:
In Angular 7, I am trying to determine how to pass a button value through from the typescript  to the html page.

This is the most simple way I can illustrate what I would like to do.  

The .ts file contains this:
this.lessonbody = '<button>Continue</button>';

And in the HTML I'm using this:
        <div [innerHTML]="lessonbody" class="mainbody"></div>

Is there a way to pass that button tag from the .ts file to the .html?

What I am trying to accomplish here is send a code to an API that pulls information from a database and then the whole page is painted from that data. But in order to do this, I need to pass the full html code for things like buttons.

My full code for the .ts file is here:
import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { FormBuilder, FormGroup, Validators, } from '@angular/forms';
import { DomSanitizer } from '@angular/platform-browser';

import { Pagecode } from "../../models/pagecode";
import { PagecodeService } from '../../services/pagecode.service';

  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.scss']
export class HomeComponent implements OnInit {

  lessonhead = "";
  lessonbody = "";
  lessonbutton = "";
  pgref = "0.1";
  loading = false;
    private fb: FormBuilder, 
    private pS: PagecodeService, 
    private sanitizer: DomSanitizer, 
    private router: Router) { } 

  ngOnInit() {
    this.loading = true;
    this.pagecodes = undefined;


  pagecodes: Pagecode[];
  getPage(pgref: string): void {
    console.log("at getpage with Page Reference ["+pgref+"]");
    pgref = pgref.trim();
    if (!pgref) { return; }
    const newPagecode: Pagecode = { pgref } as Pagecode;
      .subscribe((pagecodes: any) => {
        console.log("At check code return (1)");

        if (pagecodes.success) {
          console.log("(1) At send code success");
          this.lessonhead =;
 = this.sanitizer.bypassSecurityTrustHtml(;
          this.lessonbody =;
          this.lessonbody = '<button>Continue</button>';
//          this.lessonbody =;
          this.lessonbutton =;
        else {
          console.log("(2)Failure return from at API");
          alert("There was a communications error (sI.168). Please try again. If issue persists, please contact support");

  public executeSelectedChange = (event) => {

And the full .html file is:
<section fxLayout fxLayoutAlign="center center">
    <div fxFlex="500px" fxFlex.xs="100%">
        <div [innerHTML]="lessonhead" class="mainpoint"></div>
        <div [innerHTML]="lessonbody" class="mainbody"></div>
        <button mat-raised-button class="jumbo" color="accent">{{lessonbutton}}</button>
Join our community to see this answer!
Unlock 2 Answers and 6 Comments.
Start Free Trial
Learn from the best

Network and collaborate with thousands of CTOs, CISOs, and IT Pros rooting for you and your success.

Andrew Hancock - VMware vExpert
See if this solution works for you by signing up for a 7 day free trial.
Unlock 2 Answers and 6 Comments.
Try for 7 days

”The time we save is the biggest benefit of E-E to our team. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange.

-Mike Kapnisakis, Warner Bros