Possible to call 'alert()' or 'console.log()' from Angular ng-click Expression?

Question

I was trying to test if my ng-click binding was working -- but I seem to be running into a more-fundamental problem -- how to see what is happening (or not).

My usual 'crude' debugging methods, alert() and console.log(), do not seem to be available.

Is it possible to get access to these functions or something like them from within an Angular app?

The plnkr example below seems to show the click event 'working' -- effecting objects in my component -- but my function calls to alert() and log() seem to be getting ignored.

With that said, is there a way to get some kind of error message when I call a probably-nonexistent function? The Chrome console log does not seem to show anything.

https://embed.plnkr.co/Dvadi8mWlUqTUW865UsI/

I think the 'possibly-duplicate' question is similar, but it does not not actually talk about alert() or log() in the title, and the various partial answers seem generally geared towards Angular 1.x and controllers -- I do not have a controller.

So part of this question is -- do I need a controller? It looks like there might be an easy way to 'decorate' my app, but I only have modules and classes right now, no explicit controller.

Thank you.

---

I think the best answer is at bottom -- 'ng-click' must be provided an expression, not a function call.

and here is some properly formatted code to show how to call these basic functions in Angular2 (for other newbies out there):

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    //template:`<h2>Hello, world</h2>` ,
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    title = 'Quiz Tool';
    quiz = new Quiz();

    doAlert(){
        console.log('log: test log, yo...'); // black
        console.debug('debug: test log, yo...'); // blue
        console.warn('warn: test log, yo...'); // yellow
        console.info('info: test log, yo...'); // black (with 'i' icon)
        console.error('error: test log, yo...'); // red
        alert('test...');
    }
}

and call the doAlert() method from your HTML:

<button (click)="doAlert();count = count + 1" ng-init="count=0">Increment</button>

Thank you!

Answer 1

alert() and console.log(), do not seem to be available.

Both alert() and console.log() are evaluated against the global window object. On the other hand ng-click is an AngularJS Expression and is evaluated against the scope associated with it which does not have any direct access to the window object. Thus they are not available inside scope.

AngularJS Expressions vs. JavaScript Expressions

Context: JavaScript expressions are evaluated against the global window. In AngularJS, expressions are evaluated against a scope object.

AngularJS provides a service called $log for that purpose. You can use $log service like the following:

var myApp = angular.module('myApp',[]);

myApp.controller('myController', ['$scope', '$log', function($scope, $log){
  $scope.TestClick = function(){
    $log.log('You have clicked');
  }
}])

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="myApp" ng-controller="myController">
  <input type="button" value="Click" ng-click="TestClick()"/>
</div>

Answer 2

ng-click must be call an expression. AngularJS expressions do not have direct access to global variables like window, document or location. This restriction is intentional. It prevents accidental access to the global state – a common source of subtle bugs.