What is the reason behind Angular not allowing users to define @Output events that begin with 'on'?

While developing a component, I defined an output EventEmitter named onUploaded. However, Angular flagged an error instructing me to use (uploaded) instead. This restriction is due to security concerns, as bindings starting with 'ono' pose risks. This raised my curiosity about the specific security issues associated with this naming convention.

Answer №1

For more information, check out the Angular Docs

Avoid prefixing output properties - Style 05-16

Why should you avoid this? It aligns with the consistency of built-in events like button clicks.

Furthermore, Angular allows for an alternative syntax using on-*. If output properties were prefixed with on, it would result in a redundant on-onEvent binding expression.

You may also be interested in reading about this issue. This guideline helps in preventing unexpected behavior within your application. Hope that explanation helps clarify things.

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

Implementing Reactive forms to disable ng-select: A step-by-step guide

Is there a way to disable the ng-select component? I attempted to use the [disabled] property, but it did not have any effect. I also tried using form control to disable it, but that was unsuccessful as well. Check out this Stackblitz example for referenc ...

Is there a way to detect a specific button press in react-native-picker-select?

I am currently utilizing the react-native-picker-select library. My objective is to set ingrebool to false when options a, b, c, or d are selected and true when option e is chosen from the data called ingre. How can I achieve this? Here is my code snippet ...

Can getters and setters be excluded from code coverage reports in Angular projects?

Looking to clean up my coverage reports for the front end portion of an angular project by removing trivial code like getters and setters. I generate my reports using npm run test-sonar -- --coverage, but everything is included in the report when I view ...

jspdf generates blank PDF files

I am trying to use JsPDF to generate a PDF from content within a Section tag. I have followed various guides but none of them seem to be working for me. Since there is no demo code available, I am turning to this platform in hopes of finding a solution. A ...

Two interactive dropdown menus featuring custom data attributes, each influencing the options available in the other

Looking to create interactive select boxes based on the data attribute values? This is the code I currently have: HTML <select id="hours" onchange="giveSelection()"> <option value="somethingA" data-option="1">optionA</option> <o ...

Typescript is struggling to locate a module that was specified in the "paths" configuration

Within my React project, I have set up a module alias in the webpack config. Now, I am looking to transition to Typescript. // I have tried to simplify the setup as much as possible Here is my tsconfig.json located in the root directory: { "compilerOp ...

What is the best way to create an HTML form on-the-fly from a JSON object?

Could someone please assist me in understanding how to dynamically generate an HTML form based on a JSON object using JavaScript? ...

Obtaining connection data in jsPlumb can be accomplished through a variety of

I have created a compact table of nodes that allow me to drag and drop connections or manually input node IDs to establish connections between them. Despite searching through the documentation and scouring the internet for examples, I am struggling to fin ...

jQuery for validating input fields with positive integers only using regular expressions

I currently have two input fields in my HTML that look like this: <input type="text" class="txtminFeedback" pattern="^\d+([\.\,][0]{2})?$" placeholder="Minimum Feedback"> <input type="text" class="txtmaxFeedback" pattern="^\d ...

Retrieve the data from the mat-checkbox

My goal is to retrieve a value from a mat-checkbox, but the issue is that we only get boolean expression instead of the string value. Here's an example snippet of what I'm looking for: <mat-checkbox formControlName="cb2" <strong&g ...

Tips for making a rounded bottom image slider with react-native?

Is there a way to design an image slider similar to this with rounded bottom images? ...

What could be causing my ajax file uploader to malfunction?

I am currently working on building an AJAX file upload module. Below is a snippet of the code I have been using: //creating a form for uploading files via AJAX FileUploader.prototype.createForm = function() { // creating a new form var form = docu ...

AngularJS Firebase Login Scope Value Not Retained After Refresh

I have stored my unique username in the variable "$scope" and I am trying to access it from different views once the user logs in, using: However, when I refresh the page immediately after the user successfully signs in, the value of "$scope" goes bac ...

What sets apart 'hasClass' from 'is'? Additionally, is there a substitute to retrieve a Jquery element instead?

Similar Question: jQuery .hasClass() vs .is() Sample HTML code: <div class="results"> <div class="table"> <form class="tr" action="#" method="post"> <div class="td"> <input class="dat ...

Learn how to easily toggle table column text visibility with a simple click

I have a working Angular 9 application where I've implemented a custom table to showcase the data. Upon clicking on a column, it triggers a custom modal dialog. The unique feature of my setup is that multiple dialog modals can be opened simultaneously ...

What steps are necessary to create an npm package utilizing three.js without any dependencies?

I have a challenge - I am trying to create an npm package that generates procedural objects for three.js. The issue I'm facing is how to properly include three.js in my code. I attempted to establish a dependency and use something like const THREE = r ...

The md-select search filter currently functions according to the ng-value, but it is important for it to also

I am using a md select search filter with multiple options available. For instance: id: 133, label:'Route1' id: 144, label:'Route2' id: 155, label:'Route3' id: 166, label:'Route4' If I input '1' ...

Get Facebook to recognize and display link previews for websites using ajax technology

It is commonly known that when copying a link from an HTML website onto Facebook, the platform will attempt to fetch available images as previews for the link. But what happens when the content is dynamically generated, such as with JavaScript? In this c ...

Utilize a traditional JavaScript class to instantiate an object in Vue.js

Is it possible to integrate a standard JavaScript class into a Vue.js component without needing anything static? If not, I am open to switching to React or Angular. Are they more suitable than Vue.js for code reusability? Test.js file: class Test { co ...

Swap out a specific object within an observable array by comparing object properties

Currently, I am retrieving an observable array of custom IPix objects (Observable<IPix[]>) from a database using an API. After that, I update a record in the database by sending an edited version of the IPix object back to the API through a PUT reque ...