Issue with applying css3 transform inline in Angular 2 version 2.0.0-rc.2 using the style directive

Incorporating the transform property to a DIV using Angular 2 style directive has been my latest challenge:

<div
     [style.width.px]="front.width"
     [style.height.px]="front.height"
     [style.background-color]="front.backgroundColor"
     [style.transform]="front.transform"></div>

Here is the component data:

front['width'] = this.width + this.gapw;
front['height'] = this.height + this.gaph;
front['background-color'] = settings.backfacesColor;
front['transform'] = 'rotate3d( 0, 1, 0, 0deg ) translate3d( 0, 0, ' + hw + 'px )';

An alert in the console shows the following message:

WARNING: sanitizing unsafe style value rotate3d( 0, 1, 0, 0deg ) translate3d( 0, 0, 207px )
browser_adapter.js:83 WARNING: sanitizing unsafe style value rotate3d( 0, 1, 0, 0deg ) translate3d( 0, 0, 207px )
browser_adapter.js:83 WARNING: sanitizing unsafe style value rotate3d( 0, 1, 0, 180deg ) translate3d( 0, 0, 207px ) rotateZ( 180deg )

While standard styles such as width and background-color are successfully applied, the transform property remains unaffected. Any suggestions on how to resolve this issue?

cssangulartransform

Answer №1

UPDATE: In Angular2 RC6 and later versions, the DomSanitizationService has been changed to DomSanitizer. You can find more information here:

Original Answer

If you didn't find the answer you were looking for in the previously mentioned question, I'll try to address it here.

The reason why setting the style.transform is not working is because Angular has a sanitization process in place to prevent any malicious code injection into your application.

To include this style, you will need to instruct Angular to bypass this restriction.

Firstly, inject the sanitizer in the component constructor:

constructor(private sanitizer: DomSanitizationService) {}

Then, use the bypassSecurityTrustStyle function to bypass the desired style from the sanitize process:

this.safeTransform = sanitizer.bypassSecurityTrustStyle("rotate3d( 0, 1, 0, 0deg ) translate3d( 0, 0, ' + hw + 'px )")

Finally, utilize it in your template:

[style.transform]="safeTransform"

You can refer to the Angular documentation for more details at https://angular.io/docs/ts/latest/guide/security.html#!#bypass-security-apis

This question is similar to: In RC.1 some styles can't be added using binding syntax

You can also find the answer there.

Answer №2

As of the most recent update to Angular 2, @Daniel Pliscki's solution remains effective, with just one adjustment: now you should inject the DomSanitizer service.

https://angular.io/docs/ts/latest/guide/security.html#!#bypass-security-apis

constructor(private sanitizer: DomSanitizer) {}
ngOnInit() {
  this.transformStyle = this.sanitizer.bypassSecurityTrustStyle('....');
}

To apply this in your template:

[style.transform]="transformStyle"

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

The type 'Observable<boolean>' cannot be assigned to type 'Observable<UserRegistration>'

