in this video you're gonna learn how to build an angular grid with the ignite ui cli in about two
minutes let's get started i'm here at the ignite ui for angular samples page i'll paste this url
into the notes but this is where you would go to get started with the cli so you can see there's
a topic getting started with the cli it shows you how to install it and it kind of walks you through
the different options that you have the way the cli works is it's template driven so
we've created a bunch of different template styles that you can use to easily create
a brand new angular project or add ignite ui features to your existing project so for example
if we use the ig cli the ignite ui cli i can do a new angular project and i can automatically give
it the template with the side nav schematic let's go ahead and see how this would work
so here i am in visual studio code and i'm going to type in ig i've already done the mpm install
slash g for global ignite ui cli so let's give this a name so we'll just call it customer app
and this is going to be an angular application ignite ui for angular i'm going to do the default
side navigation and i'm going to use the default theme for this project and i want to go ahead and
add a component so let's go ahead and add a grid so i'll do a standard grid and let's do a grid
with summaries and i'll just call this one summary grid and i want to go ahead and add a scenario
this time so let's go ahead and add a fintech grid i'm going to call this one fintech grid one
and we will add another component let's do grids and lists again why don't we do a grid we'll do a
custom grid and this will be custom grid one and this is where you can go ahead and add
any feature that you want so using the up and down arrow in the space bar i'm selecting items that i
want inside my grid like paging sorting grouping pinning etc so it makes it really really easy and
really really nice to do this i'll hit the enter key let's hit complete and run i haven't entered
my email address so i'm just going to go ahead and use the trial activation which is what you
would get if you're not a customer we're going to go ahead and use the default port it'll go ahead
and install the ignite ui for angular packages and this application should start right up
now that everything installed and compiled our application started right up you can see this
is the template that we use which is the side nav so we have the screens that we added or
the components that we added we have a navigation menu so this is the side navigation these are all
ignite ui components if i go to our summary grid that we added which had several features you can
see that i have a grid with some data i've got my column summaries i have some other customizations
like turning summaries on and off if i'd like to so you can see as i do that the grid summary
area changes a little bit i've got paging set on let's do 50 items per page so i only have one page
then and i can scroll really nicely if i go to the fintech grid it's a little more advanced so
there's a bunch of rows here it's about a thousand different rows if i select all i can deselect all
you can see we have custom groupings enabled so here if i grab settlement i can drag that up to
the group by area now i'm grouping by settlement and category so i can collapse and expand these
groups if i collapse all of them i can see all the data here expand all of them let's say i want to
test out the grid's performance i can push this all the way up to ten thousand rows and you can
see that everything scrolls really smooth and fast just like you would expect just like you would get
with let's say for example microsoft excel the grid is virtualized horizontally and vertically
so i move my right arrow you can see there's probably about 60 columns in this grid
if i move left like so so you really have no performance issues based on the amount of data
if i select some different rows here let's click the chart we can do automatic charting as well
and i can also flick up to the dark theme which is really nice so i've got a nice dark theme here
uh which has the green highlights with the dark background and at the same time you
get the excel style filter with this which allows you to do things like column pinning
column hiding sorting moving right or left and then advanced filtering so you can let's say
just give all the africa and asia pacific records and that's all i'm going to get in the grid and in
this example you can actually do live updating so if i just say live prices you'll see now that the
grid is updating and you're getting right here about 10 000 records updating every half second
so about 2 000 different cells are being updated when this button is clicked if i go to the custom
grid over here you can see again it has some nice data in it some nice templated columns
and all of this is meant for you to learn how to use the grid so if i ctrl c here to terminate this
batch job if we open up the application that was created with the cli it was called customer app
and now we're in customer app let's open it up in visual studio code so we'll move this window
over a bit make it a little bit larger and let's go to the source file app here's custom grid we
can look at its html and what's happening here is the grid itself is the igx grid and then it
is being bound to some data and then you've got some property settings on the grid itself
and then some column definitions each one of those options that we picked in the cli wizard
end up being properties that you set on the grid so sortable filterable editable that's
how easy it is to get this grid going if we look at something more advanced like the fintech grid
you can see it has a ton of columns that were generated when we used that template this is also
showing you different things like how to use ng template uh within the grid itself so you can see
here's an igx column with an ng template so we're customizing it based on data that's coming in
so not only can you use the cli to get going very quickly you can also use it to learn the grid and
how easy it is to customize to bind data etc and if we look at something like our summary grid it's
the same thing you have some different experience here in each column so you can learn how to use
the grid the nice thing about the grid as well if you don't want to do any of this stuff if i
delete all of the columns here and i'll delete the paginator 2 and we'll go up to the grid and
i'm going to say auto generate equals true what this is going to do is it will automatically set
the grid up and configure it based on the schema of the data coming in i don't have to do any of
that extra work so you have options with the grid but the cli is designed to get you started very
quickly and to help you learn the grid and explore its capabilities to learn more about
modern web products like ignite ui for angular check out igniteui.com also click subscribe so
you can get notified when we post new videos on how to use all of our modern web products