Part 3 : Angular Project creation and PrimeNG Installation | User Registration & Login Form

so our next step is to create an angular project using angular CLA for that wherever you want to create a project go to that folder so I'm going to create a new project inside the angler folder so from there you can open a terminal then you can type NG new then the project name so my project name is angular SL Prime ng/ app and also I'm going to use the rooting so because of that I'm giving a flag routine so it will ask for some questions you can answer that then it will install some packages so I'm going to use CSS here and you can see app rting module. TS file is created because I'm giving the flag rooting as true so if you're not giving the rooting it will ask for the question like do we need to use a rooting or not so it will take some time to install all the packages so the installation is done the next thing is like you can go to the project we have created now so it will be CD then angular Prim hyphen app so once we uh go to this angular Prime app you can open if you want to open this code in any Visual Studio code you can give the command code dot then it will open the visual studio code with our project which we have created now now you can see the project structure the node module has been uh added because it has all the packages uh which were mentioned in the package store Json our next step is we will run this application in the browser and see whether how it looks okay so for that you can press control back tick on the Windows machine and you can add the command NG Ser for opening this application in the browser uh under the port 4,200 so if you want to automatically open in the browser you can give the command hyphen hyphen open then whichever the default browser you have it will open this application in that browser in the port 4,200 so it is comped successfully and it is opening on Local Host 4,200 and you can see some content there right so whatever the content displayed in the browser which is coming from the app. component. HTML so you can clear all the content and simply give the hello world once you press save button the browser will refresh automatically and it will update the content so we don't need to hard reload it okay so project installation is done so our next step is we have to install Prime NG Prime icons and Prime Flex for that you can again open the terminal and click on a new terminal and you can give the command npm install if you want to install multiple packages you can separate it by space Prime NG then Prime icons is for adding the icons and Prime Flex is for adding the CSS class so we don't have to write the CSS manually by default Prime Flex will provide a lots of useful CSS we can use that instead of manually writing it if you want to more detailed about the installation you can go to the prime website which will have the all the installation steps so once this is done you can see in the package. Json which version of the Prime Flex Prime icons and the prime NG is installed okay so once that is done what you can do is you have to add the node modules okay the CSS the node modules uh in the angular Json file so go to the angular Json file and under the style section you have to provide the node modules of the themes and the prime NG minified CSS and the prime Flex see this needs to be done and then what you have to do in order to add the icons you go to the style. CSS uh file and you can give the import state M of the Prime icons so if you want a detail step about that one go to the installation step and here you will be able to see the prime n the same way Prime flex and the prime icons okay once all these step is done make sure you you exit the application which is already running so I'm just exiting the application and then Reserve so NG serve hyphen hyphen open closing it now it is open in order to check whether we have installed properly you can give the class from the prime Flex so there's a class called flex and I'm telling we have to add justify content centered so if we give this class we can check yeah it is Center aligned right it's the flex justify condens Center Flex property is applied to this STP so our prime nng prime flex and the prime uh icons installation is complete

Channel: Learn from Scratch

Views: 1,017

Keywords: angular project creation using angular cli, ng new angular project set up, primeng installation, primeicons setup, primeflex setup, primeng application, angular, angular examples, angular project, angular primeng project, angular primeng project for beginners, angular primeng project set up, angular primeng app step by step, angular primeng app with authentication using json server, primeng app, Angular CLI Project, step by step, user login & register, part 3, project setup

Id: KiGGvXM5T4g

Length: 6min 25sec (385 seconds)

Published: Tue Oct 03 2023