Angular 13 App From Scratch - Build Angular 13 Memes Generator App 😜😜

hey what's going on guys today we gonna be looking at how to create an angular 9 real-time means in generator app from scratch let's get started [Music] all right let's look at what we are going to learn in this video this is a meme generator app build with angular 9 and html5 canvas as you can see here we can select an image something related to the means then we can add the text to this top area and also we can add the text to the bottom area so I add drunk baby as a top text let's add an emoji you can copy and paste emojis from this website get emoji comm I am adding this emoji to this text before and after to give some kind of a mean look you know at the bottom text and also we can add the color to the text as well as color to the background after we are done creating the name image then we can download the image in PNG format by clicking this download image button if you noticed here when we editing the meme this all editing added to the image by real time let me show you one example change this bottom text as you can see here it immediately effecting to the image without refreshing the page we can change the color also in real time this everything will affect to the canvas image in real time this is the beauty of angular we can do this by using a yo JavaScript but doing this using angular is easy comparing to be JavaScript method I'm not saying that javascript is hard or anything else I am just telling my opinion hope you guys got the idea if you guys wanna learn from this meme generator using javascript let me know in the comment section alright guys this is gonna be a quick tutorial so if you guys want to know how to create an angular 9 have in detail you can watch my angular 90 total for beginners step by step video there is a full more than three hour plus video with the full explanation and that is a full package tutorial from design to deploy from scratch I leave a link in the description below hey before we dive into the tutorial please take a moment to subscribe to my channel of Taketomi this will give me a boost to do these kinds of tutorials and also don't forget to hit the bell icon to get notified when new videos are released and also if you guys like these kinds of angular 9 apps from scratch tutorials please give a thumbs up and leave a comment what kind of app tutorial that you want to learn next alright in this tutorial we are dealing with angular so first thing first we need to have angular CLI installed on our computer if you don't have installed go to the CLI dot angular dot IO and they simply follow these instructions still if you don't know how to install this please watch my angular 9 tutorial for beginners video you can find the link in the description let's create a new angular app using the angular CLI open your terminal or command prompt navigate to the project folder I am using this project folder inside my desktop so this is optional you guys can choose any project folder as you wish CD desktop CD Beauty projects now correct run this command to create a new angular pocket ng name and the app name meme generator no we are not dealing with routers in this tutorial so you noted this and hit enter select CSS as our styling method and hit enter then wait until it's finished this may take several seconds several minutes depending on your PC all right our main app is ready now open this newly created angular app inside the code editor I'm using this code as my code editor this is the angular file structure we only deal with this SRC folder now let's run the app and see whether there are any patters run the app open the integrated terminal and run ng self this also takes 30 to 60 seconds maybe now let's go to this URL localhost colon 4200 perfect our app is running without any problem that's why we are seeing this default angular app landing page beautiful now let's create the components as you can see here we need this neighbor component and this generator component just two components easy right go to the base code and create a new integrated terminal and run this command to generate components ng G this G stands for generate and C this C stands for components and give the component name navbar and hit the enter all right Network component is created successfully now create the generator component in G G C component name is generator and hit the enter perfect components are generated now let's add these components inside the app component open the separate component HTML file remove all of these default codes and add the neighbor and generate a component to this app component HTML app - naba and app - generator save this and back to the browser perfect now we can see the components instead of the previous default landing page all right let's start to do some styling I'm gonna use bootstrap as the main CSS framework so let's add boost up our angular project inside terminal run this command to install boot strap on our angular hap NPM I bootstrap and press the enter this H stands for installed once it installed let's import the bootstrap to our app open this style dot CSS file and add this import statement at import inside quartz bootstrap slash this slash CSS slash bootstrap dot min dot CSS and safe now let's design the neighbor component open the neighbor component HTML file and add these HTML mock-ups open and close header tabs inside this created deal with gusta + Mt - 3 and the custom CSS class branded inside this cave give the brand name meme generator and let's add an emoji to this site brand go to this gate emoji calm and copy this emoji and put this front of the text and the end of the text save this and back to the browser as you can see here this is how the inner wall looks with default styling let's make this now borrow some by adding some ceases open this now become poor on CSS file let's add some CSS to header tank margin top - 15 pixel height 150 pixels text-align:center padding:25px 7f 6f b save this end back to the browser looks perfect alright next let's add some style to this side brand I want to change this font so go to the phone store google.com and find the mark script font select the font now copy the import link paste the link inside the Stynes dot CSS file and save it now again go to the in browser and copy the CSS Gordon Abbasi Asus brand inside this paste that copied fall CSS coming next at the font size 255 pixels and the font color to ash three double zero II D a save listen back to the browser we have a problem here we cannot see the side brand properly so to fix this go to the now bar HTML file and change this margin top 3 2 and P 3 to empty file save this file and back to the browser awesome are now bar looks great now let's add a drop shadow to this now bar this time I will add this book shadow as a global style because I will use the same drop shadow on the generator components also so open this ty stop CSS file and they had these CSS codes clear the CSS class called drop shadow and the scope I just copy and paste this code you guys can pause the video and copy it down after this go to the Nova component HTML file and add the drop shadow class to this header tag class drop - channel save this and back to the browser looks beautiful all right let's move on to the next component as you can see this demo we have two sections in the generator component left side we have the generator form and right side we have the meme release cameras go to the base code and open the generator component HTML file and add these mock-ups div with an app class inside this another deal with gossip container class inside this container class another div with bootstrap grow to us now again another div inside this row deal with the bootstrap class called - MD - 6 this column d6 is because we have two sections left and right the bootstrap grid is well column grid so I divided this to two columns by equal size so this is the left side column we need another column so copy and paste this again perfect now we have these two columns said this left column is create the generator form I'm planning to put deform inside of a card so first tradable jacquard div dot card and the press enter inside this another deal with the card body class now create the form inside this card body form hit enter inside this form first we have to add the file input to load the image div with the foam boo booster class inside this label level text will be select an image after this input field so type input and hit they enter the type will be file class will be formed - control we only load images so accept equal sign inside double quotes at this image slash the star icon with this we are saying to this input file to accept only images with any image formats next we have to add the top text input field create a deal with form - group inside this a label that named top text after this label input tab with type text the class will be home - confirm and give input name as top text this T will be capital next is bottom text this also same as the top text so copy this top text form rope and paste it change the label text to bottom text and change the input name to bottom X step save this enough back to the browser yeah everything looks perfect now let's have the color picker to change colors for this I'm gonna use a third-party NPM package called ngx color go to the terminal and run this command to install this color picker npm i this i stands for installed and the package name is ng x - color hit enter after this installed open the app dot model dot T is file and import this model import open and close curly brackets inside brackets color chrome model from inside codes in GX - color and / chrome now go to the input section and end this color comb module after they save this file and sometimes this will show an error so make sure to restart the app control C to stop the app and then again run ng self to restart the app now go to the generator components training file and and this color - Chrome and hit enter save this and him back to the browser perfect color picker is working as we planned now back to the base code and remove this color picker cause I want to place two color Pickers in one row side by side for that first create a div with a bootstrap class row inside this creator div with Col - MD - 6 inside this div create a form group div and inside that deal create a label and give the label name as text color after this add the color picker to add the color picker add this red color - chrome now copy this all from column D six div and paste it after this first color picker rename the label to background color say this and back to the browser perfect everything looks perfect now let's set the download button down here create a button tag now add these classes plus equal sign inside double quotes add these booster classes BTN beteen - outline - primary then BTN - block type download as the button text say this end back to the browser awesome mean generator forms looks perfect alright next create the canvas on this right side back to the base code and go to this second cold days and type canvas and hit enter the class will be dropped - shadow cause I want to show a drop shadow to this camisole so so add this drop shadow plus to this chemist add an ID for this canvas so ash meme comes this is capital with will be 700 and the height will be 800 and let's add an inline style to add the background color to this canvas style equal sign inside double quotes background - color the color will be ash f9 f9f be save this and back to the browser beautiful now we can see the cameras on the right side I don't like the default style of this booster card so let's make this looks better remove this border from this card so open this generator component CSS file dot card border none' and also the drop shadow to this card we already have the global CSS for the drop shadow so simply add the drop shadow class to this card thief say this and back to the browser now this form card looks perfect look at this number and this generator component it's looks like the stacked on each other so let's add a margin to this generator area for that this everything is inside in this app and if so go to the generator CSS file and add this good app margin - top 30 it says save this and back to the browser everything looks perfect now so this is the end of the designing part now let's dive into the real business let's make this meme generator works so we are dealing with the form here so first import the angular forms module go to the a plot of module the TS file and add this import import inside curly packets forms module then from inside single quotes at angular slash forms then go down inside this import add the forms module and save this file now let's do the loading the image to the canvas first I want to catch the action when an image is selected from this file in copter it is JavaScript we can catch that event by unchanged event but in angular we can do the same by using the change event binding inside this file input operand close and inside brackets type change equal sign inside courts call a function something Raviv this function name can be any name then function parentheses save this if you noticed we can see an error inside the interpreted terminal that saying cannot find the function yes of course we have not created this privy function yet so go to the generator component T's file and create this privy function inside this function lock this privy function working save this engine back to the browser now openly browser console select an image awesome we got this log inside this browser console which means that pervy function is working perfectly now I want to show the selected image inside this canvas go to the generator component is file first we have to select this canvas is JavaScript we cannot do that by using get element by ID but in angular we can do the same by using the waves child decorator inside the class ko at wave child this V and C must be capital open and close the brackets inside these brackets pass the canvas ID as the first parameter ID is meme gems pass this as a string inside quotes meme canvas as a second parameter pass this comma inside curly brackets static false after this given name to the selected canvas just beaver name for this I just add my canvas next we have to capture the image inside this privy function and then we have to draw the selected image inside Dickens let's do it first pass the event object as a parameter to this preview function go to the generator component HTML file and pass the event object to this function inside these brackets dollar sign event save this file and back to the generator component ES file and we pass the parameter now we have to capture that parameter inside this preview function parentheses create a parameter variable E and type will be any easier this function first capture the canvas let canvas assign this dot my camera's if you can remember this my canvas is this input alright okay now again dot native elements this e is capital now let's prepare this canvas tor drawing object let CTX assign canvas this can assist this dot get context and parentheses we are going to draw 2d graphics so inside codes 2d in case if any of you don't know about this HTML canvas the HTML canvas element is used to draw graphics on a web page using javascript we can draw any shapes face text and also images inside this canvas so I hope you guys got the idea let's get back to the Accord we have prepared the canvas now we have to draw the image inside the canvas first create a new file reader of the to read this selected file let render equal sign new file reader and parentheses carefully follow this capital simple letters otherwise you guys will get errors next pass the file to this file reader object we are getting the file with this event parameter let's see what we are getting with this parameter so look this parameter save this file and go to the browser and open the browser console a select an image now we can see this printed event object inside the browser console if we look further we can see lots of stuff going on with this object we don't need them all except this files object as you can see here this is the object that carries our selected image this includes the filename modified date acceptor cetera so now what I am gonna do is grab this file object and assign this to the file object get back to the base code and type this render this render is this new file reader object now dot read as data URL so again follow this capital simple letters carefully inside brackets pass the file the file is inside this event so e dot target got files as you can see here this file is inside this target object and also I forget to mention this is an array object so give the index number which is 0 0 inside these brackets this finally - event handlers again of this vendor and save this file and back to the frozen sector file now we can see this list of event endless now what I want to do is I want to load the image from this file reader when this image file loads to this file reader for that we can use this unload event handler so this file later render dot unload assign function and parentheses then the function scope pass the event as a parameter for this onload event now let's see what we are getting with this event parameter block this int save this file and back to the browser now select an image this time we got this event log this also has lots of things going on with this event log if we look further we got this target object he said that we can see this result which carries our selected image data so this is a blob type data so what I gonna do next is creates a new image and assign this image data to that image so let's do that create a new image Const IMG assign name image and parenthesis this new image constructor creates a new image HTML tag if I lock this you can see here on HTML image tag the same thing we are doing with the document dot create element in JavaScript next time this selected image to this email in tak ing dot SRC assign event dot target dot result we are getting this error cause if you can remember this result object carried the image with blob type data so convert this to string has string put this log after this SRC assign save this and back to the in browser select an image perfect record the image tag with the SRC did we are almost done next what we have to do is the last step on loading this image to this canvas we have to draw this image inside this canvas so back to the vs code this image also has the onload event handler so ing dot onload assign function and the parenthesis then function scope inside this function let's row the image inside the canvas CTX this is the drawable canvas context then not draw it means this I must be capital inside brackets pass this ing this is the IMG tag that they want to grow inside the canvas so this CTX required three parameters first one we passed the IMG tag so as a second parameter we have to pass the left and right positioning and as a third parameter we have to pause the top and bottom positioning inside the canvas so Q 50s left and right positioning and give 150 s top and bottom positioning save the same back to the browser select an image beautiful we got this image inside the canvas so now we have a small problem here this image is larger than the cameras so give an exact width and height to this drawing image to fix this problem go to the vs code we can pass the item with to this drawed image first pass the width 600 and pass the height 500 save this and back to the in browser now again load an image perfect everything looks great [Music] we have successfully loaded the image to this premise until now if you guys learned something in this video give a thumbs up if you think on this tutorial is awesome share this video to a friend who needs these kinds of tutorials also guys if anyone is new to the abductor channel and if you guys want these kinds of tutorials in the future please consider subscribe and don't forget to eat the bell icon angry as I am looking for help can you guys suggest me some apps ideas that you guys want to include in my upcoming videos tutorials something like this or maybe something new or different anything take a moment and please leave a comment about your idea alright let's get back to the work now let's add the text to the tremors what I want to do is when I type something inside the text field I want to draw that text inside the canvas for that we can use the key up event binding so what I'm gonna do is first I am gonna use to a data binding to get the text and then call a function to draw the text inside the canvas by using the key of event simple right let's do the two-way data-binding inside this top text input square brackets and brackets inside these brackets ng-model equal sign and the variable name is top text save this and create the variable inside the TS file inside the global scope the variable name is prop text type will be string and assign this to Ana empty string next call a function to draw the text back to the HTML file and bind the key of event to this top text input inside brackets key up all simple letters equal sign inside quotes give the function name something draw text and the parentheses go to the TS file and create the draw text function all right now draw the text inside this function as previous we have to make the canvas drawable so copy this to line from the trivia function and paste it inside this draw text function we can roll the text using on this method CTX this is the in Roble context dot fill text previously used the raw image method to grow an image so this time we are dealing with the text so we used this fill text method then the parameters like draw image we have to pass three parameters for this first one is the text if you can remember we bind the input to this top text variable so give this as the text this dot top text next give the left-hand Holroyd positioning I want the text middle of the canvas so canvas not with / - and next give the top and bottom positioning I give undred for this save this n back to the browser type something inside this top text input we cannot see anything inside the canvas why is there closely didn't give a color for this canvas text rolling no it's transparent this why we cannot see the text ask you a background color for this we can give a text color by using the fill style method before this drawing CTX dot fill style so remember this s must be capital assigned for now just give a color code later we'll make this dynamic using the color picker I am giving in the black color for this inside codes hash six zeros save this back to the browser this time we can see this text growing inside the canvas but the font size is very small in scale font size for this text back to the vs code we can give the font size and the font using the font method see TX dot font assign inside quotes let's give a font size as 50 pixels and the font will be give something a fancy font type like Comic Sans m-miss say this and back to the browser perfect this time we can see the text clearly but we are having an alignment problem here I want to this text align to the center to solve this align this text to the centre say TX dot text align Center save this and back to the browser type something inside the text field awesome this time text is in the center but we have another small problem the text is overlapping each other you can see this when you type word these texts are overlapping on each other to fix this we have to reset the canvas every single time so we can do that by using the clear react method go to the vs code and after this C TX and before this text filling and this C TX dot clear react and parenthesis as usual pass the horizontal and vertical value as the first two parameters this time we are resetting the canvas so give zero for this both values then give the canvas size width and height get the same within height of the canvas so for that canvas got it and canvas load height save listen back to the browser beautiful now we can see the text without any problems and this is looks perfect now do the same for the bottom text also first by in the data to a variable inside this bottom text input and the ng model and si need two variables called bottom text now let's create the bottom text variable inside DT is file bottom text type will be string and assign it to an empty string now let's call the function to draw the text copy this previous key up event and paste it inside this bottom text input say this n back to the TS file and go to the row text function and now we have to row the bottom text after this C TX dot fill text inside parentheses the text is this time bottom text so this got bottom text left and right positioning the same as the previous drop text so copy this and paste it and top and bottom position is this time I want to question this text in the bottom side so give us 750 for this save this and back to the in browser I have something inside the bottom text input perfect looks great and next at the top text also everything looks perfect alright now add an image awesome now try to change the text oh what's going on when we type a text suddenly image got disappeared why is that happening [Music] we trying to type a text on this both top and bottom text this will call this bro text function inside this function we are resetting the canvas so that's why this image get disappeared when we're trying to type something inside these text fields how are we going to solve this problem very simple we have to call the preview function again from this raw text function after resetting the canvas after this reset this brought relief and parentheses to call this function preview we have to pass the input file event this is inside this privy function so this event is not a global value so we can't access that event from another function to solve this problem let's make this event parameter global create a global variable called the file event type will be any and now go to the preview function and assign this event to the global file event variable this dot file event assign this parameter event now we can access this file event from anywhere inside this flask oh so pass the global file event as a parameter for this function save this and back to the browser now add an image add the top text now add a bottom text looks perfectly now again try to change the image and change the text perfectly this time this image is still inside the canvas not in disappeared like last time alright now let's make the text color and the canvas background color dynamics by using these color because let's do the text color changing first we have to capture the color then we have to pass that color to this canvas we can capture the color by using the on change complete event binding go to this text color picker inside this color chrome tank add the event in send brackets on change complete and call a function own canvas text color and the parenthesis and pass the event as the parameter for this function inside this parenthesis dollar sign event save this and go to the TS file and create the function canvas text color and get the parameter role assigned event and type will be color event and select the photo import import will be something like this if you don't get the auto import just simply type this import we can get the selected color code from this event parameter but I want to pass that color code to this raw text function and want to assign that color to this context face tile to do that assign on the text color code to a global variable then we can access that global variable from this function inside the telescope variable name is text color type is string and assign the black color code as a default value now go to the canvas text color function and assign the color code to this global variable so this got text-color assign dollar sign event dot color but we are getting the X code so hex now go to the raw text function and remove this hand coded Xcode and assign this text color global variable to this hairstyle in order to work this we have to call this function from this canvas text color so now save this end back to the browser type something inside the top panel bottom try to change the text color beautiful you can see the text color changing in real time when these select colors from this color picker all right do the same for background color also first add on the event to the background color picker copy the previous event and paste it inside this color chrome tank change the function name to canvas BG color save this endeth back to the ETS file first create the global variable for background color background color type will be string and default color will be the canvas default color ash f9 f9f B now create the canvas BG color function and assign the color code to the background color global variable and call the function row text from here now go to the draw text function and add this to add a background color to a canvas first we have to assign the color and then we have to apply the color to the canvas to assign to the canvas CTX dot fill type assign this dot background color now I apply the color to the canvas it is same as the Clery Act so copy this and paste it here change this clear react to fill react others are same save this and back to the browser now select an image type top text and a bottom text and select a background color perfect as we can see here selected background color applied to the canvas all right the last thing we have to do is download this generated mean as an image we can do this by right-click and save as image but that is not a good practice so I decided to add this download button so now let's make this download button works let's call a function when clicking this button inside this button biindiy click event call a function name called download image download ing and the parenthesis next create this function inside the tea is fine download ing and parenthesis then function scope so we are going to download the canvas as an image so first get the canvas let canvas assign this dot my canvas dot native element this time we are not going to draw anything inside the canvas so no need to create the drawing context next convert this canvas to an image format to do that let image assign canvas dot to data URL carefully follow this capital and simple netis inside brackets double quotes inside this we want to change the canvas to image so Q image and slash give the image type PNG all right now let's download the image for that first create an anchor tag then assign this image to web anchor tag and download we can create an anchor tag by using javascript let link assign document dot it element inside these brackets we have to create an a tank so give a inside course next Weaver download the file name this link dot download assign inside quotes meme-ing dot Eng next pass this image to this anchor tag so link dot X roof as I in this image the next trigger the download for that we have to click that anchor tag so link dot click and parentheses save this end back to the in browser now this time create an awesome me then click this download button perfect generated meme successfully downloaded to our PC alright guys we are successfully completed the meme generator angular app this is the end of this tutorial if you guys enjoyed the tutorial please like this video and share with your friends if you guys wanna watch these kinds of tutorials more in the future make sure to subscribe and hit the bell icon and leave a comment about some app suggestion that you want to learn to build with my upcoming videos thanks for joining with me guys let's meet with another awesome tutorial until then stay safe and learn spot not hard

Channel: OctAcademy

Views: 2,147

Keywords: Angular 9 App From Scratch, angular app from scratch, angular app tutorial, angular tutorial, angular, angular 9, angular tutorial for beginners, octacademy, angular 8, tutorial, learn angular, javascript, angular 9 crash course, angular project, angular application, angular app, build an angular app, build app, create angular app, angular ui, user interface, user experience, angular user interface, angular framework

Id: jt4IHKCqAHk

Length: 54min 25sec (3265 seconds)

Published: Tue Jun 23 2020