function completeRegistration(email: string, password: string, firstName: string, lastName: string, location: string): Observable<UserDetails> { let body = JSON.stringify({ email, password, firstName, lastName,location }); let headers = new H ...

angulartypescriptangular-httpangular-httpclientangular-observable

Updating CSS style across different pages using JavaScript

I am working with two different pages: index.php and app.php On the first page (index.php), I have elements that need a change in CSS style, such as font size. The specific element on this page is .options-parameters-input. The second page (app.php) cont ...

javascripthtmlcss

Typescript versus ES5: A comparison of Node.js server-side applications written in different languages

Note: When I mention regular JavaScript, I am referring to the ES5 version of JS. As I lay down the groundwork for a new project, my chosen tech stack consists of Node.js for the back-end with Angular2 for the front-end/client-side, and Gulp as the build ...

javascriptangularjsnode.jsangulartypescript

I am in need of a customized 'container' template that will display MyComponent based on a specific condition known as 'externalCondition'. MyComponent includes the usage of a Form and formValidation functionalities

container.html <div ngIf="externalCondition"> <!--Initially this is false. Later became true --!> <my-component #MyComponentElem > </my-component> <button [disabled]= "!myComponentElemRef.myDetailsF ...

htmlangulartypescriptdomangular-forms

As I iterated over the Vehicles API data, I encountered an issue while trying to access specific Vehicle information. I received an error message stating "Cannot read property 'id' of undefined

Exploring the realms of Angular, with some experience in older versions, I find myself faced with a challenge involving two APIs - "/vehicles" and "/vehicle/{id}". The process involves fetching data from "/vehicles", iterating through it to match IDs, the ...

javascriptangularangular-httpclient

The Angular Project I downloaded from Github is working fine on my Windows PC, but when I tried to run it on my Mac,

I am encountering an issue with my angular/dotnet project. I initially started working on it on my Windows PC using Visual Studio Code, but now that I need to work on it on my laptop, I tried downloading it from Github. However, after cloning the project a ...

c#.netangularjsangularsingle-page-application

Outlook failing to recognize text dimensions

Implementing: <html> <head> <style> p { font-size: 16px; } .font-size-16 { font-size: 16px !important; } </style> </head> <body> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspend ...

htmlcssoutlookhtml-emailfont-size

Press the button and watch as it fills up from the left to the right in a rounded

Looking for help with a button that has a unique hover effect: Current HTML <a href="#" class="button">Learn more</a> Current CSS body { background-color: #f6f6f6; } a { text-decoration: none; color: black; } a:hov ...

htmlcssbuttonhover

"Exploring the capabilities of Angular 4 Material for seamless page navigation

I am brand new to Angular 4 using Material Design 2. I have a simple inquiry regarding this topic. My code is in app.component.html, which displays a few mat-card components. When clicking on any link inside the mat-card component, it should switch the e ...

angularmaterial-designionic3angular-material2

Creating an interactive R shiny app with golem: incorporating a pre-existing design system (CSS+JS) efficiently

Currently, I am in the process of creating a Shiny App using the golem package. My intention is to incorporate an established design system (located at https://github.com/GouvernementFR/dsfr), which includes numerous css and js files. Suppose my golem Shi ...

cssrshinygolem

Experimenting with viewProvider in a component test

@Component({ selector: 'app-entity-details', templateUrl: './entity-details.component.html', styleUrls: ['./entity-details.component.scss'], viewProviders: [{ provide: ControlContainer, useFactory: (container: ...

angulartestingjasmineangular10

Difficulty transferring service information to the component

I have encountered an issue when trying to pass an Array from a service to a component. The console is displaying 'undefined' as the result. This happens when I inject the service into the component, assign the data to a variable, and then log th ...

angularangular5angular6angular-services

Learn how to efficiently transfer row data or an array object to a component within Angular by utilizing the MatDialog feature

My goal is to create a functionality where clicking on a button within a specific row opens up a matDialog box displaying all the contents of that row. Below is the HTML snippet: <tr *ngFor="let u of users"> <td data-label="ID& ...

javascriptcssangulartypescript

Balanced row heights within a CSS grid

Using a basic grid framework like , I have a fixed number of rows. I'm wondering if there's a simple way to ensure that all rows have the same height without explicitly setting the height of the .row class as a percentage. This is how my row cla ...

cssgrid-layout

Using a class that extends the parent component to inject it

I have a variety of angular components, each containing a base list component. For example, the VegetablesComponent and FruitsComponent both have a BaseListComponent, along with other child components specific to vegetables or fruits. The BaseListComponen ...

angularcomponentsinject

Error message: Cannot bind to 'LeafletDrawOptions' in Leaflet Draw

Currently, I am tackling the challenge of integrating OpenStreetMaps into my Angular project using @asymmetrik/ngx-leaflet-draw. However, I am encountering difficulties with getting certain options to function properly due to an error that has me stumped. ...

angularleaflet

What is the best way to determine which component/service is triggering a method within an Angular 2 or 4 service?

Is there a way to determine which component or service is triggering the method of a specific service, without the need to pass additional parameters? This information must be identified directly within the service. If you have any insights on how this c ...

angularangular2-services

Angular: Clicking on a component triggers the reinitialization of all instances of that particular component

Imagine a page filled with project cards, each equipped with a favorite button. Clicking the button will mark the project as a favorite and change the icon accordingly. The issue arises when clicking on the favorite button causes all project cards to rese ...

javascriptangulartypescript

What is the process for displaying a custom component within a parent view component?

I am seeking to incorporate a custom component within mat-option. Below is the code snippet from my parent component: <mat-option *ngFor="let option of options" [value]="option.value"> HERE I WOULD LIKE TO INJECT SOME COMPONE ...

angularangular2-template

Achieve a stunning visual effect by placing images behind the background using HTML and

I'm currently working on developing a webpage with a slideshow feature. I've decided that I want the transition between images in the slideshow to be a smooth fade effect, going from color to image to color. To achieve this, I have set up a backg ...

csshtmlimage