Avatar of Paul Konstanski
Paul Konstanski
Flag for United States of America asked on

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

Open in new window


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

Open in new window


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);
  }
}

Open in new window


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>

Open in new window

* DOMHTMLAngular

Avatar of undefined
Last Comment
Julian Hansen

8/22/2022 - Mon
ASKER CERTIFIED SOLUTION
Julian Hansen

THIS SOLUTION ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
See Pricing Options
Start Free Trial
GET A PERSONALIZED SOLUTION
Ask your own question & get feedback from real experts
Find out why thousands trust the EE community with their toughest problems.
Paul Konstanski

ASKER
Okay, that was very helpful to get me started. But I now realize I gave the "simple" version to explain what I was doing, but when I now try my more complex version using Angular Material it doesn't work.  

What I'm trying to pass is an Angular Material Button.  So the value I provided for you to show me how to pass is what's on line 1 below. But what I want to pass is line 2 of this code snippet.
this.lessonbody = '<button>Continue</button>';
this.lessonbody = '<button mat-raised-button>Continue</button>';

Open in new window

In my .html file I have this "test" followed by a hard coded line.  That looks like this.
        <div [innerHTML]="lessonbody | safeHtml"></div>
        <button mat-raised-button color="accent">{{lessonbutton}}</button>

Open in new window

When I inspect the code it shows them being rendered as:

<button mat-raised-button="">Continue</button>
<span class="mat-button-wrapper">Continue</span>
<div class="mat-button-ripple mat-ripple" matripple="" ng-reflect-centered="false" ng-reflect-disabled="false" ng-reflect-trigger="[object HTMLButtonElement]"></div>
<div class="mat-button-focus-overlay"></div>

So although I'm sending the code as "mat-raise-button" that is not rendering correctly. I assume that has to do with the order in which things are being read. Is that correct?

Is there a solution that would allow the button to show up as an Angular Material Button or will I have to render this button using class characteristics.  

Thanks.
Paul Konstanski

ASKER
I just figured out how to do the second part. That is to simply pass it as a "class"  So I changed my second line to this and it works great:

this.lessonbody = '<button class="mat-raised-button">Continue</button>';

Open in new window


Thanks Julian for helping me solve the most difficult part.
Julian Hansen

You are welcome.
All of life is about relationships, and EE has made a viirtual community a real community. It lifts everyone's boat
William Peck
Paul Konstanski

ASKER
If you have a minute sometime can you give me a simple paragraph explanation of "Pipes."  I haven't really understood them. Or point me to a Web site that you feel explains them well.
SOLUTION
Julian Hansen

THIS SOLUTION ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
See Pricing Options
Start Free Trial
GET A PERSONALIZED SOLUTION
Ask your own question & get feedback from real experts
Find out why thousands trust the EE community with their toughest problems.