Having trouble with Angular 6 and the @input directive not functioning correctly?

I created a basic Angular application to understand how @input works for component communication, but I am facing an issue where the value is not getting passed. I have gone through various forums where others had similar problems, but none of the suggested solutions have worked for me. Can someone provide guidance on this?

app.componenent.html

<app-task [prioirty]="'p1'"></app-task>

task.component.ts

import { Component, OnInit, Input } from '@angular/core';
import { Task } from 'src/app/task/task';
import { TaskService } from 'src/app/task/services/task.service';
import {AppComponent} from 'src/app/app.component'

@Component({
  selector: 'app-task',
  templateUrl: './task.component.html',
  styleUrls: ['./task.component.css'],
})
export class TaskComponent implements OnInit {     
  constructor(private taskService: TaskService) {        
  }      
  task: Task = new Task();
  @Input() priortiy: string; 
  ngOnInit() {
  }
  addTask(){
    alert(this.priortiy);
    this.taskService.addTask(this.task).subscribe((data : Task) => {}, error => console.error(error),() => console.log("Job Added successfully"));    
  }    
}

When I try to display the value of priority in an alert box, it shows up as undefined.

If needed, I can share the complete code.

Answer №1

Looks like there is a typo here,

Let's update it from

 @Input() priortiy: string; 

To

 @Input() prioirty: string; 

Also, don't forget to add an alert,

alert(this.prioirty);

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

Enhance Tuple in Angular Component Properties

When using React, state variables can be created like this: const SomeComponent = ({ someProp }) => { const [value, setValue] = useState<boolean>(false); } I wonder if there is a similar way to achieve the spread of a tuple within an Angular co ...

RouterModule is a crucial external component that is essential for integrating

If I have a very simple component that is part of an Angular component library, it might look like this: mycomponent.module.html <div> <a routerLink="/"> </div> mycomponent.component.ts import { Component, OnInit, Input } from &a ...

Tips for utilizing interpolation for conditions instead of using *ngIf

For my application, I am using two different languages and have written them within two <option> tags. Is it possible to combine both conditions into a single <option> tag using interpolation? <option *ngIf="this.language=='en&apos ...

Retrieve properly formatted text from the editor.document using the VSCode API

I have been working on creating a personalized VSCode extension that can export the current selected file contents as a PDF. Although PrintCode exists, it does not fit my specific needs. The snippet of code I am currently using is: const editor = vscode.w ...

Upload picture to Amazon S3

I am currently working on a project that involves saving images and form data in AWS. I have successfully saved Angular form data in DynamoDB using API gateway and lambda functions. However, I am facing a challenge when it comes to saving images and storin ...

When using Ionic 2 and Angular 2, a single click can trigger two events - one on the button itself and another on the element

Hey there, I am facing a bug while using Angular 2 on mobile (with Ionic 2) and despite my efforts, I cannot find any similar issue. Therefore, I could really use your help. The issue is with a textarea and an input element placed one above the other. Whe ...

Unable to allocate submit event category

This is a question about code and an error message. The code snippet is shown below: const handleSubmit = (e: React.FormEventHandler<HTMLFormElement>) => { // e.preventDefault() } <form onSubmit={handleSubmit}></form> Below is ...

Unusual problem with accessing Object values in vscode using typescript

When attempting to write Object.values in TypeScript, I encounter a visual error (although it compiles without issues). https://example.com/image1.png I have tried searching online and restarting vscode, and here is my current tsconfig.json. https://exa ...

Creating a redux store with an object using typescript: A step-by-step guide

Having recently started using Redux and Typescript, I'm encountering an error where the store is refusing to accept the reducer when working with objects. let store = createStore(counter); //error on counter Could this be due to an incorrect type set ...

The object parameter is not being bound properly in the integration of Spring Boot and Angular

I am attempting to make an HTTP POST request to an API created in Spring Boot from an Angular app. The API expects an object as a parameter. When I execute the URL with Postman using form-data or urlencoded parameters, the request finishes successfully. Ho ...

Ways to determine the presence of a value in an array

Here is an example array: [ {practitioner: "place_1509136116761", H0709: false, H0911: false, H1113: false, H1315: false}, {practitioner: "place_1509136116772", H0709: true, H0911: false, H1113: true, H1315: false}, {practitioner: "place_15091361166 ...

Encountering a Pulumi problem during infrastructure packaging: Unable to utilize an import statement beyond a module

I am experimenting with a new approach in Pulumi: bundling the infrastructure. My approach involves deploying a simple S3 bucket by leveraging an npm package. Here is the content of my bucket npm package: index.ts import * as aws from "@pulumi/aws&q ...

What is the best way to interpret and execute conditions specified within strings like "condition1 and condition2"?

Received a JSON file from an external source with various conditions that need to be tested, either in real-time or through conversion. Imagine having an instance of a class called Person, with attributes {age: 13, country: "Norway"}, and an ext ...

What could be causing TypeScript to raise an issue when a /// reference comes after the 'use strict' statement?

This particular inquiry is somewhat connected to a question I posted on Stack Overflow yesterday about why TypeScript is encountering issues when trying to import a module. The initial configuration remains unchanged. My TypeScript file appears as follows ...

Observable fork join problem encountered

Hey there! I have a scenario with 3 interconnected tables in a SQLite database. I've written a method to fetch data from the database, but it seems like the method is not waiting for all the calls to finish. Here is the method: public downloadFromOff ...

Fetching User Details Including Cart Content Upon User Login

After successfully creating my e-commerce application, I have managed to implement API registration and login functionalities which are working perfectly in terms of requesting and receiving responses. Additionally, I have integrated APIs for various produ ...

Slim 2's CORS setting is effective for GET requests but does not seem to apply when it comes to POST requests

I am currently working with Angular 5 on the front-end and Slim 2 on the back-end. While Slim has been successful in handling my GET requests, it seems to be having trouble with my POST requests. Even after adding CORS headers in my index.php file, the is ...

Error: The utilization of the life cycle interface mandates the implementation of type checking

Currently, I am in the process of translating my typescript project to Webpack 2. While one project transitioned smoothly, I encountered an error with the other project... Error: use-life-cycle-interface necessitates type checking After conducting a br ...

What are the specified actions with Angular and p-picklist?

I have a situation with my angular code where I am displaying 2 lists and allowing items to be moved between them. I am looking for a way to trigger a method only when an item is moved from the available list to the selected list. I attempted to use (cli ...

How to Include HttpClient in an Angular Service

Looking for a service that utilizes http requests? import { Injectable } from '@angular/core'; import { Observable, of } from 'rxjs'; import { HttpClient } from '@angular/common/http'; @Injectable({ providedIn: 'root&a ...