Passing HTML button value to .html page in Angular 7

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';


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

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


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

  }

  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;
    
    this.pS.getpage(newPagecode)
      .subscribe((pagecodes: any) => {
        console.log("At check code return (1)");
        console.log(pagecodes);

        if (pagecodes.success) {
          console.log("(1) At send code success");
          this.lessonhead = pagecodes.data.head;
          pagecodes.data.safebody = this.sanitizer.bypassSecurityTrustHtml(pagecodes.data.body);
          this.lessonbody = pagecodes.data.safebody;
          this.lessonbody = '<button>Continue</button>';
//          this.lessonbody = pagecodes.data.body;
          this.lessonbutton = pagecodes.data.button;
        }   
        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");
          this.router.navigate(['/']);
        }  
        
      });
  }

  public executeSelectedChange = (event) => {
    console.log(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>
    </div>    
</section>