how to use angular-gantt(angularjs library) in angular 10 or angular 8

Question

here is the image of the code and i don't know how to use it in angular 10hello there i'm new to angular, i want angular-gantt angular-gantt in my angular 10 project can somebody explain me step by step procedure for doing this... event i tried adding js and css in angular.json file.

"styles": [
          "node_modules/angular2-multiselect-dropdown/themes/default.theme.css",
          "node_modules/@coreui/icons/css/coreui-icons.css",
          "node_modules/flag-icon-css/css/flag-icon.css",
          "node_modules/font-awesome/css/font-awesome.css",
          "node_modules/simple-line-icons/css/simple-line-icons.css",
          "node_modules/intl-tel-input/build/css/intlTelInput.css",
          "src/scss/style.scss",
          "node_modules/summernote/dist/summernote-lite.min.css",
          "node_modules/angular-gantt/dist/angular-gantt.min.css"

        ],
        "scripts": [
          "node_modules/chart.js/dist/Chart.min.js",
          "node_modules/intl-tel-input/build/js/intlTelInput.min.js",
          "node_modules/summernote/dist/summernote-lite.min.js",
          "node_modules/angular-gantt/dist/angular-gantt.min.js"
        ]

Answer 1

Try this steps below,

1. Import the GanttModule in app.module.ts file from the ej2-angular-gantt package. import { GanttModule } from 'your downloaded location';

2. Import and inject GanttModule within providers section of app.module.ts. @NgModule({ declarations: [ .. ], imports: [ .. GanttModule, .. ], })

3. Refer the CSS file for Angular Gantt in styles.css

4. Example : Configure data and taskfield in your ts and bind it in html as follows,

   <ejs-gantt id="GanttSample" [dataSource]="data" height= "500px" width="800px" [taskFields]= "taskfield">