The Angular @Input directive may be prone to receiving inaccurate model data

I am currently working on setting up @Input for my component using a model that resembles the following:

interface Car {
    sail?: never
    tires: number
    weight: number
}

interface Boat {
    tires?: never
    sail: boolean
    weight: number
}

export type Vehicle = Car | Boat;

The objective is to allow inputs like this (which works without any errors):

@Input() Car: Vehicle = {weight: 2500, tires: 4}
@Input() Boat: Vehicle = {weight: 2500, sail: true}

This results in an error as expected:

@Input() Mixed: Vehicle = {weight: 2500, tires: 4, sail: true}

In my HTML file, I have the following setup (where only 'tires' or 'sail' should be accepted, not both - which should trigger an error):

<component [car]="{weight: 2500, tires: 4, sail: true}"></component>

Surprisingly, Angular does not throw an error when receiving input from the HTML file. However, what perplexes me is how the Vehicle type can be filled with incorrect data. What would be the best approach to address this issue?

javascriptangulartypescript

Answer №1

When working with HTML, it's important to understand that there is no built-in type-checking like in Typescript. One workaround is to declare the Vehicle variable in your .ts file and then use it within your HTML code. This approach should trigger an error if something unexpected happens.

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

The Plupload internal version seems to be incorrect. The file is labeled as 2.3.9, however, the actual version within the file is 2.3

We recently identified a security vulnerability issue with plupload 2.3.6 being deemed as vulnerable. To address this, we downloaded version 2.3.9 from the official Plupload website here: Upon inspection, we found that the zip file is labeled as 2.3.9, bu ...

javascriptjqueryplupload

What is the process for clearing the cache of a crawling URL?

Currently, I am operating a crawler that gets triggered through an expressjs call. However, whenever I make the same request again, the crawler runs once more but indicates that all routes have already been completed. I even went to the extent of deleting ...

javascriptexpresscrawlee

Having trouble building a new project with Angular-cli v.6?

I recently installed Angular CLI version 6 and created a new project following these steps: npm install -g @angular/cli@^6.0.0 ng new my-app cd my-app npm install npm build However, I encountered an error during the build process with the following messa ...

angularangular-cliangular-cli-v6

Evaluation of button display based on certain conditions

I currently have two different render functions that display certain elements based on specific conditions. The first render function looks like this: private render(): JSX.Element { return ( <div> {this.props.x && this.state.y ...

reactjstypescriptreact-nativejestjsenzyme

Is there a way to dynamically create a property and assign a value to it on the fly?

When retrieving data from my API, I receive two arrays - one comprising column names and the other containing corresponding data. In order to utilize ag-grid effectively, it is necessary to map these columns to properties of a class. For instance, if ther ...

javascripttypescriptag-grid

A guide on successfully handling errors while utilizing S3.getsignedurlpromise() in node.js

I am faced with a challenge in my project involving a node.js server that downloads images from an s3 bucket and serves them to a React client. The issue arises when the wrong file key is sent to the S3 client, as I want to handle this error gracefully by ...

javascriptnode.jsamazon-web-servicesamazon-s3

Utilizing jQuery Mobile - Dividing content across multiple HTML files

In the process of developing a web application utilizing jQuery and jQuery mobile, I am aiming to display various pages. Given that the corresponding html-markup may become lengthy, I am interested in dividing the html into separate files. For instance: & ...

javascriptjqueryhtmljquery-mobile

Feeling lost when it comes to forms and hitting that submit button?

Below is a sample form structure: <html> <head> <title>My Page</title> </head> <body> <form name="myform" action="http://www.abcdefg.com/my.cgi" method="POST"> <div align="center"> <br><br; <br& ...

javascripthtmlcss

The data type 'number' cannot be assigned to the data type 'string'

I am encountering a specific error: The issue is 'Type 'number' is not assignable to type 'string'.' This error occurs here: swal.getContent().querySelector('strong').textContent = swal.getTimerLeft() Is there ...

angularsweetalert2

What is the best way to extract data from a JavaScript object received from multer?

Currently, I am facing an issue while trying to utilize multer for handling the upload of a CSV file in Express. The goal is to parse the uploaded file line by line. Although I can successfully retrieve the file as an object stored in req.body, I encounter ...

javascriptnode.jscsvexpressmulter

Identifying when a user closes a tab or browser to trigger a logout in JavaScript with Vue.js using the Quasar framework

Is there a way to trigger the logout function only when the tab or browser is closed, and not when the page is refreshed? I attempted the following code example, which successfully triggers the logout on tab close but also logs out when the page is ref ...

javascriptvue.jsquasar-framework

Issue with index creation using the @index decorator in Typegoose with NestJS and MongoDB

Encountering an issue with typegoose. Trying to create a 2dsphere index on the property geoLocation of model SP. Utilized the typegoose decorator @index but it's not functioning and not throwing any errors. Uncertain about how typegoose handles this s ...

node.jsmongodbtypescriptnestjstypegoose

Analyze items in two arrays using JavaScript and add any items that are missing

I am working on a JSON function that involves comparing objects in two different arrays, array1 and array2. The goal is to identify any missing items and either append them to array2 or create a new array called newArray1. Here is an example: const arra ...

javascriptarraysjson

What causes a ReferenceError when attempting to retrieve the class name of a React component?

Take a look at my React component located in index.js: import React from 'react' import ReactDOM from 'react-dom' class App extends React.Component { render() { return ( <div className="App"> <h1>Hello, ...

javascriptreactjsecmascript-6scopelifetime

Can you explain the distinction between using tsserver and eslint for linting code?

As I work on setting up my Neovim's Native LSP environment, a question has arisen regarding JS/TS linter. Could someone explain the distinction between tsserver and eslint as linters? I understand that tsserver is a language server offering features ...

typescripteslintlinterlanguage-server-protocoltsserver

The HttpClient.get('/') request with {observe: 'response'} is failing to retrieve some headers

Currently, I'm in the process of writing an API GET request by utilizing HttpClient.get(). Upon passing in the option to observe the response, I've encountered an issue where accessing the .keys() does not provide me with any headers apart from C ...

angulartypescriptrest

Steps to obtain the precise source code of a webpage

Is there a way to download the exact source code of a webpage? I have tried using the URL method and Jsoup method, but I am not getting the precise data as seen in the actual source code. For example: <input type="image" name="ctl00$dtlAlbums$ct ...

javascriptjavahtmlcssjsoup

Filtering out Objection/Knex query results based on withGraphFetched results

I am working with two models in Objection - "brands" and "offers". Brand: const { Model } = require('objection') class Brand extends Model { static get tableName() { return 'brands' } ...

javascriptnode.jsdatabaseknex.jsobjection.js

Step-by-step guide to setting up Angular 2 with fullpage.js scrolloverflow

I am currently working on a project using Angular 2 that incorporates the fullpage.js port from https://github.com/meiblorn/ngx-fullpage. I am facing an issue with implementing scrolloverflow on a specific section and could use some guidance. I have alread ...

htmlangularfullpage.js

Building Your Initial HTTP Server using Node.js

Hey everyone, I'm relatively new to node.js but have made some progress. Following the steps in this tutorial, I was able to create my first "example" server. However, there are a few things that I don't quite understand. Could someone please exp ...

javascriptnode.jsexpress