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

Issues with conditional types in TypeScript functionality not yielding desired results

Here is some TypeScript code that I am working with: type NumberOrNever<T> = T extends number ? T : never function f<T>(o: T) : NumberOrNever<T> { if (typeof o === "number") return o; throw "Not a number!" } ...

typescriptconditional-types

Placing an image on the chosen option of a <mat-select> using Angular Material

I have incorporated Angular Material into my Angular 2 project, and I am trying to insert a static image (HTML element) in the selected value of mat-select. Unfortunately, I have been unable to find a solution for this issue. Is there anyone who can ...

htmlangularcssangular-material

Enhanced string key indexer type safety in TypeScript

Discover and explore this online TypeScript playground where code magic happens: export enum KeyCode { Alt = 'meta', Command = 'command', // etc. } export type KeyStroke = KeyCode | string; export interface Combination { comb ...

typescript

Can you create a dynamic visual display using HTML5 Canvas to draw lines in a circular pattern that react

I have successfully implemented drawing lines around a circle using the AudioContext API. However, I am facing an issue with the lineTo function, as the line only grows and does not shrink. My inspiration for this project comes from the audio visualizer fo ...

javascripthtmlreactjscanvas

When the button is clicked, verify the existence of the file, then display a message and undo

I encountered a situation where I needed to verify if a user tries to input data with the same date and same region again, they should receive a prompt alert. I attempted to achieve this using code in the backend, as shown below:- protected void btnSave ...

javascriptjqueryasp.net

Filter numbers within an Array using a Function Parameter

I'm currently experimenting with Arrays and the .filter() function. My goal is to filter between specified parameters in a function to achieve the desired output. However, I'm encountering an issue where my NPM test is failing. Although the outpu ...

javascriptarraysfunctionnpm

What is the best way to implement or disable a function when toggling a switch in pure JavaScript?

I'm currently facing an issue with my transliteration function that is supposed to be executed only when the checkbox is checked. The problem is, even after unchecking the checkbox, the function still continues to run. const checkBox = document.que ...

javascriptcheckboxtoggletoggleswitch

Node.js SQLite3 - DB.each() not running the subsequent code block

When running the code snippet below, I am getting the following output: var db = new sqlite3.Database("database.sqlite") console.log("2") db.each("SELECT * FROM gban WHERE id = '"+id+"'", async functi ...

javascriptnode.jsdatabasenode-sqlite3

Guide on how to efficiently navigate and extract data from a (local) XML file using Prototype JS

I'm currently working on a project that already utilizes PrototypeJS and I need to develop a module for it. Here's what I have: - An XML file containing the necessary information Here's what I'm aiming for: - A basic div that showcase ...

javascriptxmljsonprototypejs

"Utilizing JQuery to enhance task management by implementing a delete function

I need help figuring out how to create a function that can delete tasks from my todo list. Currently, each task has its own remove button, but I want to implement a single remove button at the bottom that removes checked or crossed out tasks. Any suggestio ...

javascriptjqueryhtmlcss

Challenges when transitioning from Angular 8 to Angular 9

After transitioning from Angular 8 to Angular 9, I encountered the following issues. Despite removing and reinstalling node_modules multiple times, the problems persist: An unhandled exception occurred: Cannot find module 'webpack/lib/ParserHelpers&ap ...

angular

Issue encountered while trying to execute Reapp project demo

As I embark on setting up my initial Reapp project, I encounter a roadblock right at the start. A blank screen greets me, accompanied by a console error stating that main.js is not found (error 404). Upon executing reapp run -d, the following errors manif ...

javascriptnode.jsreactjsnpmpackage.json

Ways to remove specific characters from the escape() function in express-validators

When using the check method from express-validator to validate user input, I'm curious if there's a way to exclude certain characters from the test. For example, currently I have: check("profile.about").trim().escape() This code snippet convert ...

javascriptnode.jsexpressvalidation

JAVASCRIPT ENCOUNTERS ISSUE WITH RANDOM TEXT GENERATION

Utilizing an array of words, we are in the process of generating random text. The goal is to shuffle and combine these words to form new "random sentences". However, we have encountered a minor issue - the addition of "undefined" at the beginning of each p ...

javascriptarrays

EJS variable not detected by Visual Studio IDE in JavaScript file

Working on a Node.js project with the express framework and utilizing EJS as the template engine, my IDE of choice is Visual Studio. Encountering an issue when using EJS variables within the same ejs file. Though it renders correctly and functions perfect ...

javascriptnode.jsvisual-studioexpressejs

retain the input data from the form by using the keyup event

Currently, I have a scenario where an input field is used to capture user input. Instead of displaying the entered value directly, I am looking to store it in a variable and subsequently use it to retrieve data from a database. Below is the code snippet I ...

javascriptphpjqueryajax

How to remove every instance of an item in an array based on its unique identifier using JavaScript

Is there a way to clean up an array of objects by removing duplicates with the same id? In this case, I only want to keep the object with id 1. This is my approach: let data = [{ "selected": true, "id": 3, "ProductName": "Aniseed Syrup", ...

javascriptarraysobject

sequencing the compilation of Node.js modules

I am facing an issue with my node application involving multiple interdependent modules exported using module.exports. These modules include mongohelper, transaction, server, conhandlr, and appmin. Compile order- mongohelper transaction server (..the ...

javascriptnode.jsnode-modules

Exploring Angular 2 Tabs: Navigating Through Child Components

Recently, I've been experimenting with trying to access the HTML elements within tabs components using an example from the Angular 2 docs. You can view the example here. Here is a snippet of my implementation: import {Component, ElementRef, Inj ...

javascripthtmltypescriptangularangular2-template

Reveal concealed fields following the selection of a specific option

I'm looking to create a bookmarklet that will automatically fill in values when clicked. Currently, I can select values using: document.getElementById('component').value="IAE-Data Agent"; document.getElementById('component').onch ...

javascriptjavaseleniumselenium-webdriverbookmarklet