Unending Angular 2 HTML Fusion

I am facing an issue where I need to add a button to an HTML template that directs users to an external website. However, Google Chrome displays the following warning when reading the HTML:

WARNING: sanitizing HTML stripped some content (see http://g.co/ng/security#xss).

It appears that Angular 2's innerHTML attribute does not support recursive HTML bindings.

Below is the code snippet causing the problem:

<ion-col width-80 innerHtml="{{ slide.content + '<p><button round full (click)=`' 
+ slide.button.url +'`>'+slide.button.text+'</button>' }}"></ion-col>

The (click) attribute is getting deleted and only (slide.button.text) is being displayed as plain text.

Is there any workaround for this issue?

The structure of the slide object is as follows:

{
    img: 'img/picture.png',
    content: `sometext`,
    button : {
        url: `http://www.foo.com`,
        text: `Site foo`
    }
}
angulartypescriptionic-frameworkionic2angular2-template

Answer №1

NOTE: My knowledge of the "ion" element is limited, so I have replaced it with an "HTML control." Additionally, I have substituted the "button" for a link ("a") control.

To achieve this, you can utilize the DomSanitizationService as illustrated below:

For a demonstration, please refer to: http://plnkr.co/edit/y2BXvIO8egNxJPmM3j43?p=preview

//app.component.ts file
import {Component} from '@angular/core'
import {DomSanitizationService} from '@angular/platform-browser';

@Component({
  selector: 'my-app',

  template: `
    <span [innerHTML]="myHTML"></span>
  `,
})

export class AppComponent {
  slide={
    img: 'img/picture.png',
    content: `sometext`,
    button : {
        url: `http://www.foo.com`,
        text: `Site foo`
    }
  };

  unsafeUrl='<p><a href='+`${this.slide.button.url}`+'>'+`${this.slide.button.text}`+'</a></p>';

