07. AngularLogExtender Color Support

Set custom color to a $log method

If the default color of a specific $log method is not to your liking, its possible to override it. You just need the pass the method name and the css to the setLogMethodColor method. The following example shows you how to do so.

app.config(['logExProvider', function(logExProvider) {
    logExProvider.setLogMethodColor('log', 'color:red;');
}]);

Set custom colors to multiple $log method

If the default colors of the $log methods are not to your liking, its possible to override multiple method colors in one call. You just need the pass the method name and css in an object to the overrideLogMethodColors method. The following example shows you how to do so.

app.config(['logExProvider', function(logExProvider) {
    logExProvider.overrideLogMethodColors({log: 'color:red;', info: 'color:purple'});
}]);

Disable/Enable default coloring of logs

If the default colors are not to your liking, its possible to disable it. The following shows you how to do so.

app.config(['logExProvider', function(logExProvider) {
    logExProvider.disableDefaultColors(true);
}]);

Color your log outputs

Override the color of all log methods of a specific log instance is possible with AngularLogExtender. Just pass a css style as the third parameter of the getInstance() method. Currently, only logs with one parameter of type string will be parsed with the specified styles. The following example shows you how.

######Example of color configuration being passed to logger

app.controller('CoreController', ['$scope','$log', function($scope, $log) {
      $log = $log.getInstance('CoreController', true, false,'color: #990099; background: #FFFFCC;');
      $log.log("Advanced Log Extender Example: Use Case 5");
}]);

Some good styles you can use are:

'color: #990099; background: #FFFFCC;'
'background: #222; color: #bada55;'

You can also come up with your own styles as well :) !