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:
And in the HTML I'm using this:
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:
And the full .html file is:
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>
* DOMHTMLAngular
Last Comment
Julian Hansen
ASKER CERTIFIED SOLUTION
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.
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:
Thanks Julian for helping me solve the most difficult part.
this.lessonbody = '<button class="mat-raised-button">Continue</button>';
Thanks Julian for helping me solve the most difficult part.
You are welcome.
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
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.
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.
Open in new window
In my .html file I have this "test" followed by a hard coded line. That looks like this.Open in new window
When I inspect the code it shows them being rendered as:<span class="mat-button-wrapper"
<div class="mat-button-ripple mat-ripple" matripple="" ng-reflect-centered="false
<div class="mat-button-focus-ov
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.