CODEWITHSUNDEEP
angulartypescriptangular2-template
angular.aditya
angular.aditya

Reputation: 125

string interpolation in angular 2 /4

how to use a variable multicolors defined in typescript file in our template ?: -

I have tried like this -webkit-linear-gradient(135deg, {{multicolors}} 50%, lightgray 50%) but not working , any solution?

Upvotes: 0

Views: 923

Answers (1)

yurzui
yurzui

Reputation: 214017

I would create pipe like:

@Pipe({ name: 'safeStyle' })
export class SafeStylePipe implements PipeTransform {
  constructor(private sanitizer: DomSanitizer) {}
  transform(style) {
    return this.sanitizer.bypassSecurityTrustStyle(style);
  }
}

and then use it as follows

<div [style.background]="'-webkit-linear-gradient(135deg, ' + multicolors + ' 50%, lightgray 50%)' | safeStyle">
  Test
</div>

Plunker Example

See also

Upvotes: 1

Related Questions