Reading data in angular

this is part two of angular credit tutorial in this video well this is performing the read operation in angular in our upcoming videos well discuss performing the rest of the crud operations that is creating updating and deleting now let's understand performing the read operation with an example here's what we want to do we want to retrieve and display the list of employees as you can see right here at the moment we don't have a model for representing our employee so let's create an employee class with all these properties that is name gender date of birth etc so let's flip over to visual studio code let's place all our models in a folder called models and let's place this folder inside the app folder so I'm going to right click on the app folder and then add a new folder let's name it models and let's add a new file to the models folder and we are creating a model for employee so let's name this file employee dot model dot TS and this is how the employee class looks like notice it has got several properties like ID name gender etc ID is of type number name is of type string gender is also string and we have email which is of type string but notice we have a question mark at the end of the property name so basically this question mark indicates that this property is optional so we can either provide a value for email or phone number notice both of those properties are made optional by including a question mark at the end of the property name and then we have contact preference so basically this property specifies whether we want the employee to be contacted either by email or phone number so this basically specifies what is their contact preference and then we have date of birth which is of type date and the department they belong to whether the employee is active or is he terminated and then photo path so if we look at the page right here notice we are displaying the employee photo so this photo path property specifies where that photo is coming from at the moment with a no project we don't have a folder called images I'm going to create images folder inside this assets folder so let's right-click on the assets folder and add a new folder let's name it images and inside this images folder I am going to include of our employee images they are already present right here I will have them available on my blog in case you need to download them so let's copy these images and paste them within the images folder right here so let's reveal this images folder in File Explorer and then paste all of our images in that folder next let's create list employees component to display the list of employees now to create the component I am going to use angular CLI notice within the command prompt I am already in the project folder so I'm going to use this command to create the list employees component ng for angular CLI itself G for generate C for component and I'm going to call our component list employees and I want this component to be placed inside the employees folder so I'm going to prefix that folder name at the moment within our project we don't have that employees folder so we want that employees folder to be created and we're going to place all of our employee crud related components in that employees folder so that's the reason we prefix the employees folder name right here and then we don't want spec files to be generated so I'm going to set - - spec to false and I'm also going to set - - flat to true basically what happens by default is angular CLI is going to place the component files in its own dedicated folder but we don't want that we want all of our employee crud components to be placed in this employees folder so we want that component to be placed flat in that folder without its own dedicated folder so let's go ahead and press Enter this is going to create our list employees component there we go our component is created notice it has created the component type script file the view template and the CSS file and these three files are placed in the employees folder inside the app folder so if we take a look at visual studio code notice within the app folder we have got employees folder and within that we have the three component files the typescript file the HTML and CSS and if we go back to the command prompt notice it not only created these three component files it has also updated the root module app module so if we take a look at app that module dot es notice it has included the required import statement to import list employees component and has also made it part of the declarations array of our @ng module decorator if we take a look at the list employees component typescript file notice it has also linked the template file right here using the template URL property and it has also linked the CSS file using these styles URLs property and look at the amount of boilerplate code the angular CLI has given us out of the box which otherwise we would have to write manually and imagine amount of time it takes so I personally think angular Cielo is one of the tools that we should know how to use it so we can be as productive as possible next we need to retrieve employee's data and display that using the list employees component that we have just created in a typical real world application we retrieve the employees data from a database table but for now let's hard-code the employee's data within our list employees component in our upcoming videos in the series will discuss how to retrieve employee's data from a database table so within our list employees component I'm going to include a property I will call it employees because it's going to hold the list of employees and the type for this is going to be employee array remember this employee class that we have created so here is that employee class with all those properties so this property is of type employee array so let's create a new array here and this is going to contain our list of employees I'm going to hard-code three employees data right here so we have our first employee whose name is mark his ideas one gender is male his contact preferences email so he has provided his email ID date of birth so here we first specify the month date and then the year his department is ID his active is of type boolean so we specify true or false if the employee is active they said that to true and photo part the photo for this employee is coming from the images folder inside the assets folder and within the images folder we have mark dot PNG so if we look at the images folder we have mark dot PNG similarly we have employee two who is Mary employee three who is John this is how we want to display employees data so we are going to use bootstrap for styling but in our list employees component view template let's do the required changes their ID default HTML that we have here and then let's include a development we're going to use bootstrap panels to style the display like this so if you're new to bootstrap please check out our bootstrap course so on this development I'm going to use to bootstrap classes the first one is panel and the second one is panel primary both these classes are being used for styling the panels and then we're going to use the angular ng for structural directive to loop over the list of employees notice within our list employees component we have this property employees which contains an array of employee objects so at the moment within the array we got three employee objects we want to loop over those three employee objects so we are using the angular ng for structural directive so we are going to loop over the list of employees that we have in this property employees now at the moment we don't have word wrap turned on so let's turn on world rap to turn on wood rap go to the View tab and then select toggle vert rap so this is going to automatically wrap the code when it flows off the screen in the panel heading we want to display the employee name so if we go back to the slides notice that in the panel heading we have the employee names so to get that panel heading I'm going to use another development inside this development and we're going to use another bootstrap CSS class here and this class is panel heading we are using this again for styling inside this development we are going to use an h3 element and we are going to use this h3 element to display the name of the employee within the panel heading and to get the name of the employee we're going to use this variable employee and we're using angular interpolation here and we know the employee object has got the name property which is going to display that name property within the h3 element here and for styling again on this h3 element I'm going to use another bootstrap class and that is panel - title now we discuss the interpolation and angular ng for structural director in detail in our angular 2 tutorial so if you're new to both of those concepts please check angular 2 course next we want to display employee photo and his details within the panel body so after panel heading div we're going to include another development here and the class on this is going to be panel - body again this the bootstrap class for styling and inside this panel body I'm going to create a column that's going to be ten units wide so I'm going to use this class call - XS - and we want this column to be ten units wide inside this column let's create a row for that by using the bootstrap row class and this row is going to contain two columns we are going to use the first column to display the employee photo and the second column to display the employee details the first column will be four units wide and the second column will be eight units wide so let's create those two columns in this row for that we are going to create another development and change the class on this development to four because we want that column to be four units wide let's create another column and we want this column to be eight units wide and in the first column we want to display the employee photo so let's use the image element and bind to its source property so here by using property binding but that's just angular property binding in detail in our angular 2 course so we want to bind the source property of the image element to the photo path property of the employee object next inside this column that is eight units wide I want to create a row so let's make a copy of this development and paste it right here and we want this row to contain two columns the first column is going to display the field names that is gender date of birth etc and the second column is going to display the values male date of birth value etc so we want each column within that row to be six units wide so let's create a development and use this class call - XS - six and let's make a copy of this because we want two columns each six units wide and in the first column we want to display the property name so first we want to display gender so I'm going to type that like that gender and then here we're going to display the gender property value again we're going to use interpolation for that so let's use this double curly braces and just before displaying the value we want to display this colon symbol as well so let's include a cone before the interpolation so now we are displaying gender in addition to gender we want the other properties so we need to include this same row for every property that we have in the interest of time I'm going to copy and paste the code that we have I mean the code is going to be exactly similar but it's going to be for different properties that we have date of birth contact preference etc so let's paste that code right here so here we are binding to either to property department email etc and we actually have a typo here we want to display gender property value so the field name here is gender so we don't want name to be displayed for gender so let's correct this the property name is gender one thing to note here is that by using the date pipe right here to format the display of date of birth again we discussed pipes in detail in our angular 2 course finally let's take our list employees component selector which is bap - list - employees and then include that as a directive in our route component so here is our root component view template let's open that and I'm going to replace all this HTML with our list employees component selector as a directive and then let's run this project so let's go back to the command prompt and then execute this command in G serve - oh there we go we have the list of employees displayed but the images are too bad let's limit the height and width of the image element to 200 pixels for that but in the list employee component CSS file let's include an image class have set width in height to 200 pixels and let's use this class on the image element within our list employees component view template so on the image element right here let's use that image class which limits the height and width to 200 pixels so the name of our class is imageclass let's copy that and specify it right here save our changes there we go we have the employee photo displayed as expected now I'm going to make one more change within the route component so I'm going to place this directive inside the development with class container this container class is a bootstrap class again we are using that class for styling notice now the bootstrap panels are not occupying the entire width of the browser we have one more display problem here notice these employee details they're not vertically aligned in the center to align them in the center I'm going to include another CSS class but in our list employee component CSS file let's name this class vertical - aligned we have set display two flags and we Ascenta aligning the items let's use this vertical align class in our list employees component view template so on this development that has the raw class I am going to use this particular main class let's save our changes notice now we have the employee data center aligned as expected so we have just seen how to perform the read operation in our next video we'll discuss how to set up routing in angular thank you for listening and have a great day

Channel: kudvenkat

Views: 147,618

Keywords: angular display array data, angular display image, angular 2 display data, angular model example, angular data model example, angular 2 data model class, angular export model, angular 2 component model, angular model array, typescript class optional property, angular typescript models, angular display array of objects

Id: tPySwBVmGvg

Length: 16min 48sec (1008 seconds)

Published: Wed Dec 13 2017