Angular Spotify #2: Build the album list page

hello good morning everyone um happy weekend so today we continue uh on the spotify um tutorial and um sorry my voice was just a bit down so we will continue on building the uh album list and the album detail for the um spotify app and let me share screen real quick yeah i think you all can see the screen so um in in the last tutorial we've been go through the nx workspace structure and i will go back revisit it a bit when when we view the the album feature so at the moment we have the album like you can see on the screen and inside the obon there's one feature library which is uh corresponding to the to the router on the ui which is going to look like that so you go to spotify. from creating let me zoom in a bit i think there's some people who are asking for it so if you go into the then go into one playlist or maybe here you can see there's if you click into a title of the current track plane you can go directly into the elbow view which is very similar to um to the spotify application i think i'm not very sure i think i start to use a spotify my spotify recently that's what i forgot so when you click into this yeah it's been hit into the album view and um it was like very similar to the playlist field as you can see for example when i click into one of my playlists the uh the ui is gonna be like very very much similar so there's a um there's a title and there's the tile of um of the um let's let's call it media so that's the media could be a playlist or the album so there's a there's a tie of the media and then there's a title and then there also there's a description and for the playlist the uh the the person the avatar that you've seen here is like actually the one who created the playlist but for the album it is gonna be probably it's gonna be the artist to click into it yeah so it is going to display the the artist image so i would say it's more or less the same and also the the control here with the play button and there's a live button and there's a download button so not all of that is supported on the spotify on my spotify yet with the with the my angular version because um it quite you know it's a a lot more detail to put it in so i'll just when i release it on for the first version i just try to get it out quickly so that we can all see it yeah so it is like the current playlist field that i am having so it also has the media type on the top and then let's come down to the title and that is when went down to the description and also the name and the the number of song maybe the the main difference is like on the grid that you can see so there's um there's a track like on there's a list of track for a playlist or for album so for the album we don't want to display this row under this column this column album here and that edit is also not relevant and if you can see on the spotify f uh the they will replace this two column with the number of place um of the track itself i am not very sure that we can get it on like to like from the api um but uh we will yeah we will see just in a minute and i think we have a question that you used to structure with so lost were asking can you go over the command that you used to structure with nx and like i don't really get it like the the yeah i i don't really get the call like what do you mean because to create um an n question is simple with uh just a single command called um create nx f or what's what i forgot i just uh don't do it very often so you can use it to um create a workspace and then when you start to create all of the library and all of the components for angular for example or on the module or service that has the extension they call it nx console and so you you go to any console there's a lot of thing you can click into it without having to manually like type it on on the command for example you have the generated command here which is most of the time that is what you are going to do so you can select from the drop down what you wanted to create and for me i usually i need to create either a angular library or a workspace library and also i mostly will use the angular component i think yeah component for the service and pipe i don't usually use use nx ui to create it but uh for mostly for library and component you will see in a minute just it's real quick so i just hide the comments what thank god for asking uh it is uh if it answers your question then uh and it's good but if you it is not answering your question you can just type it again and then i will try to to explain again or you can just give me like a private message yeah there's a lot of way to to to reach out to me so don't worry um so let's go back to one of the uh of the feature that i built last week i was trying to put it in the in the live stream but i didn't have time so if you go back to spotify and initially on the first version i don't have this browse tab this one is like i added last week so you can see for the browse tab you will enhance the uh slash browse on the url i'm not sure how to make it bigger like to make this uh this addressable bigger i can only make the content of the website bigger so usually is go to slash browse and then you will have the list of categories like there's a there's a pause or raw or top list of today or for example and when you click into once it basically just give in the category id and then i will text this category id and go to the server and ask for all of the playlists that belong to this category and the thing was like this category is like i would cache on the store like on the state management so if you select one category and then you go back into it no i didn't circuit so you i just select tablet and then when i go back it feels like instant there's no spinner because i has already uh store it on the memory um so if you go to the new category customer this dense and electro click you see there's a spinner it's just very like quickly display but if you start to um if you start to make it like simulate like just throw the network you see uh something happen like easier so get back to so when you i i simulate it to be like very slow internet connection then um it is start to look like very slow to load all of the image then when i click into row you see this spinner take like at least a few seconds so it is not feeling like instant like uh you just you just are seeing and yeah i'll i'll go to record real quick because in the past um uh stream i wanted to show the code for you i but unfortunately like talking about networks but it took a lot of time so let me open the the code so you can see there's a library folder that we talked last week and then you go into web because on the app usually there's many more f to come because it is it is like mono ripple so you can imagine this could be a web app or could be a mobile app and it could be also the api so on the left we also wanted to group it by the domain by is the like what it is instead of putting on of the library like in the in the root folder so that is the reason to to have this web um folder so you go into the browse and you will see the same structure for almost all of the other features that i built so there is the feature folder and for the feature folder is corresponding to the category list and the category details so this to library is corresponding to define the two components that you're seeing so when you click into the browse it will load you in your render the category uh with the plural which is the category list so you see in the module i just configure when you go into browser so when you go to browse even try to load the empty path and then even just render the category component and if you go into the category you will see the same pattern yeah so when it go into the empty part it will take the category detail but it was confusing because uh because on the ui it was different this is going to be browse and then brow with some kind of id why is is loading the empty path the reason is i will not configure it directly into the module into the router module instead of i was like trying to use the lazy learning module and there's one specific feature to handle it for me which is the cell feature so you go into the cell it is not actually a component it just basically a module and let me close it so if you go into the cell browse cells module you will see that when i load the empty part it is trying to load the category list which is fine which is what we are expecting but then when you try to load the the path with an id i will try to lazy load the the module for the category component like category detail component which display all of the playlists and it will go inside the category module it is where i configure the empty part to load the category detail so the id is actually come up on the cell feature already so you i think now you will have a clear clear image how it will configure and also the whole browse uh feature was also lazy load inside the root cell of module so if you go into the so really the cell for the browse feature which is corresponding to slash browse on the on the url but if you go inside the cell the root cell like to configure all of the routing you will see that inside the feature here i has this web cell route and in the web server it was doing only one thing it will say when the browser requests for slash browse which is this one which is let's browse i'll try to go and load the browser module and and it's actually what it does a moment when i refresh the page and i go to browse you see it when trying to load the browse cell module and inside the cell of the browse feature module i configure the router to load the category list when the part is empty which is what you are seeing on the screen so when it's load the browse and it try to load the the the first thing it will show the category list and then when you was asking for uh the id the category detail it will try to load the category detail module yeah and that's that is uh that is the whole configuration and it is gonna be applied for the album as well because at the moment when i click into this track even always load the album detail because there is there is the id on on on the top so but then i also have the like all of my album that i save into my collection so for example when i open the real spotify you go into the library you'll see there's a tab called album on the top so the album here is like actually my album and when you into one it's like one of the album detail and we can actually grouping all of them together into a same same same like router like that so when i try to load the list of album which is it is gonna display the the list of album for the user which is the current login user and then when you put in the id it is when it starts to load this field for specific album and i hope you won't click on that um so let's go back to record i think we can start to write some code now so let me go back to the album so at the moment in the album there's only one feature and it is not gonna work for us because we also wanted to have multiple feature multiple routes when you do slides so there's one let me maybe maybe i can write something down yeah easier that you can imagine so when we try to load the album on the screen it is going to affect the album yeah i think it's just called a component with the s with with the uh really plural and then when you slash the album and then you slash id and if you try to take the yellow detail maybe it's much clearer better so one feature here is not gonna work so the first thing when uh we has only one feature and we want to to refactor it it's like to move it because the feature here is corresponding to the album detail so i will try to move it i will use the nx command to move it to the new to the new uh folder cone detail and let me do it quickly see i haven't done it for for some time so makes it work so we have the field option here so that's the first one is uh angular move which is move the whole application which is not the one we are using and the next one is like to move either an application or a library and since the feature here it's just a nx library so we we can use it so use the second one okay so take the uh watchful move and then on the on the on the ui is gonna ask like where are you going to put the new to put the the library which is this feature into so i will put it into web because it is just a library so it understand that is it is going to be under this live folder so i just put it the weft and then i slashed album and because we wanted to do like l1 detail so just do slash detail for now and the project name is gonna be usually is try to put the name something like that web album and then okay so then feature everything is big so it was not easy to navigate around but this is the one that you are seeing on the console is like it's trying to to to run like to do a dry run which is like it try to run it and to give you the result on the console and if it is your expected result and then we hit the run button and it is when it actually do something it will actually move this thing into a new folder so what we are doing now is we just do like preview so we see the feature now is becoming like detail and i think it is it is what we want so everything we just keep the same and uh they asked me to update the import path so yeah just do run so you see now the detail is becoming the feature is becoming detailed and what i usually do is i create a new photo called feature i will type like i mistyped everything a lot so sorry for that so now we need to bring this detail into the feature and you should not just type the folder and bring it in you still need to use the nx command so it will also reflect it on the import path which is which is this one we see on the ts base even also updating the path when you are importing it into the new into the new location so that everything is going to be insane so i recommend you to use any works by move for everything don't you like don't try to manually move move it by yourself so um let bring go back to sync and then inside the feature we bring this detail into the feature so let's do it one more time so let's move uh once we move then now the destination is going to be weft and that's called a slash album and then feature and then detail and then the project name because just now we rename it into the details so it's going to be wef and then dash and then dash detail and you can see here it is like just from top left to bottom so for web that's album in the dance detail so let's see so the create here is saying it will create a new folder called detail inside the feature and yeah it is actually what we want so just click the run it will bring it into the future right okay it's look good now so we have the detail album component and the folder we still call it detail to just make it shorten a bit but i still try to name the component and the module is like the the name that we are expecting when we designed it so i just called album because when you call it with a singular you know singular form which means it's like just a single one you you can't put the detail which is fine but uh it's just my convention so i um i just uh put an album and albums which is a bit tricky you're not like coming from the uh from the country that's speak english but uh yeah we get used to it so now what i wanted to do is like i wanted to create a new um a new library to create a new angular library so it is and uh wa the walls angular live video so click one i will call it just let me bring it down a bit so call it uh listen it's like album list but i just called the name is list so the style we are using is like scs by default um not by default i prefer to use it so the directory is like we remove the leaf and it's gonna because we just right click onto this feature so we've taken the web album feature for us and you can see it is trying to create a new list folder under the feature which is fine which is what i was expecting and you can scroll down there's a lot of options for you to choose from and um i just usually just select the prefix which is is shorthand for angular spotify and rooting and everything i will do with myself don't worry and the simple module name i'll do it so the simple module name is like when you open let me open the detail quickly so when is it creating a new um library for you you see the album module here and if you don't specify it is like um the simplified name even quick try to create something like web uh album the web feature which is like still the content cutting like combination of all of the string from the top part and uh yeah i just uh don't not i'm not a fan of it so usually i try to just keep a simple module name and then we we want to have the strict compilation so just put it straight and i think with that we almost done the the tag here is like for specifying what is the type of um the of the library and then what is the scope and there's many more and you can configure eslin to to say if it is belong to this type of library i wanted only a restriction a list of library can that can import from it so it is going to be useful in the future but at the moment i'm not very like using it a lot my friend cho will complain a lot but uh i think it's fine we just want to do something real quick so just two type and then we call it is a feature so just feature and also i put the scope of web because you can have a scope of uh mobile or scope of api but yeah that's that's what i'm putting at the moment the unit test runner is usually don't write test but i mean it is no no harm to we just set the unit test so that we can use it in the future yeah so just set uh js for now and uh with that we can we are ready to just create a new library so now in the feature you see that's in the new list folder and inside the list right even by default we just type the module as the list module because we select the simplified name so let me change it to yeah with yes i also need to get the name here okay so look pretty okay now so what we wanted to do next is we wanted to create a new component that is linked to this module and yeah it is what we want because we're going to test we are following the uh single component per module so that you don't have to worry about it this component belongs to this module and it also like promoting um the um the affected build command from nx that's why we also create a separate library just to hold a single module and usually just hot one component and we don't want to put a 10 component inside one single library because when annex run the view and if you configure the affected view correctly you only wanted to make change and view the the component the code that you that you change that has been affected to other components you don't want to build the whole library does contain 10 components because you might just chain one and then you don't want to rebuild the whole tents for example so that is the reason for having one library for just one module and one component freezing i'm just another one so now we just need to create a new uh component then uh the name is like s the project is featuring slash lists also you see you can leave but i think it's still from list and i don't need to specify this module the style is going to be scs same the the chain detection is going to be on push everything in this library in this application is on push by default and it will reduce a lot of chain detection which is not necessary need to be run and then i will select actually because the album list is not gonna be used by itself it's gonna be triggered by the round so you don't really have to do the export here and when i select the flat the album is gonna stay inside the live folder together with the yellow module so it's not gonna create a new um a new folder to store the album component and i think with that we are good to go usually i don't really have to do much here uh skip import skip test maybe skip test for now and uh yeah almost everything is fine so just so let's see here lib albums then that is still create the theory album thing so i think we still need to select the flat i think you select it already for some reason but it didn't trigger the dry run so because i by default we're going to create a new album photo and then this places all of the thing but what i want to to have is just an album inside the module i think it's going to be okay because i select the the flat option here so we just go ahead and create it okay look good yeah just now maybe the um the um the console will just not run the dry run corresponding to it so if you go into the module you enhance the declaration for the album and what we wanted to do here is that to do a config so for some reason vs4 doesn't really work well with importing stuff so i have to do it manually most of the time which is quite weird but inside the fall it's between expect an array for part so we just do and when it's empty we wanted to load the album so to do component and i think that's yeah we own good now so we have the album one is try to load the the first third round and also let's go back to the okay so i just remove it yeah we all know what we want to do so in the list we have already configured the uh the thing the um the router [Music] yeah so it is gonna take this part and for the detail we wanted to do the same so the moment i was trying to to tell the the the uh the round is like when it's try to load this thing i will load the corresponding uh component but because we are gonna group them together inside the shell feature so i can remove that part and then i delegate it to the shell to to before doing it for us so yeah you see it in in just a minute uh when i think let me change to another branch first because we are on the main so maybe in the future is difficult i think i put everything away okay just text l to a new branch now on a different branch so you don't don't worry about like you commit in the wrong thing or you mess up with the main that is usually how you should do it you when you start to to build a new feature you need to create a new maybe it's an epic if it's too big just create an epic branch and then you branch it from the epic and when you start to push stuff into your branch you can merge everything into the epic branch and then when everything is ready you can start to take the epic and bring it to the develop branch or staging is a java preference but yeah that's usually how i do it so let's see go back to the double module so now we need to create a new feature called self so let me create it quickly if that's cool so it doesn't really need to be an angular library but it is conventional so just follow angular library because it could be just a simple can it be just a simple library because it's going to use some of the router but it's not gonna use the decorator and component and stuff so i mean okay whatever just create a library the angular library oh yeah yeah we need an angular library because we need to import it back to the shell later on so it it needs to be an angular library instead of just the normal ones by library so the same we put the new folder name shell of the new library name shell and we try to put it inside the regulatory feature so it's going to be in the same level of the list and the detail and then we go down yeah just there's some bunch of options to select from and usually i just don't select anything i just complete this prefix so that um the lens will do the right thing and then just there the same simple module name i mean should it be a simple uh okay just keep it simple for now maybe you can change it and then i think that's it we're good and we just need to put the name time picture and let's go um yeah when i has another separate live stream to go through some of the code and we do refactor so maybe the tag here we can do the better job but i think for now should it should do the job so we have the cell now let's see our photo we just click run and it's gonna create a new shell folder yes so now we have a cell and um okay so there's a cell module then so what i wanted to do here is to we need to do a router configure throughout the module so this thing doesn't work most of the time i don't know why i'm not sure yeah my friend charles says it's well because of the um ps4 and when he's worked with um web song that's usually there's no problem and it just happened to me a lot we do another four child and then in the in the four child here you know we has another all right and then for the first one when it's come down [Music] no we don't need actually we don't yeah we should need it we wanted to do lazy loading so we probably still need it actually let me refer back to the sale what did i do for a box i uh also forgot so let me open xiao here see okay so yeah we do the same so uh when it's load the path the empty path is trying to load the list and then yeah okay understand so close it so when it is like so let me just create a new object the first one so when the path is empty right we want to lock the children and the children is going to be function that this one return import from angular and spotify and then we'll eat the circus for 45 slash and then we have the album it's gonna load the list here and then we need to do some kind of um usually you need to bend because it's going to return you its performance but what you can do here is things like you can put on a thing i think you can do away sometimes let me let me refer back to the tail of the brows i also don't have the very good memory so we can do a thing and then you do a win and it is gonna be a bit shorter for you okay so we do a scene here and then here we do a width inside this import when it is finishing reporting we enhance the the module but i think we need to update it before we change the name so we just need to export from the module instead of the module so which is just the file that inside the index here is basically the the place for you to export all of the the the component or the module for the other libraries to use so you need to make it correct and i think let me check the details as well it doesn't work yeah the detail is fine because we had already so let me close it and then we do so now we have the elbow module which is what we want and then the part where the path is let me do it so we have the column here and then we hand stroke the unkill bluetooth it just doesn't work very good so we need to do it we need to import it maybe because my uh my uh mark is just adding your brand that's why it's so slow so angular spotify and then q2 yeah no it's not off video really just spotify and just qualify sorry sometimes this uh manual thing is drag you crazy and then access i also want to load the children okay sorry so it's going to be the same we can do a sync function and inside the async function you need to return some kind of aware solutions away from the import yeah i don't uh like has the uh pen uh finger typing so that's why i do typing around wrong a lot but also the the keyboard was a new one so i used to have just the 65 and then i get to the 85 80 percent yeah just remove the number thing and that's why my hand was not used to it even after a few months spotify [Music] when you load the thing in this part empty it's gonna take the list and then when you load the id it is gonna take the album okay look good the album detail so what we wanted to do now is we wanted to has this this uh shell the brow shell no not brows it is like album cell let me also name it differently that you can receive it easy yeah right if you have too many shells don't know you will it's been easy and difficult to look for it when you have album and best show and you know what you you're looking for and it's don't upgrade it automatically as well so we need to update this so when we configure the root cell we need to load this and now when it is trying to load the album pump like we mentioned before at the moment it tried to load the detail and it is not one we want so we wanted to load the shell and not the other module so the gel module actually we can name it differently just call it uh module and then here is also verified okay so let me explain this just quickly so you will get the idea so when it go into the album it will load the album shell module lazy load yeah so it's not like do eagerly loading every time and then you enter this album shell module you will see we try to load the empty path we do also let's load it because when you load the lazy and the the list of album maybe the guy is gonna click into their own detail but we don't want to make the waiting time to see the list of album is long because maybe this uh detail we're gonna take maybe two three seconds so to load it together we're gonna take long so we just wanted to do everything let's load it so when you go into the empty part you try to load the the links of your room and when you go into the the detail with the album id it is going to take the album detail and i i think it's all clear here so when you go to the module we config the same path because at that time it's like when the guy is like slash you slash on the browser anyway so we wanted to load the slash when it's empty just load just load just render the list and also when you go into the id here right so because we will configure the album id on the lazy load module itself so when you go into the yellow module you also need just to configure the empty path because the url now is going to be something like album slash maybe pop and pop here is just the category the id and you will have this already so on the empty one when you slash pop and then empty it's just try to load the album detail yeah that does that's the idea okay i think we're all good so at the moment i think we don't have any uh links to click on the ui so just maybe let's start it quickly so let me go into the album detail okay so the album detail at the moment it's just using the uh work in progress and just plug in a simple iframe yeah just a simple iphone to the to the link that you're watching on youtube at the moment uh and then we will change it real quick so maybe just keep the content the content spacing so the content spacing here is like to make the same kind of look and feel for all of the view for the main view i'll show you in a minute so what is is what what i do is just setting some like common padding and maybe some majin yeah i think but that's an idea just some simple padding is what we want so now we're running on local and then if you click into this okay you still see the the id which is what we want so let me change it save it then just put detail maybe because now everything goes i don't saw anything on the local story so we need to refresh the thing we just let me uh also change it to external iphone yeah so when you go into this moment movement 6 yeah okay so now it's displayed the album detail and what it does for the content spacing let me just show you real quick okay let's just close it we don't need to debug anything so in the is a is a main view and the content spacing was basically saying just put some kind of padding on top some padding left and padding right so it's going to look and feel the same for all of the components like the browser also has the content spacing rod around it or the home also the same that is the idea um yeah okay so we need uh places to be able to play into the album so at the moment on a spotify app they win has the talk now here but i think to bring it in gonna take uh some time so i just don't do it now maybe i just change the library here into playlist and then i will has another one is like my album for example so we can have it quickly the the one on top here is just maybe you know we can do it in the future it's not the whole point of today live stream anyway so let me change this quickly and then we can see it so maybe what is it like navigation everything is ui store so there's a ui like component store which is available throughout the application and this is where i am configuring all of the knob on the left side which is the three fixed map the below one here is basically the list of playlists that you are going to have so i don't need to configure its fixed the playlist here is now at the other moment it's like hardcoded i can basically put in in the same uh but you know when i need to render also this playlist section we also need to change the structure here into something a bit more generic and i don't do it now so let me continue to my eyelids and then with the s yeah yeah maybe then then we do it now i will then we just do slash album actually we need to maybe we need to put the the s so it look consistent yeah should be okay so let me go back to the shell and then change it otherwise it's not going to work but the party needs to be able with the s okay i think it's now reload and then we have we have the new uh navigation on the left side and uh when i click it to mail it okay so you see there's an album work here and because we don't apply because we don't apply any kind of um content spacing so that's why it is just bring all the way to the left but we will change it quickly when we have the data i hope we gonna have enough time uh because i will plan for doing like just one hours live stream but maybe you need to uh stretch to like one hour and a half because we like have like just 10 minutes before we run out of time for one hour so i think it's gonna be taking another 30 minutes okay so now we have the album and actually at the moment at that moment i think because that's 51 file we should make some uh commit and let me change let me let me add the content spacing actually we don't happen to edit but let me just do commit fit config album brow and um yeah just do commit i think it's gonna fail because uh we other one uh there's a lin stash configure and then we will trigger the um the lens to run pre commit so when you have some error and then you want you try to commit it it is not allowing to to just commit directly to the to the cosplay and enforcing some kind of styling and rule is going to help a lot that's why i configure the uh the lint to run when you do pre-commit and uh also you should consider to use uh linstash which is which is this one okay everything the phone is too big now so we cannot see a lot maybe instead somewhere around yeah so when you configure the list and it tries to run little stage only on the file that you made the change not not something else so it's not going to run lean through the whole project every time it should try to run your your chain inside the the father you make changes so let's see what is the complaining thing that we're putting she okay let me do it again some reason it just didn't show up nicely here because it worked yeah so we need to wait for the for the link to run so maybe so command output okay so we have the output now so what is saying because the in the album component we having this ng on unit and constructor which doesn't do anything so uh it's saying you know we don't want some kind of empty constructor or the uh on in it if it doesn't do anything we just remove it from the source code yeah so okay so we just remove it we will import it back when we need it and when you make the chain maybe you need to click this button plus and then it will stash the file okay because uh it will trigger the view so i i hear something from the sound i form the app so let me comment it is not allowing us yet because we still has this on in it which is unused so i will i intend to not remove it so i can show you oh okay so it's not it's not like critical then it's just a warning so it is not like if you had some unused uh import you need to remove it maybe so okay and maybe because only need is coming from angular and we use it anyway so it just doesn't throw an arrow but okay then we just leave it here so now um we have the round configure already so what we need now is just to take some data from server and then we need to render it here like the playlist so the component is going to be reusing a lot i think so we don't really have to do we don't have to write this this kind of component like from the scratch so okay maybe just go and then finish some data so in order to have some kind of data we need to install it and because this uh spotify is like very interactive so you usually after you you load the list of album and then we go back to playlist and when you go back to your home you if you don't uh want to like reload the whole thing you know it might still take the same list available from from the memory and usually what what i do so i just save it in the memory as well and if i make some changes i will force the store to refresh the the the state management and then i will has a new fresh data from server but if i don't make any change to the list available it is just a waste if we go back and forth to the server and then you know when you go back to mail album you go to server asking for the same information again well actually you can just render the same data on on the memory okay so that uh let's put in some feature then so we need a new uh library which is for data access so let's just create a new relations uh library yeah just gonna it's uh actually it doesn't have to be angular library so we just just create a new workspace library because uh it is just like some kind of ps file and model and and that's it it's like ngi store and then there's some kind of model and i think we own own vote so maybe just uh do a new um director yeah so just play the access under the same folder so under the same web album so it's going to create a new folder named data access and then because it's not an angular library so we will have less option but we still want to do a strict mode and then just time here it takes data access and then support this that's environment just keep it the same gas dom is something for chess to simulate the the dom environment in the node environment that is relevant to jazz i think and uh yeah i think we all good just just let me verify quickly okay look good okay so now in the album we have a new folder called their access and in the source folder in the leaf you know they just create a new thing for us which is just uh a function and then there's a there's a test and we don't need on that what i do is like in in the in the data set usually this could be some kind of data model that you wanted to to use and also um some kind of um some kind of store store thing relate together so i usually just put new for the chrome store and then we need a reducer we need a reducer a set of reducer and action and selector for querying the list of album so let's create a new file we should call it [Music] dot action they said we should always consider to create all of the action first and then when you handle all of the action you start to move on to the reducer to define how the shape and everything look like and and then after that you start to go into the effect and then we start to write code uh for some kind of uh side effect uh you know some action that that could potentially introduce some kind of side effect and then at the end you need to specify the selector which is what you really wanted to take from the store so i just go ahead and create this album action because it's going to be very similar to what i had before so i just come back to the playlist and i'll just take it uh easier that way yeah i think a little a lot of people saying because you need to write a lot of kind of boilerplate and you know it just it's just uh when you have a set of action you can just copy it over again so you just need to do one example which is good and you know following you just need to copy and paste or if you feel like it's still too much for you you can consider using ngis data or ndi entity which will produce a lot of boilerplates but at the moment this is just demonstration of you know education purpose so i'll just type the same set of action and then we will create it so it has the load playlist and then place success and then also playlist error yeah i'll just take the tree which is corresponding to the album so when you go to this album slash on the ui you want to enhance the list of album here which is your album yeah okay i'll just copy it first and then yeah okay so there's a create action and for some reason you know vs code doesn't lie under this import maybe like i mentioned my library and my machine with just anything of ram so it was too slow but i don't know okay so there's a playlist store maybe we just change it to album [Music] and then the spotify api here because when i create a new library it will just overwrite it in time here if i need to remove it and just restart the ts and then now it's going to take this spotify api i hope okay so it's recognized the spotify api so all of this spotify api i'll just type from one package on the type so we own test order one of the uh typing for working with the api so i think it is time slash modify spotify api so it is just the time definition for all of the uh of the response from the spotify api so we can use okay so we just need to change it to all of that need to be and then also here and here the album here is not list of user planets respawn this is going to be album except for using my phone yeah i go inside no it's i think it's another one i think it is save user save and respond because uh i already prepared one of the api so that we can just call it later on so let's open the album here or slash api something so i prepare this service so that we can just you out of the box so you don't have to worry about configure it so it is just user safe it will respond then yep i think we have the right thing so when we have this okay don't put that so now we need to move on to the okay so i just show you the quickly so all of the api from spotify you can refer into this documentation and at the moment we wanted to get the list of album from user save the one that i'm having right that is the one that i'm having so it just basically slash me slash album that i configure on the code that you can see here umti which is set slash me and slash album right yeah i'll just zoom in i just zoom in a bit so that you can see uh easy and then it's just return the the response from this is the same elbow just close it so now we need to start to handle some kind of action so let's okay so let's go back to playlist again that's how i do i just know a lot of time i don't buy a quote from this question i just look into what i did and then i can just refer to it so we actually do side by side so you can uh see it quickly so let me create a new album dot reducer not yes so the reducer is like the place for you to um to describe when this kind of action is happen what are you going to do with your data on the store yeah basically it's just very simple that way and if you think about it in the implementation is it just a function basically it will type in a current stage and then there's a there's an action and you know it's just a swift case and then you do all kind of stuff inside uh okay so we're just uh following this uh playlist because i has the generation which basically i has a property to store all of the data and then there is the standard and i can base on this data to either so the loading spinner or maybe i just saw the error and then i also has the error message which is now it just a string or none which is like doesn't have anything oh hi dan uh thanks for joining so um just go ahead and then after export the interface i need the interface here because um in the playlist i has a map like a dictionary that i uh store a key of the playlist id to a playlist object so that to retrieve it easy in the future so when i i go to the web i load the playlist and then the playlist on the on the right that you guys are seeing here no it's not the playlist this is the playlist the playlist here and the playlist on the on on the nav is basically just the same like that i don't do two queries too fast all of that i just do one query and then when you go into the playlist i wanted to take this pilot detail quickly that's why i also has this map so that i can retrieve the data instantly instead of going to the list like through the array and then do the file i just do map dot yet so it is just like instant like a one over one which is you know you want the center of that like it's not a win it's only a one it is faster that is the whole reason to have this map but now i don't have this map yet so let me just do a time so i just call it um album them and then it's gonna it's not gonna expand so the ties need to be do something like s okay so to do one interface easy which for some reason it also don't like it i don't know why so we need to import it manually get the ring of something so just import the restart from 45 45 and then [Music] and then there's a spotify api that's working for api dot users i think so i just created a new album that extends from generate set so i already have the link down property i have status property and also high has the error property uh good question then um i don't i don't use uh entity yes because uh this is just a simple project and at the moment everything is look like a list but i also need some kind of custom data structure so i don't put an entity yet but i think you know it's easier to show you guys how to write the reducer like purely with just an array and stuff and then from that moment on we will migrate that into entity adapter is going to be easier for you to understand so that's that is my reason so first we need to see how it was written like originally and then we moved on with the with the more advanced uh capability that the ecosystem supported i think it answered your question so just do cons so we need to instead which is having this shape of this above step and here i'll just do this one of these it's none um an error the third is pending because i don't do anything yet maybe it's not a good name but i don't do anything here so now i turn to columns and then alpha producer which is using the function crease reducer from um ngrx and then it's just plug in [Music] like argument so that you can handle different uh action based on the on so we use usually like before we have to do all of this uh squeeze case and and before we just return the set so now they just introduce the on which is easier for us let's just do the first one then we take uh the elbow okay and when you has the load album the next argument is gonna be you can take in a stat and then you can get some kind of uh like data from reaction like the you want to so for this load album it's very simple because we don't support infinitive loading yet so i i haven't passed in all of the param like offset and limit but um yeah we will do it eventually but now just keep it simple so i just call load album and then it will take the card instead and then it trying so now we wanted to just say let's update my state and just keep whatever the stat is having and then putting in the error it's none we just wanted to clear the error when you refresh the new data because in the use guy when you face data and then it's error and then you try retry you wanted to clear the error message that's why we try to also put the error down here and then the standard is like it starts to be loading so we just put load it in in the um in the standard and then the next action we are going to do is like when the thing when this lost album is come back to us with the data from the server um so we just take the load album succeed and then also inside there's a step but then now we need to also take the response from the server from the axon itself so you can type in the the second argument which is the prop and then you can destructoid like we shot it already okay so just put it this way um i think now we just need to um [Music] so basically here it's just basically the prop that you set okay so it is the prop and the problem here we define is as the album who has a key album with some kind of uh data which is coming from solidify so let's go back to the action so that you can just like connect it easy so here we say this action is gonna it's gonna accept like a prof with basically it is an object has one key name album and the album here is basically another object with this shape coming from spotify so um we will take the prop here and you can extract the album from the prop that's the idea then also because we do uh immutable so we need to return whatever you are having and return into the new uh object if you feel like you wanted to use like email and you wanted to do just basically something like not this spread a lot you should stand up like beta dot error let's go to none so you need to configure it with ima but at the moment i think i don't i don't have it configured yet so email is basically it's just the syntax you look and you write it's look like you are mutating the object muted basically changing the object like you update the object and immutable is basically you wanted to give the new object every time you like doing an operation so that it is pure so if you mute the object over time at the end you call different function like no you've got the same function over time it's gonna make the object differently but if you do like um return a new object over time you know it's gonna be pure so uh email is basically saying if you still prefer the our syntax to mutate the object but still wanted to have the capability of immutability so you just configure ima but at the moment i don't have it configured yet so like uh still doing the uh the other thing so when is come back with the elbow we need to update just basically stata now is completed which is like succeed right then the error is also none because you know you can set it to make sure enough it's not none string and then you need to update the data that's the more important thing the data is going to be corresponding to the album here yeah because when we configure the constant we were saying you know just uh take in the the list available and save it to install and uh yeah and now you see just update the the update the uh the data key and when there's an error our error is gonna be easy actually my friend chow um one of the admin of angular vietnam group he helped me to write a um like ihs operator so actually we don't really need this on like error we don't really need the arrow action anymore but it is gonna come in like a few week time we will test another live stream and then we can plug it and then you can i can see it so after talking for a while my boy is dropping it is like my english after maybe like half an hour talking it just came down so low it's like that i just cannot keep like my normal voice sorry guys um so on then we do load error and then here we take the same thing as the stats we need to return something but return something because we return an object so we need to drop the parenthesis and then there's a state up we need to obviously just follow the same thing we update it to error and then here we also update it um error status error and then we need to update the error message we do we has the arrow here i think he has the error i also press in the arrow so yeah let's update the error message okay i think it's good for the playlist uh for the album list okay then uh maybe now is the time to actually configure the effect so that um when this load album calling because now we just basically update the the the the store so we need to actually make an api code so that we have data from server but we don't have it yet so usually that part is gonna store like it's not no it's not soft it's like it is gonna be stay inside the effect which is another packet from ngis all of that concept is quite uh complicated at the beginning but when you get into it so just look it for ngi effect and it is the [Music] um it is the uh kind of provo provide you the way to interact with service like with maybe third party api and something that can do again can you can make things like some some long running tasks like the long process like web socket and also i think you also can use effect so that your component is easier to test for example if you do the http fetching inside the component you also need to mount the service and stuff but when you has the effect you just dispatch an action called load album for example and then you only test all of the service and everything inside the effect itself so you don't need you really need to mark the component and start i don't really write tests so that is the idea that i understand and uh all of the easy testing i also will have the a new session with my friend joe if you don't know i mean if in case you don't know what is like hui chow and them is that they are the two uh admin of angular vietnam and uh sorry for for change the topic so quick so that is which is one of the zidi the first gd in angular and vietnam and the second one is my friend cho and the two of them is the enemy of angle of vietnam and they are very strong on angular so a lot of advice i was i think from them a lot of them so outcoming there's a lot of interesting topic like you need testing refactoring everything and you know bringing in thing into component store instead and uh yeah i i hope you win uh also watch it in the future so too much uh science to nothing outside so come back to the effect so yeah in short it is basically the the there is the the place to listen to all kind of the action and then even react to the action that you are like you say i wanted to do something when this action is happening so effect is going to do it for you so let's create a new effect just copy the code i also forgot and [Music] i think that's the uh that is um schematic to create a new effect but uh i don't usually use it i just got used to all the do it manually so do it manually you know sometimes it's serious but it helps you to remember the syntax and if you have everything i was about sometimes you i mean in in daily life in daily job you don't really have to care about it but you if you go for a test like for an interview for example and the the guy asks you to write simple command simple application with angler and then if there's no schematic and everything is still for you it is difficult so unless you know when you write manually sometimes you will get the benefit from you remember to see that quest to you what it's not necessary because now the the the tooling is very strong but it is good that you understand it and you remember it somehow so just i can't create a new service it doesn't need to be provided and then just call it um playlists upgrades of this album effect to not service anymore so inside the constructor i just do enjoy the action from ndi action and then there's no action yeah okay then um just uh okay i need to import them of course this is from [Music] the artists yeah this form and they are useful and the action here is uh because and yeah drop proper action number action and i also need my private uh album api which is the one that i show you just now so i need this album api okay i think i remember the syntax quite correctly so now we need to create a new effect we just call it load and what it does basically we just create a new effect with it it is like it does like in the as a soft basically it's like the oh like observable generator it's just a function and then you just return something and what i wanted to return here is i wanted to take this action and then i wanted to check if this action is of time load of action and then when it is the load album i wanted to do something with this load album thing and what it is so you can see here i am trying to also when i go on the playlist i wanted to check if there is uh the playlist already inside the insider store so if there is no playlist that is when i start to face the data from server but if there is so this filter will return phone and when the filter return phone which means that the observable will not emit any new event so it will not go down into the merge map function and even only triggering the the the load playlist only when i just call it when the store there's no data yeah that's the idea hmm oh sorry i need i need more water but here we we don't have the selector yet so we we just not put it in now so maybe we should bring this uptime to new life and then okay so when there's this action i wanted to do something because this after this uptime it is going to return you you cannot simply map because it's going to give you like an observable action so you want to take the action out you need to do like higher we call it like observable operator sro so you need to do all of this thing with map at the other thing like sweetmap exhaust map or like birthmap contact map the difference of all of that you can go back to angular vietnam things like oh i'm sorry i'm gonna get now we have one very good um um i think i think go for that i think he's like it is in vietnamese so if you understand vietnamese you can you can find all of the uh different from uh sweet map and all of the map but yeah i think it's quite tricky to get but uh in this scope of the livestream i just uh don't have the time to explain it for you sorry so we just practice mapping and once there's a match map we have the action here but reaction on the lost album at the moment we don't we don't really need anything from it it's like we don't interested on any prop because we don't pass down any prof through this action so if you start to pass down more like query parameter like you want to type uh the list of album from the offset 50 for example then we might want to use it actually but now we don't really need it so i'll just take it empty and then here in the merge map i'll need to return a new observable and oh sorry so just take this i will api and then do that to the safe level at the moment i'm taking in the optional parameter so [Music] what is this sound i just hear something not sure what what does it mean here's something that someone is commenting okay anyway just move on um okay so we hence this one and inside the the the the guest user self album we usually wanted to do some pie and handle it in time if you do it outside there could be some consequence and uh that part i would not like i'm not gonna export on that so i will not explain today i will ask my friend to join next time and then he will have you to really understand it so when i do the map and it has the album don't worry the arrow will go away when we start to edit and when enhanced the yellow i wanted to [Music] and also when it is error like yeah yes that's error at the moment we don't handle the [Music] handle the arrow uh action yeah such as we don't empty observe and now i think we are on code so we have the load and move effect and then when we trigger the load album it will start to go on to the server and then when it has the actually i think it's going to be outside the map and when it's finished loading from server it will this part now with it when yeah return and an action and these parties as well and when this error just doesn't do anything at the moment okay so now we have the effect and then okay starting to play this effect we are 30 minutes 30 minutes less than plan i think i will try to okay so today we will try to display a list of album when you go into this into this uh ui and maybe next week we will continue with the album detail then it seemed like it took more time than i was playing because um it's happened it looks simple it's just there's some piece of data and then when when there's data and you just render it on the ui but you know when you start to plug all of this tool together to to have it display on the ui is good for you quite a lot it is not like simple you just you know into the inside component you just there's a observable you just create a new observable and then you can display quickly but what we wanted to do now is a clean way of doing it so i hope you understand okay so we need to register the effect so let's go into the store so we need to export all of that first let's export from from the bottom where when i spot the album and we export the reducer and we do so not reduced and we export from the effect and now we will need the selector but okay so now when we export from the lip we just take everything from the store folder that you can see here yeah okay and then we what we wanted to do now is we wanted to also register it so if you go back to the browse the browse feature file we also register the um the tool feature we also need to register the reducer here and also we also need to register the effect in the cell itself so let me also create a key so that we can retrieve it easy let me go back to the um what is it is it inside yeah so just create a new key and i will call it album feature key and it needs to be [Music] just a string doesn't really need to be any fancy string then go back to the album shown we will need additional configure for now it's not here this here so we need store module and then okay whatever it still doesn't work see that's why we spend a lot of time when on on today's live stream because it just doesn't can't be i would suggest maybe we'll bring the town a lot more oh my god then we do four feature yeah now we just need to give a name the name is basically close it first because you know just now there's a there's a music playing so there's a full feature and then i will put in the young feature that doesn't work need to import it from the real access it access the access if here i have it so i can import it from there i need this picture key i need oh i need also the uh reducer i think i don't i don't respond okay i spotted it so i just do so okay and then then we move on with the effect module and we do just for feature and inside it's gonna take the effect this is the effect and first type in the um what we call it sorry yeah okay so for some reason after i import nothing from ngi so then you know vs code start to understand about the context and then it can give me a suggestion but it is not before so yeah what can i do [Music] okay then we are good when we register it and uh now what we wanted to do is just to basically select the album and we wanted to just display it quickly to see no we win we win this part uh an action to load an album and then we wanted to just um just take the album from the store and then we will render it and after that i think we can end the livestream today we will continue next week maybe so let's go into the actually forgot yeah after do calling for too long so elbow [Music] uh don't really remember what i wrote last week oh you can just do the first one is like just type the album step which is the whole the whole slide of the yellow feature so if we utilize the uh korean feature selector and then we just find in the key and then we pass it the time of the thing so we have the our step and we just find in the key which is the elbow vector p so when i have it after we have this uh album set we can start to just export and you can pick like the whole thing this one this can be you can call it like vm to just take it from the like take everything and then we can render it only in one shot but uh usually i just do all of that so that i can view so i will just get the category and then i also have the get category loading and most probably i will also has the gate criteria sorry category error but yeah so we just type one do the easy one so that we can move on good so it's going to be we will create selected folder so that we can have the memorize which means that if the the data because we are contact from data so if this data is not gonna change we don't want to trigger chain detection and if no it's actually it's not there yet i think so if this this data is not gonna change this uh album is not gonna file a new like we not emit a new value so that we don't because we are gonna use a same time anyway so if the observable don't emit a new value we will not mark the component for like for for for chain detection to run the generation or this component so we will save a lot of uh unnecessary render because you know store is less thing get updated all the time when you when you update the the go back to the stator reducer so when you like update this the whole the whole object which means that it will trigger the chain for for this for this selector normal if you don't you create selector because the whole object has been updated the whole object the whole step has been updated so you also need to to trigger the chain here but with create selector because the data is not going to change so we are saying if the data is not going to change i don't want it to get delayed the update from so like from the setting because it's just gonna fire a lot and station is like happening all the time so okay so we have the get album already and then now all we wanted to do is to export it i will select her okay and then now we just need to go into inside the album list component and then we win uh okay now we need to construct it we need to inject the store so recently they has the the concept of component store which means that all of this now you will you should not inject the store directly i think but you need to move everything into the component store but it will result in in more code right so now i will make everything simple i will just inject the the global store into the component and then inside the component when it is in it it will also dispatch the action to load the the album list and after that we will start to has the data to play around with yeah so let's do it so that's the store let's stop install here it doesn't work so just need to import it from okay so we need to implement it and then just need to click into the button to enhance the method and then when it is just in it right you wanted to do this or stop this right away you wanted to say you know let's load the elbow from here it will also import it because now you know it doesn't work again the output reaction that is fine sometimes it's quite frustrating when the component is like start to render on the ui i wanted to take the list of components and what we are having now should have it's like it will has it album and it is gonna be equal to this dot store but for some reason i need to pull it down first and then back that off and we do pi that's a pi of select now just send yes okay now i can bring it back yes for some reason when i put it on top and vsco doesn't recognize the the variable inside the constructor which is so weird which is i think it's like a massive bug whatever okay so now if i just type this album and then i'll just drop everything inside of content spacing then i just take this album and do first thing i think and you know we do date on top and technically you should see all of the data on the ui i hope you didn't see me passing i mean i didn't also prepare for the live stream so all of that is like i write with you guys [Music] it is still none so maybe we don't this part we haven't this pattern action to fast okay so there's a there's an error oh we dispatched it but then there's an error which we try to pass in this object oh okay okay get it let's go back to the album yeah because the f config here is okay so maybe let's just type the we need to take the base uil from it so it's not just the air config itself i understand so because the air config is the whole object so that's why you see it it's a say displaying the object objecting so now when you go back to album yeah so you see that there's slightly delay and after just like maybe one second the the data is displaying which one we wanted to do we to display also the spinner but okay maybe it's it's something else we can do it later on so now we just wanted to go in and then render it so that is look like this playlist and i think we can just reuse the code maybe let me open playlist and see what i what i did there so let's open the playlist playlist [Music] oh i have to apply this list okay yeah well maybe we don't need to reuse it so try this list is like it's been reusing between this component and then when you go to browse and then you go into it is the same component which is this playlist list so that you don't have the two components which is random same thing it's just reusing the same just the data outside we passing was different so let me open the ies spread this list i think it's going to call it this list component and what it is it's like it just takes the data and then it's just using the media component it is like the one that i i will design at the beginning so i know you know this is this kind of ui is going to be reused a lot so we can so for playlist the name here is going to be k-pop something and then there's a description but for an album the name here is actually the name of the album and then the tag here is just maybe the artist name i think so it is if you think about it is going to be very generalized so you go into the media open you will see there is a media cover and what i there's a lot of thing i put in so i just put in something sound like very generic so there's a title which is a big one and then the description and then there's a router uil and also there's a ui which is the special uh url like ui which is like something that i need to send it to spotify soda you can play music for it so there's a toggle play and okay so we just need to so we what we will do now is to render the the album and then i think we're done we will end the livestream and we continue uh with all the rest of the stuff maybe next week so this easy then i just copy it the comment right here is like a class i i was using in many places so because trying to repeat it is going to be just a grid and try to repeat all of this uh grid item inside and the minimum width for one for one item is going to be 180 and then if there's more width it will expand to one fr which is like the the the the the unit when there's more space and then if we divided it by by the number of items that is displayed on the ui so okay i think with almost there we can almost render everything so just take in that thing the housing go back to the album so it is like when you start to has all of the uh the shape the the the component ready it's just the the the underlying data the underlying setup was taking some time but when you had it the template part was gonna be easy yeah okay if it has instead of apply this i could have elbow and i'll just mix it up here i just take synthetics i need to import this is media because like i mentioned it is like one component per module so i need to import it in order to use it like this medium module but okay we have the problem when there's no suggestion that's why we need to import it manually yes start to look good now then that's an album that's this item and i think it cannot be released anymore it needs to be album the title i think the album here because they will give us more data like usual you see that's some more thing so that's the we added up and there's a album object itself maybe i just call it item so that it's gonna look easy otherwise it's okay not description no artist is gonna be tricky because it is gonna be you know there's a the artist here is gonna be an array of artists because one album could be a collaboration of different people so the artist here is is not just a string so for now i'll just take the first one and then it's just for for this uh for this uh purpose of you know showing you why but in reality maybe you should not do it okay so i just type the name of the first one and we test also the image i also try to pack the first one of the one and then the route uil is like the route when you click into it it will bring you to the the into the um album like detail so okay to do it quickly just to album and then [Music] it is not a good way to put it but you know i win i will reflect the elevator so now just for some demonstration purpose and this travel plays like when the the button is clicking so i will also take this item our ui okay and then i'll just type in the i just copy the function because the function here is basically i will emitting down everything from the from the media component upward and then now i need to inject the service to actually play the place the the the i will play the media so this part will just copy if we had a better way to do it but no and copy it i think it's like decided private yes okay so i'll just copy it it's the player api service and then i just need it okay so we are i think we are almost there so we need this player api and now we are we are there already okay now now always understand so that's very weird we need to subscribe inside the component and uh chow told me that we can we can omit this software if we are using a component store but it's going to come [Music] later on so now i expect when you click album it is not going to display the everything in one shot so you want to take one second but then you click it it should display in the same ui like we are displaying here yeah you see so it is actually not not a lot of work to make it work because it seems like i have the the the ui already for four other stuff so this looks like it's it is not a lot of work but when i start to build this component it takes me like at least an hour or already more so maybe you can play yeah okay yeah it's working working fire actually first time so now we have the id detail here right okay oh oh that's true rather oh just last id i don't need i don't need this uh i don't need this thing but i don't need the id so after it's refreshed i think it's gonna work so let's go into male album see oh for something it doesn't work this clip only this album doesn't work oh okay well maybe try this one yeah it's working and maybe we can just add in the loading quickly because as you can see on the playlist component it just it doesn't feel like if you like there's only this spinner and then if we have the loading it's gonna show very simple we should add the loading the spinner and then we will finish edit in common grid is outside the common grid and then we need to import the spinner module now we need the is loading which we need to take it from selector i go back to this together just take eq yeah because it's gonna repeat a lot so i create and see if we see you for that this is gonna call it youtube from spotify and then youtube then i think i need to see okay just practice doesn't work just take the story okay this one okay so it typed instead and then in the loading function it just type in also the whole another thing just type in the general instead of unknown time and then i just like the status for me okay so let's finish it let's finish it we are we are almost there we will refactor the code a little bit more later on but i think for the purpose of doing anything which is quite good this is loading and then this is slowing okay so i can just take this is slowing and then same so if it's true then it's been displayed the loading if it's four then it just you know just uh don't display it and uh when it is full i was expecting it needs to be either has the data or it could have some potential error and we will come back to it later on all right so let me please refresh it yeah okay you can see it you see just now there's a loading so maybe win right okay so we just kind of walk and uh maybe just play yeah it says when you click you know we need to to start to view the elbow detail and uh i will create a new live stream and then we will do it next week what do you think um and uh i think uh that is the end for the last show for today it's uh it's quite long it's like almost two hours but uh thanks everyone for staying until the end i hope you enjoy it i hope you understand my my vietnamese english and i hope you get the idea of how you can configure the feature configure the route configure the router and configure also the store with breaking thing apart and and when you need to just render it on the ui and when you start to has all of the ui component ready for you the thing is when you have data it's going to be just a piece okay so now you can see that we can just render it after we have it that's it like five minutes but to has all of this data set up and uh yeah it could take us maybe half an hour or an hour but i think overall and over time it's going to be a good structure so that we can stick with it and yeah if you um i have any questions just feel free to um you know you can reach me on twitter actually okay let me show it to you i don't want to do too much advertising but let me show you the theater i think that is my twitter so that is my pillar at uh i will also include it in the in the chat and uh if you have specifically any question and you are struggling on some problem you can visit angular singapore which is my new uh group that i just start like you know in the past few months and you can book a free meeting with me actually with us but at the moment it's like with me so i can have you on channel shooting or like you know maybe talk you has you need some advice or suggestion on your current architecture you can just go ahead to uh twitter.comg and you can find the link so that you can book a free meeting with me or with us and we can talk and thank guys and have a nice weekend thanks and everyone for joining today thank you so much and uh with that see you next week we will be with the album detail next week bye

Channel: Angular Singapore

Views: 1,039

Keywords:

Id: vEIxjcrXcDc

Length: 117min 5sec (7025 seconds)

Published: Sat Apr 10 2021