Angular/ThreeJS - Video 152 creates font list interface.

hello everybody so yeah so uh we're slowly moving through this being able to make the dropdowns make the uh fonts selectable um so right now we have two fonts we have the heler and then we have the hiter Bold um so um let me see I have Hello World in there so for the picture so let me uh go ahead and so that I'll be able to capture that as my screen uh for the uh thumbnail for this video um so the next step is uh going to be I'm probably going to be doing these steps a little slower because I've had sort of a change in life where I'm probably not going to be able to go as long on these videos which is probably good news for everybody involved and it actually is a very good thing like for one year for year I worked on a project where at personal project where I only allowed myself 300 seconds to work on the project per day and the benefit I had on that is because when I first started it would take me literally the first 300 seconds to even come back up to speed to figure out what I was working on and after a while I got to where I could write code that I come up to speed quickly on so this is probably going to be good for that um but what I need to do is have an interface that describes um the whole the whole object because basically a I need a string and I need the promise um in different circumstances um the Str string for the drop down the promise for the actual font to get the font and it's a special kind of Promise so if we scroll up to the top here um we see that we have a promise that is uh that has a spe setting type I don't know what the word for this is but um a a strongly typed promise of a font so basically I'm going to go into my interfaces and I think this should be in the mesh interfaces and I'm going to create an interface that describe something that has a string which in this the string would be heler regular or just heler and then uh the other string would be haker bold and then I want those strings to also be strongly typed if at all possible I think that is possible it's not possible in the dictionaries but I think it's possible with just regular arrays so I'm going to go into my mesh interface and this is the object that I want to capture um so the the type it's not a type it's going to be an interface so export interface and it is a uh font font um I think I usually throw the word interface I don't know what interface I like that a lot and basically what it's going to have is a name which is a string and it's going to have a uh promise which is a that and then the font hasn't been imported yet so we want to look carefully at this okay that is the right thing it's coming from three um you know font is definitely something now we really don't want this just to be any name any string so we're going to create a type export type and this type is going to be font name and this font name at this point can be hel heler and I don't have oh there it is Hell okay so it's got an e and then ier or it can beider bold I think that's how we typically do it okay so that so now this name can be it's of type name and that's all it's allowed to be now let's see how far in are we we are four minutes in okay I maybe I can do a little bit more uh so in our three service we are going to have a at the top we're going to have a list of fonts and that is going to be a private list and this is up for change you know so um fonts and this is of type and it's the type we just created so I can just hit alt back font interface and it's an array and I'm just going to started off with this like that and now font interface needs to be imported we want to make sure that we get it from our meshes and uh basically now what we can do is we can say that the we I don't think this should be a capital f so let's just go ahead and populate it now fonts. push and one thing is uh Name colon and it should have held by Hower comma and then did I name that promise and it's Ur regular promise I wonder if I have to say this no I don't know what the problem is here um okay fonts is declared but is never read okay that's fine oh say font list P just what's your problem maybe we can put this in the Constructor no it's not okay so that's oh that's funny okay so that's better and then this probably needs to be this all right so that's good um we did that so we might as well do that for the Bold one since that should only take a second bold it's happy I B promise okay so now what this gives us is a structure that we can have access to uh we'll next um so basically the the template will need access to it so we're going to have to I'm going to need to add uh this uh signal like a signal that basically uh announ publishes so that the um uh component can have access to it and then uh this uh uh service will have access to it uh in the future when we break out like the probably one of the very next things we're going to do is pull out the inside of material inside of this service we're going to pull out all the material stuff this obviously go with that um so we may have to come up with uh some other way um to communicate this into here but that's that's not a fish to fry later um but yeah so this is good um this is the next possible step I think the very next thing will be will be to add that uh mesh to the um or add that dropdown that has these two names in it uh that'll probably be the next thing to do and then um then after that we will have uh we we can figure out where to go from there but it is probably to um actually execute the two or check the to use the promise all to make sure that all the promises are loaded before we do any um text stuff anyways happy coding everybody bye

Channel: Marty Trujillo

Views: 50

Keywords:

Id: ZVS4o426ulg

Length: 9min 49sec (589 seconds)

Published: Mon Jul 01 2024