Showing posts with label ag grid. Show all posts
Showing posts with label ag grid. Show all posts

Angularjs LocalStorage Vs Session Storage Vs Cookies

Angularjs LocalStorage Vs Session Storage Vs Cookies


Hi Viewers Today Discussed Angularjs LocalStorage Vs Session Storage Vs Cookies include ngstorage  means angular storage. I'm working a new app where I need to keep some data during the user is logged in and I have that question,what is the difference among localstorage and sessionstorage.

Angularjs LocalStorage Vs Session Storage Vs Cookies
Angularjs LocalStorage Vs Session Storage Vs Cookies

Angularjs LocalStorage and SessionStorage are both  Called Web Storage and features of HTML5.

localStorage stores information as long as the user does not delete them.

sessionStorage stores information as long as the session goes. Usually until the user closes the tab/browser.

cookies are simply cookies, which are supported by older browsers and usually are a fallback for frameworks that use the above mentioned WebStorages.

sessionStorage : The sessionStorage object stores data only for a session, meaning that the data is stored until the browser (or tab) is closed. it is not available when a file is run locally.

Data stored in the sessionStorage object is accessible only from the page that initially stored the data; so this doesn't meet your requirement

localStorage : Data stored using the localStorage object is persisted until it is specifically removed via JavaScript or the user clears the browser’s cache.

Implement virtual paging in ag-grid - Angular2

Implement virtual paging in ag grid angular2

Implementing the Angular 2 Datagrid Angular 2 New features adding Large number of data quick loading in virtual scroll in ag grid adding new features and good looking the data grid.




how to impleted ag grid angularjs 2
how to impleted ag grid angularjs 2


Implementing the Angular 2 Datagrid

Dependencies

"dependencies": {
    ...
    "ag-grid": "6.2.x",
    "ag-grid-ng2": "6.2.x"
}

@NgModule({
    imports: [
        BrowserModule,
        AgGridModule.withComponents(),
        ...
})

Configuring ag-Grid in Angular 2

Events: All data out of the grid comes through events. These use Angular 2 event bindings eg (modelUpdated)="onModelUpdated()". As you interact with the grid, the different events are fixed and output text to the console (open the dev tools to see the console).
Properties: All the data is provided to the grid as Angular 2 bindings. These are bound onto the ag-Grid properties bypassing the elements attributes. The values for the bindings come from the parent controller.
Attributes: When the property is just a simple string value, then no binding is necessary, just the value is placed as an attribute eg rowHeight="22". Notice that boolean attributes are defaulted to 'true' IF they attribute is provided WITHOUT any value. If the attribute is not provided, it is taken as false.
Grid API via IDs: The grid in the example is created with an id by marking it with #agGrid. This in turn turns into a variable which can be used to access the grid's controller. The buttons Grid API and Column API buttons use this variable to access the grids API (the API's are attributes on the controller).
Changing Properties: When a property changes value, AngularJS automatically passes the new value onto the grid. This is used in the following locations:
a) The 'quickFilter' on the top right updates the quick filter of the grid. b) The 'Show Tool Panel' checkbox has it's value bound to the 'showToolPanel' property of the grid. c) The 'Refresh Data' generates new data for the grid and updates the rowData property.

Creating Grids with Markup

<ag-grid-column headerName="Name" field="name" [width]="150"></ag-grid-column>
Cell Rendering & Cell Editing using Angular 2

It is possible to build cellRenders, cellEditors and filters using Angular 2. Doing each of these is explained in the section on each.

Although it is possible to use Angular 2 for your customisations of ag-Grid, it is not necessary. The grid will happily work with both Angular 2 and non-Angular 2 portions (eg cellRenderers in Angular 2 or normal JavaScript). If you do use Angular 2, be aware that you are adding an extra layer of indirection into ag-Grid. ag-Grid's internal framework is already highly tuned to work incredibly fast and does not require Angular 2 or anything else to make it faster. If you are looking for a lightning fast grid, even if you are using Angular 2 and the ag-grid-ng2 component, consider using plain ag-Grid Components (as explained on the pages for rendering etc) inside ag-Grid instead of creating Angular 2 counterparts.

Known Issues
"Attempt to use a dehydrated detector"

If you are getting the above error, then check out this post where jose_DS shines some light on the issue.