Link to home
Start Free TrialLog in
Avatar of Paul Konstanski
Paul KonstanskiFlag 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

ASKER CERTIFIED SOLUTION
Avatar of Julian Hansen
Julian Hansen
Flag of South Africa image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of 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.
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.
You are welcome.
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
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial