angular-tree-component | A simple yet powerful tree component for Angular | Dataset library

I use Angular Tree Component in my project and for the past couple of days, I get the following error while building the Angular application. The issue was resolved after quiet a struggle. I am posting my answer below for the community.

I am trying to follow the following tutorial, but I keep the getting the error

I have single page Angular based web application.And using below css classes for styling. so what i need to do in these below css classes so that most make use of GPU instead of using CPU. Like transform,transition,position etc etc.

here is the css style scss file. CSS:

Hi i'm trying to run this code on Angular 6 after updating from angular2-modal to ngx-modialog

I tried following this tutorial, but I get errors like Identifier expected., '{' or ';' expected., Parameter declaration expected., Cannot find name '$'. Did you mean the instance member 'this.$'? thrown out. The code is supposed to click on the treeview arrows to expand the view and then bind a click event to each single element.

Component.ts:

I am having JSON in the form of {"Others": null, "Main Hobbies": {"Dance": ["Salsa", "Solo"], "Sports": ["Cricket"]}, "Game": ["PUBG", "Cricket", "Football"]} '

And i want to convert it into tree structure like

I'm maintaining an Angular library, which is generated by Angular Cli. Inside the workspace there is a library and a demo-app, which is a standard architecture for all of Angular libray created from angular-cli.

Currently I'm upgrading my library to new release of Angular 9.

I use the automatic upgrade soultion with ng update. After fixing some migration issues(some API are deprecated). The library can be build successfully.

But I am blocked by the build of the demo-app which has the library as dependency. I got ngcc error. After some research online I know the background: https://angular.io/guide/ivy#maintaining-library-compatibility; Library build fails with Angular 9

Even though I understand what's ngcc and why we need it for now, I can't still fix the build error.

In my library I have too modules as following:

I have migrated my angular 7 app to 8.0.0 and i'am now trying the new compiler ivy.

The app works perfectly without ivy but when i try to compile with it i have the following error :

Cannot combine @Input decorators with query decorators

No line number , no file , nothing ... hard to debug anything.

I have warning just before that , but i don't know if it's related :

WARNING in Entry point 'angular-tree-component' contains deep imports into 'lodash/defaultsDeep', 'lodash/get', 'lodash/omit', 'lodash/isNumber', 'lodash/first', 'lodash/last', 'lodash/some', 'lodash/every', 'lodash/compact', 'lodash/find', 'lodash/isString', 'lodash/isFunction', 'lodash/throttle', 'lodash/includes', 'lodash/pick'. This is probably not a problem, but may cause the compilation of entry points to be out of order.

Any ideas ?

I'm trying to use the #treeNodeFullTemplate in my app in order to fully customize the component, but I don't seem to be able to view my datas after copying the new template described in here.

My datas don't have the name property, so I want to display the label of each node using another property, but I'm failing at that.

I tried to combine this new template with the previous ones (#treeNodeTemplate and #loadingTemplate), but nothing seems to work, and reading the docs isn't really helping me right now.

How can I tell the component to look for the property otherName instead of name?

I made an example on stackblitz.