FancyGrid
Angular Grid Component for FancyGrid
Read more here:
https://fancygrid.com/docs/getting-started/angular
Install
angular CLI
npm install -g @angular/cli
ng new my-app --style scss
cd my-app
ng serve
If everything goes well, ng serve
has started the web server.
You can open your app at http://localhost:4200
As a next step, let's add the FancyGrid NPM packages.
Run the following command in my-app
(you may need a new instance of the terminal):
FancyGrid
npm install --save fancygrid fancy-grid-angular
After a few seconds of waiting, you should be good to go. Let's get to the actual coding!
As a first step, let's add the FancyGrid Angular module to our app module (src/app.module.ts
):
src/app.module.ts
;; ;; @ {}
Next, let's declare the basic grid configuration.
Edit src/app.component.ts
:
src/app.component.ts
; @ title = 'My App'; gridConfig: object; { const data = name: 'Ted' surname: 'Smith' company: 'Electrical Systems' age: 30 name: 'Ed' surname: 'Johnson' company: 'Energy and Oil' age: 35 name: 'Sam' surname: 'Williams' company: 'Airbus' age: 38 name: 'Alexander' surname: 'Brown' company: 'Renault' age: 24 name: 'Nicholas' surname: 'Miller' company: 'Adobe' age: 33 name: 'Andrew' surname: 'Thompson' company: 'Google' age: 28 name: 'Ryan' surname: 'Walker' company: 'Siemens' age: 39 name: 'John' surname: 'Scott' company: 'Cargo' age: 45 name: 'James' surname: 'Phillips' company: 'Pro bugs' age: 30 name: 'Brian' surname: 'Edwards' company: 'IT Consultant' age: 23 name: 'Jack' surname: 'Richardson' company: 'Europe IT' age: 24 name: 'Alex' surname: 'Howard' company: 'Cisco' age: 27 name: 'Carlos' surname: 'Wood' company: 'HP' age: 36 name: 'Adrian' surname: 'Russell' company: 'Micro Systems' age: 31 name: 'Jeremy' surname: 'Hamilton' company: 'Big Machines' age: 30 name: 'Ivan' surname: 'Woods' company: '' age: 24 name: 'Peter' surname: 'West' company: 'Adobe' age: 26 name: 'Scott' surname: 'Simpson' company: 'IBM' age: 29 name: 'Lorenzo' surname: 'Tucker' company: 'Intel' age: 29 name: 'Randy' surname: 'Grant' company: 'Bridges' age: 30 name: 'Arthur' surname: 'Gardner' company: 'Google' age: 31 name: 'Orlando' surname: 'Ruiz' company: 'Apple' age: 32 ; thisgridConfig = width: 450 height: 400 selModel: 'rows' trackOver: true theme: 'gray' data: data defaults: type: 'string' sortable: true resizable: true width: 100 columns: type: 'select' index: 'company' title: 'Company' index: 'name' title: 'Name' index: 'surname' title: 'Sur Name' index: 'age' title: 'Age' width: 50 type: 'number' ; }
The code above contains grid config that defined in property gridConfig
.
The name of property is not principal, you can change it.
We will you use this property in app.component.html
.
Finally, let's add the component definition to our template.
Edit app/app.component.html
and remove the scaffold code:
If everything works as expected, you should see a grid.
Support
If you need any assistance or would like to report any bugs found in FancyGrid, please contact us at support@fancygrid.com