  constructor(sanitizer: DomSanitizationService) {
       this.myHTML= sanitizer.bypassSecurityTrustHtml(this.unsafeUrl);
  }
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Removing a nested data object in Angular with NGXS

I have successfully implemented the get and delete functions for posts in my Angular app. However, I am facing issues when trying to delete a comment within a post using NGXS. How can I access the comment inside the post in order to delete it? Here's ...

angularangular6angular7ngxsangular-state-managmement

Global Enum in Typescript that is Optimized for Inlining during Compilation

I'm facing a challenge with an enum that is widely used in my project. Having to import it into every file is becoming cumbersome. Is there a way to define the enum in the .d.ts file so that it automatically gets included when compiled to Javascript? ...

typescriptenums

Encountering Error 500 when refreshing page in Angular 6 deployed on App Engine

My Angular 6 app deployed on App Engine is experiencing navigation issues. Whenever I reload a page, an error message is displayed: Error: Server Error The server encountered an error and could not complete your request. Please try again in 30 seconds. ...

angulargoogle-app-engine

Dealing with asynchronous data in ngOnInit in Angular 4 when routing with parameters: tips and tricks

I'm currently facing an issue with loading data from my web api controller. The problem lies in the fact that I am using my API service, which is invoked from the ngOnInit function of the component. However, the view remains empty as the data retrieva ...

c#angularsql-server-2014-expressasp.net-core-1.1

Navigate to the previous page

What is the best way to navigate back to the last page in Angular 2? Can it be done like this? this._router.navigate(LASTPAGE); For instance, if page C includes a Go Back button, From Page A to Page C, clicking it will take you back to Page A. Fro ...

angularangular2-routing

Issue with maintaining session persistence in Angular 7 and Express

I am currently facing an issue with my Angular 7 app connecting to an Express API backend where the session doesn't seem to persist. Within Express, I have set up the following endpoint: router.get('/getsession', function(req, res) { c ...

angularexpressangular7

How should the superclass constructor of `MatDialog` be invoked when working with multiple classes?

When dealing with multiple features in my ts file, I decided to split them into separate classes. constructor( ) { super(MatDialog); } Encountered error: Argument of type 'typeof MatDialog' is not assig ...

angulartypescriptecmascript-6

Deliver output data from Spring to Angular

I am working on a microservice in Spring that needs to return a value distinguishing between users and admins to Angular. So far, I have managed to return a boolean value, but I am struggling to change it to work with strings or any other data type. I trie ...

angularspringspring-boothttppost

Issue with displaying pictures in Ionic 2 Native Camera

As mentioned in the title, I am facing an issue where the picture is not displayed after taking a photo using the camera native function. I am attempting this on Android 5.0. Please let me know if you require any additional information. Here is the code ...

angularionic2

Issue with Typescript Conditional Type not being functional in a function parameter

For a specific use-case, I am looking to conditionally add a key to an interface. In attempting to achieve this, I used the following code: key: a extends b ? keyValue : never However, this approach breaks when a is generic and also necessitates explicit ...

typescript

I'm curious as to why I am receiving an empty array as a response when I send a post request to the API

I am experiencing an issue while sending data to an API using a post method. I have structured the data in an object as per the server's requirements, but upon posting the object to the API, I receive a response with a status of 200 and an empty array ...

angulartypescript

What is the best way to hide the button when a user is viewing their own profile in an Angular application?

Each user has their own profile on the platform. A unique feature allows users to send messages by clicking a button when viewing other profiles. However, an issue arises where this messaging button also appears on a user's own profile. Is there a way ...

htmlangulartypescriptangular6

Angular 5 provides a feature where a button can be used to redirect to a

Hey there! I am currently diving into the world of Angular 5 for the first time and I've run into a bit of a roadblock. I'm trying to figure out how to redirect from one page to another using a button click. Here's the code snippet I have: ...

asp.netangularangular5

When the button is clicked, a fresh row will be added to the table and filled with data

In my table, I display the Article Number and Description of werbedata. After populating all the data in the table, I want to add a new article and description. When I click on 'add', that row should remain unchanged with blank fields added below ...

angulartypescripthtml-tabledynamic-tables

Issues with style not loading properly within innerHTML in Angular2

Currently, I am in the process of developing a page using Angular2/4 that includes a left navigation bar. To achieve reusability, I have separated this left menu into its own component and nested it within the main component. The objective is to utilize th ...

htmlangulartypescriptrenderer

Is there a way to retrieve the value of an option passed by serverless CLI in serverless.ts file?

As I explored the serverless framework with serverless.ts for configuration, a certain question came to mind. When utilizing the serverless CLI, passing values can be done in the following way: serverless offline --stage prod In the serverless.yml file, ...

typescriptyamlserverless

In React Typescript, the input type="checkbox" does not show any value in the value attribute

I'm facing an issue with displaying text next to a checkbox in React Typescript. When I try to use the value attribute, it doesn't seem to work as expected. Also, attempting to set innerHTML throws an error stating that input is a void element ta ...

htmlreactjstypescriptreact-typescript

Having trouble setting up tailwind css for my Angular project, need some help

Initially, I was referencing this article (along with others): https://medium.com/@jacobneterer/angular-and-tailwindcss-2388fb6e0bab I've been attempting to integrate Tailwind into my Angular project without success. Additionally, I even started an A ...

angularwebpacktailwind-css

Step-by-step guide on utilizing the vendor.ts file available at https://angular.io/docs/ts/latest/guide/webpack.html

As per the guidelines provided at https://angular.io/docs/ts/latest/guide/webpack.html, it is recommended to include vendors like jQuery in the vendor.ts file. // Other vendors for instance jQuery, Lodash or Bootstrap // You can import js, ts, css, sass, ...

angularjsangulartypescript

Ways to display an icon upon hovering or clicking, then conceal it when the mouse is moved away or another list item is clicked using ngFor in Angular 7

Within a simple loop, I have created a list with multiple rows. When a row is clicked or hovered over, it becomes active. Subsequently, clicking on another row will deactivate the previous one and activate the new one. So far, everything is functioning c ...

htmlcssangular