CODEWITHSUNDEEP
cssangulartypescript
user2280016
user2280016

Reputation: 1850

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)
    )

}

Upvotes: 0

Views: 47

Answers (1)

Bandon
Bandon

Reputation: 809

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.

Upvotes: 1

Related Questions