Unable to connect Angular custom NPM package

Hey everyone, I've just created my own custom dynamic tooltip npm package. However, when I try to use it in an app, I encounter the following error:

  Can't bind to 'appDynamicTooltip' since it isn't a known property of 'div'.<div class="class-tooltip" [appDynamicTooltip]="tooltipData" [tooltipConditions]="conditions">

This is a common Angular error that occurs when imports are not correct. In my case, I have only imported one module and it was successfully imported into my app. I can see the module, but I'm wondering if there might be something wrong with the way I am exporting the package.
Here is the link to the GitHub repository for my Package: dynamic-tooltip
And here is how I have imported my Package:
https://i.sstatic.net/z1GOKJY5.png

angulartypescriptnpm

Answer №1

According to Pieterjan's suggestion in the comments, this successfully resolved the problem: 

@Input('appDynamicTooltip') tooltipData: any
. I need to specify the input within the directive using the selector from which I am sending the data. So, when using the directive, it should be used like this: 
[appDynamicTooltip]="tooltipData"

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

Encountering challenges with Object-Oriented Programming combined with Typescript: Are you experiencing a

Currently, I'm in the process of building a comprehensive authentication application using the MERN stack entirely in TypeScript. However, I am encountering some issues (specifically type errors) with my userController file. Here is my routes file: i ...

node.jstypescriptexpressauthenticationoop

Developing a Progressive Web App with ASP.NET Core 3 and Angular is a powerful

I have embarked on the journey of building an Angular SPA in ASP.NET Core 3. To kick things off, I created a new project, utilized the Angular template, and upgraded all packages to version 8.2.9 of Angular. Setting up a seamless CI/CD pipeline to Azure wa ...

angularasp.net-coreprogressive-web-appsasp.net-core-3.0

Ways to access the different variable types within a class?

Looking to retrieve the types of specific variables within a class. Example: class CustomPerson { name: string = ""; age: number = 0; ID?: number = undefined; } getVariableType(CustomPerson, "name") => string getVariable ...

typescript

What steps should I follow to install nodemon on my Windows 10 device?

Currently, I am utilizing the bash console on my Windows 10 system. My goal is to install nodemon using node.js, but when attempting to do so, I encounter this error message: sudo: npm: command not found It's puzzling because I should already have n ...

javascriptnode.jsexpressnpmnodemon

Exploring the power of Angular's ViewChildren to iterate through QueryList items

My ngFor loop includes child components: @ViewChildren(SingleMultiSelectionComponent) singleMultiSelections: QueryList<SingleMultiSelectionComponent>; I am attempting to iterate through this QueryList: console.log(this.singleMultiSelections); // 1 i ...

angular

Having trouble with a frozen Angular CLI installation using NPM?

I am currently attempting to set up angular/cli for my project running on Angular 7. NPM Version: 6.7.0 Node Version: v11.10.1 However, I've encountered an issue when I run the command npm install -g @angular/cli The installation process seems to ...

angularnpm

Why won't my boolean value in the Angular service reflect in the HTML code?

For my project, I am utilizing a stepper and I need to display or hide a div based on the selected product. However, I am encountering an issue where the HTML isn't updating when I try to call the done() function. .service public beneficiary = true; ...

angulartypescript

Rendering React component within a production build of Angular 7

I've been in the process of gradually moving an Angular app to React. After exploring options like single-spa and nx, I found that they weren't suitable due to the messy script-injected nature of the existing app. So, I decided to go for a semi-m ...

reactjsangularbundlewrapper

Mastering TypeScript debugging in Visual Studio Code with automatic restart

Currently, I am in the process of setting up a TypeScript project using Node. For debugging my main.ts file in Visual Studio Code, I have configured the launch.json as follows: { "type": "node", "request": "launch", "name": "Star ...

node.jstypescriptvisual-studio-codenodemon

Executing npm install gets stuck just like running npm install with the --verbose flag

I started off with a basic Ionic application that I cloned from a git repository. However, when I tried to install npm, it got stuck at the "loadAllDepsIntoIdealTree" stage. After some research, I came across a solution mentioned here: https://github.com/n ...

node.jsnpmnpm-install

Encountering an issue while attempting to downgrade NPM's version

After attempting to update the NPM version for certain dependencies, I now find myself in need of downgrading to an older version. Unfortunately, I am encountering difficulties in doing so. Current NPM version: npm v9.8.1 ERROR: npm v9.8.1 is not compati ...

node.jsnpm

Seeing red logs on npm console in JetBrains WebStorm

Recently, I encountered a problem in the npm console while working on one of my projects. Every time I execute npm start, all words appear in red color, even when there are no actual errors present. I attempted various solutions such as reinstalling WebS ...

npmconsoleidewebstormjetbrains-ide

Leveraging PM2 for executing additional npm scripts

Within my package.json file, I've configured two scripts: start for local development and production for deployment. When using npm, I can simply run npm run production. However, how can I achieve the same result with pm2? ...

node.jsnpmpm2

What is the process for loading the chosen option JSON object from an array when a button is clicked?

I have a TypeScript file containing JSON objects that can be selected as options from a dropdown list. I am looking for guidance on how to load/instantiate the selected JSON object when the user clicks a button to proceed. Specifically, I would like to le ...

htmlarraysjsonangularobject

React-router-dom TypeScript error when defining the type of the prop parameter in the loader

I'm having trouble with the params prop in the loader prop within the routes. I've defined the params in TypeScript, but I'm getting errors that I don't understand. Any help would be appreciated, thanks in advance. I tried to use the Cu ...

reactjstypescriptreact-router-domreact-typescript

ESLint: The "react" plugin encountered a conflict

In my development environment, I have a React application within a single npm component package. This React app acts as a demonstration site that consumes the component package in addition to Storybook. local-component-package ├── .storybook ├─ ...

javascriptnode.jsreactjsnpmyarnpkg

Enhance user experience by implementing accessibility features in Angular 5 using

Our team is currently working on an Angular 6 application and we need to make it more accessible. I have tried adding aria-live="polite" to our angular-components, but we are experiencing issues with the Chromevox reader interrupting itself during data l ...

angularaccessibilityuiaccessibility

How can Angular2 detect when an entity is clicked within a window?

There are multiple items generated using *ngFor: <my-item *ngFor="let item of myArray" [p]="item"></my-item> I am able to handle a click event like this: <my-item ... (click)="doWork(item)"></my-item> However, I want to avoid a ...

javascriptangulartypescript

Tips for incorporating external AMD modules with Angular2 using WebPack

In my current project using Angular2, TypeScript, and WebPack, I am looking to incorporate the Esri ArcGIS JavaScript API. The API can be accessed from the following URL: By importing Map from 'esri/Map';, I aim to import the corresponding modul ...

javascripttypescriptwebpack

What strategies can be used to manage Error return types in Typescript?

I have a situation where I need to handle either an object of type Person or an Error being returned by a function. My goal is to read the values of keys in the returned object only if it's not an Error. The code snippet below throws an error on the ...

javascripttypescript