user2280016 user2280016 -4 years ago 137
TypeScript Question

How to apply the following style on an element?

I have a element in angular2 app as follows,

<div class="ticket-card" [ngStyle]="{'background': 'url(' + ticketPath + ')' , 'background-size': 'cover'}">


with the above style, i want to add the following style,

background:
/ top, transparent red /
linear-gradient(
rgba(255, 0, 0, 0.45),
rgba(255, 0, 0, 0.45)
)

}

Answer Source

var app = angular.module('App', []);
app.controller('Ctrl', ['$scope', function($scope){
  $scope.gradient = "linear-gradient(to bottom, rgba(255, 0, 0, 0.45), rgba(255, 0, 0, 1))";
}]);
.box {
  width: 300px;
  height: 300px;
  background: grey;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div class="box" ng-app="App" ng-controller="Ctrl" ng-style="{'background': gradient}"></div>

Use basic angular syntax to insert string into ngStyle directive.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download