Using a Typescript enum within an Angular ng-click event

Currently, I am working with a TypeScript enum that looks like this:

enum AuthState { New, Exist, Forgot };

In one of my .cshtml files (ASP.NET MVC), I have a button with an Angular ng-click attribute as follows:

<a ng-click="MyClick(AuthState.New)">...</>

Within my auth.ts file in TypeScript, I have an event handler defined like so:

...
$scope.MyClick = (state) => { ... }
...

I am facing an issue where the parameter "state" in the event handler is coming up as "undefined". However, if I simply use

onclick="alert(AuthState.Exist)"

The result will correctly display as "1".

Answer №1

One issue arises when attempting to reference elements in your template that do not exist within the $scope variable.

A solution is to include the enum in the scope, enabling its use within the template.

$scope.AuthState = AuthState;

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to dynamically set an ID in Angular using the pound symbol (#)?

I am currently developing a dynamic Angular 6 application that utilizes dynamic components. My approach involves using @ViewChild('<id>', { read: ViewContainerRef }) <id>; to reference the divs where I intend to populate with dynamic ...

What is the best method for inserting a hyperlink into the JSON string obtained from a subreddit?

const allowedPosts = body.data.children.filter((post: { data: { over_18: any; }; }) => !post.data.over_18); if (!allowedPosts.length) return message.channel.send('It seems we are out of fresh memes!, Try again later.'); const randomInd ...

Angular modal not responding to close event

My issue is that when I try to close a modal by pressing the X button, it doesn't work. Here is the button where I am triggering the modal: <button type="submit" id="submit-form" class="btn btn-primary" (click)="o ...

Angular-dc bar graph failing to display properly

I'm having some trouble creating a bar chart using crossfilter, dc.js, and angular-dc. The rowchart is working properly, but the barchart is not displaying the bars. When I inspect the element in Chrome, I can see the values, and when I force focus, t ...

Comparison of env.local and String variables

I encountered an access denied error with Firebase. The issue seems to arise when I try passing the value of the "project_ID" using an environment variable in the backend's "configs.ts" file, as shown in the code snippet below: import 'firebase/f ...

Set the values retrieved from the http get response as variables in an Angular application

Lately, I've been working on a settings application with slide toggles. Currently, I have set up local storage to store the toggle state. However, I now want to update the toggle status based on the server response. The goal is to toggle buttons accor ...

Open the JSON file and showcase its contents using Angular

I am attempting to read a JSON file and populate a table with the values. I've experimented with this.http.get('./data/file.json') .map(response => response.json()) .subscribe(result => this.results =result, function(error) ...

What is the best way to identify the position of an element in an array given my specific circumstances

I am trying to utilize the ng-repeat directive in order to display an array. Here is what I have: <div ng-repeat="stu in school"> <div>{{stu.name}}</div> <div>{{stu.grade}}</div> </div> JavaScript $scope.scho ...

Accessing JSON Data from a .NET Webmethod to Iterate through in AngularJS Directive

After extensive searching and seeking help, including referencing this SO answer: I have managed to retrieve data from a Webmethod and display it using {{data}} on the page. However, I am facing issues when trying to loop through the data, which consists ...

Access the $event object from an Angular template selector

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script> <input type="file" #myFile multiple /> <button (click)="onDelete(myFile.event)">DeleteFiles</button> My code snippet is experienci ...

Navigating with AngularJS

My server is utilizing angular for routing purposes. It sends a HTML file containing a js file with routing using angular js to the browser. Here is the server code (which sends the check.html with the routing file main.js) : var express = require("expre ...

Encountering unknown provider error when accessing the resolve property in an AngularJS ui-router controller

Check out the plunk link provided below: http://plnkr.co/edit/uquwtuPcwZMPFJPBKBBY?p=preview To summarize, the intriguing section: myApp.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) { $u ...

Guide to creating AngularJS directive attributes without a right-hand side in hiccup code?

I'm currently developing an AngularJS application using markup in hiccup format. Here is a snippet of the markup: <div modal-show modal-visible="showDialog" .........></div> Below is the corresponding Hiccup I have created: [:div.modal. ...

Click on the link to open it in a SharePoint modal and populate it with the value from the

After populating a ng-grid with SharePoint items, my goal is to have the SharePoint edit form open in a modal window when the edit button at the end of each row is clicked. However, I am encountering difficulties when using OpenPopUpPage as the {{row.entit ...

What could be the reason for TypeScript inferring the generic type as an empty string?

I have developed a React component known as StateWithValidation. import { useStateWithValidation } from "./useStateWithValidation"; export const StateWithValidation = () => { const [username, setUserName, isValid] = useStateWithValidation( ( ...

What could be causing the failure of Jsonresult with parameter in my Ajax request?

Here is the code snippet from my view. $(function () { $('#buttonx').on("click", function (e) { e.preventDefault(); $.ajax({ url: 'Ficha/VerificarPatrocinador', ...

Is it possible for TypeScript to automatically determine the specific type that was used in a union type parameter?

I need some help with a utility function I'm working on that can remove a specified number of elements from either a string or an array. My goal is to have the compiler determine whether the return value should be a string or an array based on what is ...

Error TS5023 occurs when the integrated terminal in Visual Studio Code encounters an unfamiliar option 'w' while executing the tsc -w command

I am encountering an issue with the tsc -w command in the VS Code integrated terminal. However, I have successfully executed it from the NodeJs Command Prompt. `error TS5023: Unknown option 'w' Use the '--help' flag to view available o ...

Error message: Issue with TypeScript and cleave.js - 'rawValue' property is not found on type 'EventTarget & HTMLInputElement'

I am encountering an error with the onChange event while implementing cleave in typescript. TypeScript is throwing an error indicating that 'rawValue' is not present in event.target. Here is my code: import React, { useCallback, useState, useEff ...

Tips for passing an array from AJAX to Controller in asp.net:

I'm currently working on sending an array from an AJAX POST request to my controller. Here's what I have: var selected = []; $('.unitsCheckBox:checked').each(function () { selected.push($(this).val()); }); data = { Units: sele ...