We help IT Professionals succeed at work.

Passing HTML button value to .html page in Angular 7

Paul Konstanski
on
249 Views
Last Modified: 2019-02-25
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

Comment
Watch Question

CERTIFIED EXPERT
Most Valuable Expert 2017
Distinguished Expert 2019
Commented:
This problem has been solved!
(Unlock this solution with a 7-day Free Trial)
UNLOCK SOLUTION
Paul KonstanskiProject Specialist

Author

Commented:
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 KonstanskiProject Specialist

Author

Commented:
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.
CERTIFIED EXPERT
Most Valuable Expert 2017
Distinguished Expert 2019

Commented:
You are welcome.
Paul KonstanskiProject Specialist

Author

Commented:
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.
CERTIFIED EXPERT
Most Valuable Expert 2017
Distinguished Expert 2019
Commented:
This problem has been solved!
(Unlock this solution with a 7-day Free Trial)
UNLOCK SOLUTION

Gain unlimited access to on-demand training courses with an Experts Exchange subscription.

Get Access
Why Experts Exchange?

Experts Exchange always has the answer, or at the least points me in the correct direction! It is like having another employee that is extremely experienced.

Jim Murphy
Programmer at Smart IT Solutions

When asked, what has been your best career decision?

Deciding to stick with EE.

Mohamed Asif
Technical Department Head

Being involved with EE helped me to grow personally and professionally.

Carl Webster
CTP, Sr Infrastructure Consultant
Empower Your Career
Did You Know?

We've partnered with two important charities to provide clean water and computer science education to those who need it most. READ MORE

Ask ANY Question

Connect with Certified Experts to gain insight and support on specific technology challenges including:

  • Troubleshooting
  • Research
  • Professional Opinions