Transcript for:
Comprehensive Guide to Angular Framework

[Music] hello everyone and welcome to this video on the angular full course by edura angular is a powerful platform and framework for building single page client applications using HTML CSS and typescript developed by Google it provides a robust set of tools and features including a component based architecture two-way data binding dependency injection and an extensive ecosystem Ang enables developers to create Dynamic efficient and maintainable web applications it strong Community Support extensive documentation and regular updates make it a popular choice for both beginners and experienced developers aiming to build modern web applications with that said now let's outline today's agenda for this angular full course we will begin with an introduction to angular where we'll cover its key features and why it's a preferred choice for modern web development next we will dive into the angular CLI which streamlines the development process with powerful command line tools moving forward we'll explore angular components the fundamental building blocks of angular applications followed by angular templates where you will learn to create Dynamic user interfaces we'll then cover angular data binding showcasing how to bind data between the model and viewing seamlessly followed by angular directives which allow you to manipulate the dome in creative way we then continue with angular dependency injection a core concept for managing dependencies and enhancing modularity we'll then go through angular routing and navigation teaching you to build single page application with multiple views as we progress we'll dive into angular forms focusing on handling user input efficiently and Implement angular crude operation to manage data within your applications we'll then integrate styling with bootstrap to ensure your applications are visually appealing and responsive additionally we learn to develop an angular application from scratch combining all the concepts learned finally we will discuss some frequently Asked angular interview questions and answers to help you prepare for interview but before we begin please consider subscribing to our YouTube channel and hit the Bell icon to stay updated on the latest tech content from edura also visit the edua website for the Ang certification training course the link to which is given in the description box below now without further Ado let's get started with our first topic introduction to angular now let's go ahead and start with learning about building blocks of web development now to develop any particular website there are certain common and basic things that we have to keep in our mind so the most important thing for developing any website is the look of the website now how do we do that we use something called as HTML most of us are already familiar with it now since you have come here to learn about a particular framework it's important that you know the basics of JavaScript now Javas JavaScript is something that will help you verify validate all your forms and web applications that you create now this is been done by certain Frameworks these days one such framework is angular now next is CSS and this is used for styling our websites so HTML basically provides basic structure for your sites now CSS and JavaScript is used for enhancing and modifying these websites with usage of other Technologies so basically CSS is used to control the presentation and formatting of the layout as I've mentioned already and next JavaScript controls the behavior and different elements in our web application now since angular is a JavaScript framework let's learn more about JavaScript so basically it is a text Spas programming language which will allow you to construct interactive web pages on both client and server side now before Frameworks existed JavaScript was creating interactive web pages on only through client side now after the eruption of Frameworks and nodejs we can create both on client side and server site now speaking of HTML and CSS they basically provide structured and aesthetic web pages now JavaScript adds interactive components that keep users engaged now since we have spoken so much about JavaScript it's high time that we get introduced into Frameworks so as I mentioned Frameworks make our work easy they basically cover all the concepts that otherwise you need code redundancy while just creating using JavaScript now on course we have numerous Frameworks that has been developed so the majorly used framework is react angular and many more so JavaScript Frameworks basically are pre-written JavaScript programming libraries that may be used to perform common programming operations and activities now it's a framework for building web pages web applications Etc now as I mentioned reactjs angular jQuery nodejs are commonly known Frameworks which are widely in use with that let's go ahead and have a quick introduction to angular now angular is basically an application design framework and development platform for creating efficient and sophisticated single Pages application now here I might also add that now with enhancement of software including single page applications there are multi-page applications being created on course now angular is basically a development platform built on typescript typescript is a programming language or a JavaScript built language now this also includes component based framework well integrated libraries a suit of developer tools which will help you build test develop and update all of your [Music] code going back to the history of of angular versions the first ever version of angular was called angular GS now again it was developed by Google in the year 2010 I may also add here Google is the official developer of angula developing all upcoming versions soon angular got its popularity as the static HTML Pages could be turned into interactive using angular GS this again obviously came with a lot of drawbacks and here angular 2 succeeded the angularjs version again since JavaScript version had a lot of pitfalls a typescript based version was introduced this was the latest version of angular version with this the versions just kept upgrading the latest version being angular 12 angular 4 is the most popular one now looking at some of the statistics according to a survey held in 2018 angular is the second most most frequently used technology in the Frameworks libraries and other Technologies when I mean angular it includes both angular GS and angular another survey told that about 36.9% of the engineers accepted using angular GS or angular 2 version to create impressive user interfaces now talking about the future releases of angular since the version 9 of angular the team has moved all new applications to use the IV compiler and runtime each version is set to be backward compatiable now it's also said that official developing company has owed to release two upgrades per year now since angularjs is the first version let's get to know more about it angularjs is a tool set for building the framework which is most suited to your application development it is basically a JavaScript based open-source frontend web framework that will help you to develop single page application so this will help you create an environment with features like extraordinary expressive readable and quick to develop for applications that you want to build so initially HTML is great for declaring static documents but it falters when you try to use it for declaring Dynamic views in web application now this is where angular GS lets you extend HTML vocabulary for your applications now here you can see JavaScript based files to develop an application using angular GS as you may already know the JavaScript is basically a text space programming language used both on client side and server side which will allow you to make web applications interactive now moving on we have some of the features of angular GS now along with the features mentioned here they also have features like dependency injection increased productivity along with some negative features like not browser specific now speaking of more upgraded version of angular as you already know by now angular is an application design framework and development platform for creating efficient and sophisticated single page applications now angular is basically a typescript based open- source web application framework here I may also add that it is a completely Rewritten framework that is taken from the same team that built angular GS now angular is a platform that includes many features like component base framework which helps you in building scalable web applications and then we have collection of well- integrated libraries now also Suite of developer tools to help you develop build test and even upgrade your code now here you can see typescript based files that's been used to develop an application using angular so typescript is a programming language developed for large application that trans compiles to JavaScript now speaking of features of angular apart from the ones you see here on the screen there are many others such as it lets maximum number of users it's very simple and expressive data binding and it has fastest loading capacity now let's look at the factors that differentiate angular GS from angular firstly you have architecture now angular GS supports model view control architecture the business logic goes in the model the desire output goes into the controller and the angular handles rest of the processing Angular JS generates the model pipelines automatically on the contrary angulars building blocks are components and derivatives that follow a preset template they give applications a modern framework making it easier to design and maintain large applications now here in angular they use view view model model kind of architecture you may call it as mvvm secondly we have language differentiating the both as we've already come across by now the angularjs uses JavaScript and angular uses typescript next we have dependency injection in JavaScript base angular dependency injection it occurs via various link functions controller functions and derivative definitions angular on the other hand uses declaration constructive functions and provides a hierarchical dependency injection architecture now we have angular CLI or your command line interface which is used for generating component Services Etc and even complete projects quickly and efficiently I may mention here that angularjs does not use command line interface while angular uses command line interface now speaking of expression syntax wise syntax is the set of rules by which the words and symbols and expressions are correctly combined and angular is more intuitive in that regard while Angular JS is not now speaking of performance wise angular is much faster than angular GS two-way binding is something which was made originally for angular GS and it keeps checking each scoped variable with its previous value using digest cycle in contrast angular has a flux architecture where change detection is done through unidirectional data flow making the application much faster now speaking on compatibility wise angular Gs does not provide mobile development but angular does and hence it is mobile compatible now let's dive into the advantages and disadvantages of angular GS JavaScript is much easier and faster to learn and hence angular GS became easier but on the contrary if the application has JavaScript disabled the application will not run on it next speaking of MVC architecture the MVC architecture of angularjs separates data from design but the con is that the developers must be familiar with MVC architecture to use angular GS some more advantages are added to angular GS like it supports faster coding and prototyping decreasing development times immensely clean and organized coding makes angularjs codes highly reusable two-way data binding facilitates faster and easier data binding now taking a look at perks and cons of angular the components of an angular application are quite independent and self-sufficient which makes them reusable and test friendly but typescript is hard for everyone to learn and many developers are not compatible with statistically typed languages speaking of bks the independent components are easier to replace maintain and scale up again with that command line interface of angular is an incomplete document angular is at least five times faster than angularjs due to a much better algorithm for data binding and a component based architecture now these features may make highly syncable client side and server side of content while the con is that components are managed in very complex way now again as mentioned earlier it is highly browser and mobile compatible but CLI documentation is not complete which will make it harder for developer to use angular now finally let's understand the latest and better version and why is it so if you have a fairly simple and straightforward application to develop angularjs can make development faster easier it surely helps in speeding up your applications responsive web applications with highly responsive designs angular on the other hand provides the best alternative for building large and complex applications typescript improve the maintainability of code as well as overall performance of angular applications using angular are more scalable as you can see here in the picture angularjs will help you in increasing the speed while angular will help you in increasing the scalability now finally to conclude it's pretty evident that Google chose to shift typescript which helped in increase overall performance of application and hence typescript based angle up framework is better in the Enterprise level making it more demandable in our previous module we covered the basics of angular next we'll explore angular CLI where you learn how to use command line tools to set up and manage angular projects efficiently GUI or the graphical user interface is a visual way that allows users and developers to interact with the electronic devices such as computers and mobiles this is done using components such as Windows graphical icons text fields Etc GUI is comparatively more userfriendly than a text based command line interface such as Ms do and shell operating systems a beginner can easily handle GUI due to its flexibility the appearance of a GUI can be altered or modified whenever the user wants to do so also the performance is quite impressive but guis come with functional issues so talking about the issues of GUI GUI consumes a huge computer memory as it is userfriendly but not resource optimized this in turn makes the GUI slower on older devices there is also an increase in complexity of designs and therefore it is more difficult to develop and becomes very expensive for Hardware support loads of time is consumed to design and develop a good-look interface for this reason there might be chances that a bad interface could be designed which makes it difficult for the user to understand a GUI also requires more system resources because of the elements that require loading such as icons and fonts as a result of this the developers who prefer the performance and efficiency shifted to the command line interface or the CLI the command line interface or the CLI is a user interface that is used in a text format that is commands to perform various tasks like viewing and managing files it allows the user to type single line commands into the interface which is used in operating systems in CLI the information is shown or presented to the user in plain text and files a simple example of CLI is your command prompt so moving on towards the benefits of CLI CLI consumes very low memory or the ram this is because it makes use of single line commands CLI is much faster and more efficient compared to GUI the reason behind this is the use of keyboard CLI makes use of the keyboard whereas GUI makes use of both Mouse and the keyboard the CPU processing time for CLI is very less when compared to GUI and the data is transferred quite fast CLI also comes in very cheap as it requires lower screen resolution so coming towards the angular CLI earlier using angularjs it was quite Hefty task for a large project to organize the code loading of the JavaScript files debugging code Etc this made the developers very difficult to handle the web applications using angularjs therefore to solve this issue angularjs was completely Rewritten and it was named as angular with this new conversion from angularjs to angular the angular CLI was introduced and typescript was used instead of JavaScript talking in precise about the angular CLI the angular CLI is a command line interface tool that can be used to develop and generate angular project produce components services and modules with just single line commands it also helps in the reduction of application size of angular which offers enhanced development experience not just that it also offers a clean coding feature of typescript this eventually has led to the ease in developers life and therefore more and more developers are getting attracted towards the angular CLI so now let's move on and see how you can actually install the angular CLI the angular CLI can be installed using the node packet manager or the npm now for this you'll have to make sure that nodejs is installed on your systems in case you're not familiar with this you can check out the angular 8 tutorial video once you've installed node all you have to do is open your command prompt and over here just type in the command npm install hyphen G which stands for Global at the rate angular CLI this command is going to install the latest version of angular CLI globally in case you do not specify The Hyphen G extension the angular CLI will not be visible globally this is going to take a while guys so now the angular CLI has been installed you can ignore the message that you see on the screen it just says that a new minor version of node has been released and it asks for its update for now I'm just going to ignore this and I'll just clear the screen so after youve installed the angular CLI you can check for its version to do that simply type in NG double hyphen version this command is going to check the version of angular CLI that is installed on your systems so as you can see on the screen the angular CLI that I'm using is 9.0.1 in case you want to know what this versioning tells in detail check out the angular 9 video from edureka now in case you faced any issues while installing angular you can simply type in the command NG help serve this command will give you an online support by the angular team so let me just type in the command which is NG help serve now if you're wondering what NG is NG actually stands for angular all the commands of the angular CLI begin with NG so here it is as you can see all the commands that you can use along with the angular CLI have been described over here so I'll just clear the screen and now we shall see how you can create a project using the angular CLI to create a new project using the angular CLI simply type in the command NG new followed by the name of your application or your project in this case I'll just call it as my first project the moment you hit enter you'll encounter two questions the first question would be if you'd like to add routing to your angular project now personally I'd recommend you guys to add routing to your project as it helps in navigating through your application so I'm going to type in yes and I'll hit enter the second question that you encounter is regarding the stylesheet since I'm comfortable with CSS I'll just hit enter for CSS so now it's going to take a while for it to create a new project so as you can see our project has been successfully created now what I'm going to do is get into my project so for that I'll just type in CD and the name of my project which was my first project and I'll just open this using the visual studio code in case you do not know how to install Visual Studio code you can refer to the angular tutorial video from Eda so as you can see over here my first project has been created with a number of files and folders the details of each of these files and folders has also been explained in the angular 8 tutorial video and I strongly recommend you guys to check out that video so whenever you create a new project using the angular CLI you will get a pre-made project to start off in order to view this project you can simply type in the NG serve command which is going to serve your application on the browser's local host post number 4,200 so I'll just get back to my command prompt and over here I'll just type in NG serve hyphen o Now The Hyphen o or the open extension is going to run this project by default on the Local Host port number 4,200 this is going to take a while again so forward it so this is an additional question that you see in angular 99 so all angular w to do is collect some Anonymous information and that is to check the compatibility of your commands and the time taken for the development of project so since this project is not going to be a very confidential one I'll just hit Y and hit enter however if you wish to change your mind angular also gives you an option of undoing this by simply changing the NG analytics project configuration to off The Hyphen o extension that I've given over here is optional you can also run the NG serve command without specifying The Hyphen o or the double hyphen open extension so as you can see over here this is the default or the welcome page from angular so as you can see on the screen it says that my first project app is running now all you have to do to create your own application is modify this project as per your requirements since the main focus of this session is to understand the angular CLI I'm not going to go into the depth of creating and modifying your projects for that you can check out the other angular 8 videos from edureka so now let's get back to the command prompt so the next thing that I'll show you guys over here is the installation of angular materials angular materials are the user interface components help you design your application in a structured manner that attracts users and makes it easier to access the elements or the components present in your application angular materials also help in designing your applications beautifully with unique Styles and shapes to add on angular materials using the angular CLI type in the command NG add eate angular slash materials SL material I just missed an eate symbol over here so when you do this it will ask you to choose a pre-built theme now in my case I'll just choose Indigo pink and I'll hit enter in case you choose the custom theme you can customize your theme files which include all common styles that are used by multiple components next up the angular CLI asks you if you want to set up Global angular material topography in this case I'll just say yes next up it's going to ask you if you would like to set up the browser animations for angular material you can choose any option of your choice but in my case I'll just hit yes these angular animations are going to make your application more fun and easy to use it will also improve your application and the user experience which attracts user attention here is a quiz question what command is used to create a new angular project using angular CLI and the options are a NG create B NG new C NG generate Project D NG start if you know the correct answer please leave it in the comment section below after mastering angular CLI which helps in Project setup and management we'll move on to angular components here you'll discover how to create and use components the co-building blocks of angular applications going through the angular overview we all know that our primary goal is to to build client side application with HTML and typescript well for that the most basic building blocks of angular are NG modules we'll learn more about it in the upcoming slides for now going through the architecture we see that there are several parts to angular such as templates components derivatives metadata and router Services templates basically combines HTML with angular derivatives and then we have components which def find many views arranged in hierarchical order and then we have router Services which can be used to find navigational paths among various of your applications because routers basically provide sophisticated in browser navigational capabilities now finally we have metadata here which is for the component class and it Associates itself with the templates that Define a particular view now getting back to NG modules there is a modular system in angular application as it uses its own modules called angular modules or NG modules so basically these modules will collect all your code into functional sets and therefore the angular applications are defined by a set of NG modules now let's understand why we need components indeed here we consider an email application now as we have come across already that the components actually Define views it is all also used to divide UI into smaller parts and which will help in getting the data which means it'll give you clear view and visibility of applications now this can also increase your accessibility of the applications now as you can see the one component is something that is marked in the red section and this will help you have a clear view of UI in angular now we'll understand the advantages of using components over modules although modules and components are two different terms in angular we need to understand that the components give a clear view using already existing modules the module is basically a big container containing small containers such as components service and pipes while speaking of components it controls a patch of screen called view here we can understand that each component can use other components which are declared in the same module although it might not be clear as to why components are better moving ahead we'll get a better version now in terms of HTML we can explain that module do not control any HTML while components can control them also The Decorator used for module is at NG module and The Decorator used for component is at component again in case of modules in angular they contain many of them where each is dedic ated to a single purpose while components they can use components which are declared in the same module and to use components in other modules they need to be exported from this module and the module needs to be imported now let's understand what components are the approach of using component keeps the code clean and separates the view from other parts which means basically each component has actually three of elements which means they have HTML template which actually renders what should be on the page and then we have typescript which is a set of code that defines the behavior and then we have metadata which is CSS selector for styling purposes now seeing the relationship between component and template we understand that there is an interlinkage because actually speaking a template is something that helps in creation of components now there is a hierarchical view defined by a particular component that is hosted by other components a companion template will always Define a components view basically a template is nothing but a form of HTML which will tell angular how to render a component now that we know what components are let's look into the benefits of using them so firstly it gives us a very good in browser navigational capacities meaning as I mentioned earlier components actually ranges from router Services which will eventually help you define navigational Parts among views and hence it can be used to provide in browser navigational capabilities also web component EOS system can be maintained which is basically it can be used to provide coordination between Frameworks and which in turn will help us maintain the web component ecosystem and this will also make it reusable now we've already established that there is a link between template and component here the component will have a template that can be used for entire markup separately now this will make it more feasible also since components are built using HTML CSS and JavaScript it is platform independent because it can run on different browsers now again there are many more benefits which you can find it online if you looked up but for now let's look at the realtime use case scenario Now video streaming is one of the main application using components due to their excellent streaming capacity now they help you in streaming applications like YouTube PlayStations Etc now we have realtime data applications like weather forecast so you can basically forecast your weather using components now again you have many more e-commerce applications such as Amazon which can be de developed using components now also we have numerous user generated content portal that can be created and users can also put forward news and things like this using components now let's understand the creation of components with a demonstration now here I've considered Visual Studio code again if you need to understand installation and setup I would insist you to watch our full course video on angular now we have already come across that template HTML class CSS and typescript code forms a component now here as you can see there is an app component that has been created with creation of this particular application so basically we need to make a note that app component is a root component now when app component is created there is a set of files along with the component that is created which is a CSS file for the component and H HML file for the component typescript file for the component along with it there is a small file called spec file which has been created for testing purposes now let's consider the app component typescript file now here you can see that is a component metadata an Associated class to this particular component also if you notice the class name is app component because this class is associated with our component now this class can also have properties but here I've not considered any properties and hence it is empty now coming back to the component the set of metadata here is selector which has app Root now this app Root is actually used as a custom tag in index.html that is a main HTML file here because as soon as you encounter this particular custom tag in the index.html file the component is been rendered into the angular CLI now going back to the app component.ts we have template URL which basically contains HTML file for our component now going into the HTML file we see that we have a message that we need to be displaying now again in the typescript file we also have style URLs which contains basically a styling file or a CSS file for this component now since we have not given any particular styling for this message that is been displayed it is empty again if you want to style you can give some stylings now this is about the component which has the decorator at component now let's understand more about component by creation of the component now for creating the component you're supposed to use a command called NG space g space c and your component name now say for example I say my component name is demo here G meaning generate c meaning component so we are generating a component here now NG space g space c space the component name I say enter now here it might take some time to create the component now as you can see the component is been created along with it there are a set of files that has been created here there is a HTML file a typescript spec file and then a component typescript file and then a CSS file now let's get into the demo that is the component that we just now created now opening the typescript file we again see by default thanks to angular CLI we have component metadata that has been created and an Associated class demo component is the name of the class also there are some properties that has been created we should also note along with creation of the components there is some updates made to the app component now here they say there is an update made in app. module. typescript now let's look into it going to the app. module. TS we see that demo component is being added as the Declaration in the NG module now along with that they we have also imported the demo as the component now hence we have encountered the updates already made in the app component let's get back to our demo typescript file now as I mentioned earlier selector uses this attribute called app demo this should be mentioned in our main index.html file for it to render the component so I'm going to be mentioning the app Dem Mo as a custom tag because I want my custom tag to be identified so that my component is been rendered now I save this now going back to demo. component I also should make sure this component is being run in my app. HTML which is the component file for HTML here again I'm using my app demo the custom tag to make sure that my message in the just created component will be displayed now going back to the TS file here I also see there is a HTML file as I mentioned earlier let's look into it now because of our angular clis property there is a default message that is been typed when you create the angular component that is demo works now also CSS is empty here as well now if you will you can give a property to CSS for styling but here let me leave it alone for time being now CSS now as I mentioned styling URL contains CSS file now let's look into the output indeed now I say NG sir enter now the compilation is done and this is what we have we have demo Works which is being displayed the message that we have actually given in our confence HTML file and then we have this in our app HTML file now let's see the changes that we can actually do this particular component considering the selector first we can actually Define this particular component as a div as well for that you need to give this as a class instead of an attribute so here I just say do app demo which will Define this as class again since I have defined this as class it will show error as I have to change in my app component now this is no more a custom tag I am going to specify this as a class now you can see it works the same now again going back to our typescript file you can also Define this in a square bracket which will take it as an attribute instead of custom type now again I'll be changing this in our app component HTML as an attribute now if I save and see works the same now again going back to the typescript let's see how we can change our template now we can actually specify this HTML as our inline template let's look at how this happens now when you're specifying inline template I am going to change this as template in the back codes instead of file I'm going to give a d tag over here save sample message close the div tag and here this is displayed as inline message now let's see if this will work works the same as I said sample message sample message is displayed here now I've used back text here because in in line there are chances that you will bring the diff one line after another and when you do that there are chances the message is not being displayed and hence keeping the div tag and the whole inline text in back text it will always help you give a better view now in case of styling also you can change this and make a different type of defining again I'm going to Define this within a back text a pair of back text indeed here I'm going to define a particular color now as I said since you have used back text you can always jump to next line This attribute should be style works so these are the different ways of defining the particular component that you have declared now again using these features of component we can create many applications to make it visibly delighted it's time for another question how do you handle events in an angular component and the options are a using double curly braces B using parenthesis C using square brackets D using both square brackets and parenthesis if you know the correct answer please leave it in the comment section Below in the previous module we learned about creating and using components now we'll dive into angular templates where you'll see how to structure and design the user interface with in your competents firstly understanding what template is so you know in your application that there is a section of HTML that you can include as part of the page that the browser displays now this part is angular template so in other words a template is a snippet of HTML which tells angular how to render a particular component in your application so you'll see a lot of component here while we learn about templates as templates and components are interl speaking of you can actually Define a component view with its companion template meaning a template is a form of HTML that tells angular how to render the component which brings us to the relationship between a component and template now this hierarchical diagram here we will understand that for a particular application in angular there will always be a root component and hence a root template as template is an entity in a component now there's one component say a another component called B where both emerge from the root component and they are called child components now this has an associate template respectively now again these child components May produce another component which will be grandchild component to the root component making the associated template as grandchild template mov going on looking at this diagram it's pretty evident that there is an association between templates and components with help of metadata which actually defines a particular view also it should be noted that component defines a view hierarchy which contains embeded views hosted by other components now we've already come across the metadata and its Association to templates with components along with that we should note that metadata Associates via inline code or by reference also a component and its template describes a view speaking of views let's discuss the association of templates and Views now views are often organized in hierarchical structure which will allow you to edit or show and hide entire UI parts or Pages as a group now the host view of component is defined by template that is immediately associated with it now since we have discussed about view hierarchy let's get deeper into it a view hierarchy can include views from components in the same NG modules NG module is an annotation use for modules also it can include views from components that are defined in different NG modules there are some key pointers we should consider about view hierarchy that is it is a tree of related views that can act as one independent unit and the second thing is that the root view is often called components host View and finally it plays an important role in angular change detection now although everything here is associated directly to component again it should be noted that template is a part of component and hence all the features will be Associated to template as well now let's look into the types of templates first type is the inline template which is defined by placing the HTML code in btic and is linked to the component metadata using property template so here the template is associated with components host View the second type is the template file here the template is defined in separate HTML file and it is linked to the components metadata using property called template URL now moving on let's understand about template variables so basically there are perks of using template variables here in templates they actually help you to reuse data from one portion of template in another also with them you can actually perform tasks such as respond to user input or finally tune your forms of your application now you will have a question as to what template variables are so they can actually range from your Dom element within a template to your directive now directive is something that will manipulate your HTML head and body also it can be an element or temp template reference or even a web component now naturally we need Syntax for creating a template within a template you can actually use special syntax to leverage many of the angular features so firstly when you generate an angular application with angular CLI the app. component. HTML file is a default template which contains the placeholder as HTML now the template syntax guides to show you how you can control the UI by coordinating data between the class and the template now again there are many of such guides for templates and taxs depending on the task that you want to perform now one such example is Dom you document object model so here angular helps you get and set Dom values dynamically with features such as buil-in template functions varibles even listening or even data binding also it should be noted that almost all HTML syntax is basically a valid template syntax now finally let's look at some of the templates that are freely available material dashboard is a template that is established on bootstrap 4 and angular 9 now paper here is the angular template with a minimal and creative experience now whenever you need to Kickstart a project you need an admin dashboard template here you could use a light bootstrap dashboard angle now UI dashboard angular here is something that is a right combination of elements page layout components and even styling for that matter now let's understand the creation of components with a demonstration again if you need to understand the installation and setup I would insist you to watch the full course video now let's understand the creation of templates so firstly when an application is created there is a component file that has been loaded along with this application now this component file is a bunch of files like typescript CSS and HTML when there is a component decorator as in typescript file a template is been loaded and this is a part of this component now based on angular CLI that is your command line interface the template uses template URL as HTML file now this is a property of the component which helps you store the HTML related information now as we have already discussed instead of template URL you can also use another form that is called inline function where the property changes to template instead of template URL now we'll learn more about it firstly let's understand the creation of template now here as I mentioned HTML file is being loaded let's look look into the HTML file now you can see whatever message you want to be typing is being present in the HTML file now going back to typescript file as I said you can also have inline way of printing HTML related information now for that you have to do is I give the property as template and instead of the file location I'm going to say the message that I want to be typing say H1 I say demo message and I close the tag now I save it let's look into the output as you can see demo message has been typed here now coming back here as we have theoretically already discussed that if we need to give messages in multiple lines we need to be using back text and single quotes won't help let's see what will happen if we give it in single quotes say I give this way it's not even considering as inline template now hence I'm going to display this as something in between back ticks and remove the single now I save this works the same next we're going to learn something called as interpolation that is defining Dynamic data how this works is there is a class associated with a component now in this class you can actually Define different properties now here what I'm going to do is I'm going to define a property called title let's say I am saying this as app works it's just a demo message you can actually give anything that you want and when you give this to call this particular property you're supposed to mention either here in your inline template or in your HTML file now since I'm not going to HTML file and I'm displaying all my messages through inline template let me just give it here what I'm supposed to be doing is within a curly braces I'm going to Define this property now if I say say this works so this is used for dynamically displaying your data now you don't necessarily have to type your given message here instead you just Define the property and call that property now you can actually display this title property in HTML file as well how we do that is as before you need to Define this as a template URL as the property now just call the file now I go to HTML file instead of this I just say title in curly braces now I save this now to Define this in the HTML file all we have to do is change the property here I give it as URL and instead of back text inline message I Define the file location I'm just going to copy this paste it here and then change this as HTML now go to HTML here what you're supposed to do is as you have defined it as Dynamic title property I am going to define Title property here as well I say title save save this file as well now this works see you want to Define an object now if you have to Define an object the property here that you have to mention is my object I say my object object and I can give any particular property for here let's say do not specify any kind of colon now if I want to specify any particular object I say my property is going to be object and the specifications could be anything I'm going to remove this and for my object I'm going to specify say color it's just the attributes that you have to give you can give any anything that you want I say red material again it's just some sample example that I'm taking here I say soft now I'm going to finish this off by closing this particular bracket here I'm going to have to again come back to the template property and not the URL cuz I'm going to be using inline template here so I'm going to say template and and use back text just say paragraph I'm defining this in a paragraph again for any particular property that you want to specify from your class you'll always have to use double curly bracers my property is going to be object and I'm going to close my paragraph now I just save this let's see what's going to happen as you can see the output that you have is object object now this is happening this way because when you specify object and do not specify what object you really want as in color or material it's going to display as object object now see I mention an object property like color I save this here you go it displays red now this is the property that's been shown here now this way you can actually display a property called my object now next we have array let's see how we can actually display array property here for that I'm going to have to use the property called my array here as we know array is supposed to be mentioned within square bracket now I say a again you can give any particular example I'm just taking WS here I just say this for example now here again in template for displaying array we should always note that array is being displayed within UL tag now as I've used back text I can always jump into next line now I say l i which is for array displaying now I give NG for let sample array now this is again an indicator that I've used for displaying my property array you can use any particular name you want I am just saying sample array I close this and even close the LI tag now what I'm doing is I'm going to have to call the property my array but as you see I have used sample array for my property now hence I can use this particular ID to refer to my property now I say this I close my li close my UL tag save this as you can see a EI I is being displayed here now that's because I specified it as array and I used all particular Necessities for calling this array now you may ask what is ng4 ng4 is a condition for calling array or specifying or assigning a particular array now let's move on and see something else that is known as NG template now this is again one of the important topic while speaking of templates now here what I'm going to be doing is instead of for I'm just going to say NG if now this is like taking your if condition now instead of setting this as let I'm just going to say if my array then you also have this condition else now why I'm using else is we'll get to that later I say I have an ID template and I'm going to specify this as ID template itself it is just a name that I'm giving to my template you can give any particular name you want and I close this condition so this is if condition like if my array is this then type this statement that I'm giving over here now here type the array is present or just say array is present anything is cool now when you specify this I may have to specify something called as NG template now this is a tag that has been used for us to have else statement now as I've already mentioned I'm taking ID as ID template now again this is any name that you can give to your particular template close the tag I say array is empty and this NG template should be closed now I save this now it's saying array is present because we know that array is not empty and we have contents in Array now what if I say array equal to false specifying that there is nothing in Array now if I say this and Save it should take me to else as you can see it says array is empty now this means that NG template works now these are some of the basic properties of templates here is another question which syntax is used to bind a component property to an element's attribute in angular templates and the options are given on the screen if you know the correct answer please leave it in the comment section below now that you have learned about templates it's time to explore angular data binding in this section you will learn how to connect your data model to your templates making your applications interactive so what exactly is data binding data binding is the mechanism that binds the application's UI or the user interface to the models using data binding the user will be able to manipulate the elements present on the website using the browser therefore whenever some variable has been changed that particular change must be reflected in the document object model or the Dom in angular data binding defines the interaction between components and the Dom data binding has been a part of all angular versions starting from angularjs right through to the latest version which is angular 9 so coming towards the types of data binding in angular angular allows both one-way as well as two-way data binding one-way data binding is a simple type of data binding where you are allowed to manipulate the views through the models this implies that making changes to the typescript code will be be reflected in the corresponding HTML in angular oneway data binding can be achieved through interpolation or string interpolation property binding and event binding two-way data binding on the other hand allows synchronization of data in such a way that views can be updated using the models and the models can be updated using the views this means that your application will be able to share information between a component class and its template so moving on towards oneway data binding in oneway data binding data flows only in One Direction that is from the models to the Views as mentioned earlier oneway data binding in angular can be of three types that is interpolation property binding and event binding so talking about interpolation binding interpolation binding is used to return HTML output from typescript code that is from the components to the Views here the template expression is specified within double curly braces through interpolation strings can be added into text that is present between HTML element tags and within attribute assignments these strings are calculated using template Expressions so to show you an example of this let me just open up my command prompt and over here I'll create a new angular project to create a new angular project all you have to do is type in NG new followed by the name of the project okay so as you can see you're going to encounter two questions the first question will be regarding angular routing and for that I've chosen yes the second question is regarding the stylesheet that you would like to prefer since I prefer CSS I'll hit enter for CSS okay so this is going to take a while in case you guys are very new to angular I suggest you should watch the angular 8 tutorial video from edura okay so a project has been created now I'll get inside the project directory and I'll open the same in Visual Studio code Okay so default project has been created for us from angular now in case you want to see how this project runs what I'm going to do is get back to my command prompt and over here I'll type in NG serve hyphen no the NG serve command is going to serve my project on the Local Host when you type in an extension hyphen o or double hyphen open it is going to open this project directly on Local Host port number 4,200 so as you can see on the screen I've encountered a question now those who are not familiar with angular 9 might be wondering what this question is all about now this question is regarding collection of anonymous data from the angular team now they want to do this to serve us better since my project does not have anything confidential I'll just type in y and I'll hit enter so as you can see over here this is the default page that appears when you run your project that you've created now all you have to do is modify this to build your application so now I'll get back to my project and over here I'll open up the app folder present in in the source folder and within this I'll open the app component. HTML file and then I'll delete everything except the last line okay I'll just save this I'll get back to my development server okay so as you can see over here nothing is actually present this is because I just cleared off all the HTML that was present in order to display that default page now what I'm going to do over here is just type in two curly braces and within this I'll just specify the title now since I've already told you all before to make use of interpolation you'll have to specify the template expression within two curly braces now if you guys are wondering what this title is I'll open the app component.ts file and show that to you guys so as you can see on the screen within the app component class I have something called as the title now angular has done this by default I have the title of my project as ADB now when I save this and get back to my development server you'll be able to see the title of the project so as you can see over here ADB or the title of my project has been returned so basically the app component. HTML file has taken data from the app component.ts file now to show you guys another example of this I'll just open the app component.ts file and over here I'll create two new properties which is course and I'll name it as angular and another property will be image now within this image I'll just paste in some random URL the reason why I'm adding these two properties is to show you guys some more examples using interpolation I'll just paste in some URL over here I'll save this and I'll get back to my app component. HTML file over here I'll open some paragraph tag and over here I'll just type in something I'll say learn the course name with edura I'll save this and I'll open my development server okay so as you can see over here in place of course I have angular which is the name of the course similarly I can also return the image using interpolation so what I'm going to do is just open up a div tag and within this I'll open the image tag and the source will be the image I'll save this I'll get back to my development server so as you can see over here the image has been added not just this you can also add in arithmetic expressions using interpolation so just to show you an example of this I'll type in two star do I'll save and I'll get back to my development server so as you can see over here I have the result of two stars two which is four so basically the component property that is specified within the two curly braces will be replaced by angular with the string value that is associated with that component property now like I've already shown you all interpolation can be used for different purposes and different requirements not just this angular also allows you to configure the interpolation D limiter and use something of your choice instead of using the two curly braces so now talking about property binding in property binding the value flows from a component's property into the target elements property therefore property binding can be used to read or pull data from the target elements or to call a method that belongs to that Target element the events that are raised by the element can be acknowledged through event binding which will be covered later on in this session so in general you can say that the component property value will be set to the element property using property binding now to show you guys how to make use of property binding what I'm going to do is just clear off this part so property binding in angular is specified using square brackets so in case I want to display the image using property binding all I have to do is just make use of square brackets for the source so I'll just open the image tag and I'll type in Source within square brackets and then I'll specify the name of the property which is image okay so as you can see over here I've specified Source within square brackets and over here there are no two curly braces like the previous example I'll just save this I'll get back to my development server okay so as you can see over here the image has been returned using property binding I know many of you have noticed that you can use interpolation and property binding interchangeably in the previous example I retrieved the same image without using the square brackets but using the interpolation braces so one thing I want you all to note over here is that when you need to set element properties to non-string data values you must use property binding and not interpolation okay so now moving moving on towards event binding the event binding feature lets you listen to certain events such as Mouse movements key strokes Etc in angular event binding can be achieved by specifying the target event with regular brackets on the left hand side of an equal to sign and the template statement on the right hand side within codes now to show you guys an example of this I'll open up my project and over here I'll just create a button so I'll just open I'll just create a div and within this I'll create a button so over here the target event is going to be click and the template statement will be go back I've not created this function yet I'll get back to the app component.ts file and over here I'll just create a Gob back function so it's going to be a simple function which is not really going to return anything so I'll just type in go back I'll save this and I'll get back to my development server okay so as you can see over here a button has been created now this button can be clicked but since I've not specified anything within the function this button is not doing anything as of now to know more about this you can check out the angular 8 tutorial video from edura okay so now moving on towards two-way data binding in angular so basically whenever event binding occurs an event handler will be set by angular for the Target event when that particular event gets raised the template statement is executed by the Handler generally re receivers are involved with template statements that perform actions in response to the event event binding is used to convey information about the event these data values of information include anything such as string object Etc now let's move on and take a look at tway data binding angular allows two-way data binding that will allow your application to share data in two directions that is from the competence to the templates and vice versa this makes sure that the models and the views present in your application are always B synchronized two-way data binding will perform two things that is setting the element property and listening to the element change events the syntax of two-way data binding is a combination of property binding syntax that is the square brackets and the event binding syntax which is the regular bracket so basically regular brackets will be present within square brackets according to angular this syntax resembles banana in a box now to show this to you guys in detail what I'm going to do is open one of my projects where I've made use of 2-way data binding NG model that you see over here is an example of 2-way data binding now in this project you will be able to see that when I make changes in the views it will be reflected in the moduls now this is because I've made use of two-way data binding over here so what I'm going to do is just open up my project and over here I'll try to change the name of the course so in case I don't make use of two-way data binding when I make changes to the name over here it should not be reflected to the name that is present over here this name is reflected from the models what I'm going to do is try to make changes to this so as you can see when I make changes to the Views the corresponding change is reflected in the models as well so this was an example of 2way data binding here is another question what is data binding in angular and the options are a the process of defining the application's main module B the technique of synchronizing data between the component and the view C the method of managing life cycle hooks D the use of Decora in the application if you know the correct answer please leave in the comment section below having covered data binding we'll now move on to angular directives you will learn how to manipulate the Dome and extend HTML capabilities within your obligations so what exactly are angular directives angular directives are basically functions that are executed whenever they are discovered on the Dom by the angular compiler these directives Empire the applications HTML through an advanced syntax they have distinct names that can either be predefined by angular or custom names defined by the user itself a directive class in angular is defined using the etherate directive decorator directives provide instructions through which the templates transform the term dynamically so now let's move on towards the types of directives there are basically four types of directives in angular that is the component directives the structural directives attribute directives and the custom directives components are nothing but a type type of directives the reason why they're defined specially under the eate component decorator is that components are very much distinctive and Central to angular factually the etherate component decorator actually extends the etherate directive decorator with features that are template oriented whenever you add the selector of the component in the templates you basically instruct angular to add all the contents of your component at that particular position as you all know whenever a new angular application is created the root component or the app component will be created by angular when you open the app component.ts file you will be able to see the selector of the app component or the root component I have already created a project over here in case you have any doubts on how to create an angular Project Check out the angular 8 tutorial from edura so as you can see on the screen the selector for the root component is present within the atate component decorator this selector will be present in the index.html template by default okay so now let me just open index. H ml file for you all to see this so whenever you create a new component angular creates the required typescript file the test file the HTML file and the CSS file the selector of the component will be present within the typescript file so now let me just create a component in order to show this to you all to create components in angular you need to make use of the NG component command so I'll just open up the command prompt and I'll type NG generate component and you can give any name to this so so I'll just name it as new comp so I will just copy the selector and I will add it to the app component. HTML file okay so now moving on towards the structural directives in angular structural directives are used to alter or manipulate the Dom this is done by either adding changing or removing the elements a single element can have only one structural directives some of the most common examples of structural directives are ng4 ngf and NG switch before getting into the details of each of these let me first tell you guys about the NG template element of angular the NG template element is used to render HTML in angular but this element is never visible directly therefore before the views get rendered angular will replace this NG template element along with its content with the commment if the view does not have any structural directive and you simply enase some elements in the engine template element those elements will disappear so let me just show you guys how this works so what I'm going to do over here is just write welcome to edua and en case two within the N template tag okay so just within the h2 tag I'll write welcome and with an N template tag I'll write two and within an H2 tag again I'll write Eda so now I'm going to save this and type NG serve hyphen o in the command prompt as you can see on the screen the two from welcome to edureka is missing so now let's move on and understand the working of ngf ng4 and NG switch directives one of the simplest structural directives is ngf this directive basically acts according to the given condition in case the condition is evaluated to True a copy of the element will be added to the Dom otherwise the HTML element will be removed structural directives are preceded by an aster symbol you can write the ngf directive by setting it to a string for example if you want to print the name of some fruit what I'm going to do is just open up a diff tag and then I'll make use of star ngf and I'll set this to a string that is fruit class over here will be named name and since I want to print the name of the fruit I'll just write fruit. name within the interpolation brackets so as you can see the star ngf directive is set to a string and this string is called as a micro syntax micro syntax allows you to configure the directive in a friendly manner angular internally converts this directive as follows as you can see on the screen star ngf gets moved by the NG template element and the rest of the content including the class is moved within the ENT template element itself I will create a small demo project and explain both ngf and ng4 after we understand the working of ng4 okay so ng4 the ng4 directive is called as a repeater directive this directive will repeat for every element present in the given list just like we saw for ngf ng4 also gets transformed by angular from the aster syntax to the NG template element star ng4 is much complicated compared to Star ngf because it has many more dependencies which can be both mandatory and optional dependencies so in this example the ng4 class requires a looping variable that is the fruit and the list that is the fruits list to show you guys an example of both star ngf and star ng4 I will create a small angular application okay within this application I will create a new file called as the fruits. TS file so what I'm going to do is just right click on the app folder and type in the name of the file that is fruit. yes now within this file I will create an interface okay so export interface and the name of the interface which is fruit now within this I'll have two properties that is the ID and the name so ID will be number and name will be of type string so once this is done I will create another fruit list. TS file that will hold the list of fruits the first thing that I will have to do over here is import the fruit interface from the fruits. DS file so just import fruit from fruits then I will create the list of fruits so the first fruit will have ID number one and the name will be apple the second fruit will have id2 and the name will be anything say for example mango next I will open the app module. TS file and then I'll add the forms module to it so import forms module from angular forms I should also include it within Imports so I'll just import forms module okay next I will open the new comp. TS file add to new properties that is fruits and the selected fruit next I'll create a new function that is the on select function which will return the details of the selected fruit so on select fruit which is of type fruit and return type will be void this do selected fruit equals fruit okay so now I'll open the new comp. component. HTML file over here I'm going to paste the code that I have already written for NG if and Ng for okay so I'll save this and I'll get back to my development server okay so as you can see on the screen I have the list of fruits that are available when I click on any of these fruits you'll be able to see the details of them so I hope you guys have understood till here the next structural directive that we learn is the star NG switch directive the star NG switch directive is used to add or remove templates from the Dom this is done by specifying an expression that is to be matched the star ngf directive is actually a set of collab operating directives the expression that is required to be matched will be specified using the NG switch case directive within the same container element so what I'm going to do is just paste the code that I have already written this code will produce the list of fruits within the drop- down list and I will be able to select any of them okay so I'll just save this and I'll get back to my development server okay so as you can see on the screen I have a drop- down list and a message saying no fruit selected when I when I click on any of these I will get the corresponding message instead of no fruit selected which is the default case message okay so I hope you guys have understood till here now moving on towards attribute directives attribute directives are used to modify the behavior or appearance of some existing element component or some other directives as the name suggests these directives are utilized as attributes of elements within templates and they resemble the HTML attributes one of the most common examples is the NG model directive this directive is used for two-way data binding it is commonly used to modify the behavior of an existing element that is usually the input element NG model sets the input elements display value property and it will also respond to change events that take place for instance consider the NG model directive used in the previous example okay so as you can see on the screen I've made use of the NG model directive and this directive is used within the input tag so what basically happens over here is in case I make changes to the name of the fruit on The View it will get reflected in the models as well so let me just get back to my development server okay so what I'm going to do over here is try to change the name of Apple okay so as you can see when I make changes to the name of Apple the corresponding change is reflected in the name of the fruit present in the models as well this is an example of two-way data binding here the models are modified using the views the NG model directive is a part of form control module the form control module is used to keep a track of validation status the value and the user interaction in order to keep the models in sync with the views so now moving on towards the custom attribute directives the minimum requirement for an attribute directive is a class with the atate directive decorator this class contains the selector that will identify the attribute to create this directive class using the angular CLI you just have to type in the command NG generate directive followed by the name of the directive so what I'm going to do is just open up the command prompt and over here I'll type NG generate directive my directive so this will create two files that is the directive dots file and the directive dope. TS file these are the typescript and the test files respectively the directives that you create should be declared within the modules just like how it is done for components okay so what I'm going to do is just open up the app module. TS file to show this to you guys okay so as you can see the directive that I've just created has been Auto imported this is due to the autoimport extension that I've have added in case you do not have this extension you will have to manually declare it I'll just open the my dtive dots file the at theate directive decorator consists of a single configuration property that specifies this directive CSS attribute selector in this case it's app my directive the square brackets are used to make it an attribute selector whenever some element is found to have app my directive attribute in the templates angular will apply the logic of this directive to that element the first first letter of the attribute directive is capitalized to avoid conflict with standard HTML attributes not just this it also avoids conflict with the names of thirdparty attributes the app prefix is added by the angular CLI below the atate directive metadata is the collector class called as my directive directive this class will hold the logic for this directive you can also export my directive directive to make it accessible so in order to modify this file I'll make use of the element ref which is is a wrapper around some native elements inside the views present in angular core Library here the element ref wrapper is specified within the Constructor in order to inject a reference to the host Dom element that is the element to which the app my directive has been applied okay so I already have a code over here I'll just paste it and I'll save this to demonstrate how this works I'll just open up the app component. HTML file and over here I'll open the div tag within that I'll open an H one tag write app my directive and within this I'll just write hello world okay I'll just save this so basically in this code the app my directive attribute is detected by angular on the host H1 tag then angular creates an instance of my directive directive class it then injects a reference of H1 element into the directives Constructor which sets the H1 elements background style to Red okay so I'll just save this so now I'll just type in NG serve and I'll open the development server okay so as you can see on the screen hello world has been highlighted with a red color since I've specified the elements background color to be red you can further configure the CSS according to your preferences after exploring directives we'll next explore angular dependency injection this module will show you how to manage dependencies in your applications making your code more modular and testable so what exactly is dependency injection in angular dependency injection is a vital application design pattern in this coding pattern classes are injected with the required dependencies rather than hard coding Deb within the class itself these dependencies are usually objects or services that are required by the component Clause so when exactly should you use di or dependency injection as mentioned earlier dependency injection is a robust technique that can be incorporated into the logic of an angular application in multiple situations some of such scenarios can be when you have to inject some data related to the configuration information such as urls drivers usernames passwords Etc when multiple components have the same dependency or when you need to inject distinct implementations of the same dependency into one or more components or when you have to make use of different instances of the same component with distinct configurations so now that you have a basic idea of when to use di let me also tell you guys that it is not always necessary to use it in case you know that your application will never require different implementations or configurations you can simply skip dependency injection so now let's move on and see what are the drawbacks of not using di I've already mentioned a number of cases where dependency injection is very useful so what happens when you do not use it in these scenarios to explain this let me give you an example let's say we have a mobile class that depends on other classes that is the processor class the display class and the camera class all the three classes that is the processor class the display class and the camera class are being initialized within the Constructor of the mobile class itself so in in this case if you make changes to any of the classes that is the processor display or the camera class you will have to make the corresponding changes within the Constructor of the mobile class as well so this clearly shows that our code is not flexible each time you make change to the dependency you will have to modify the mobile class as well also this code cannot be used for testing purposes the reason is that when you are testing you give various different parameters and check whether your application is functioning correctly or not so in this case testing cannot be used so using dependency injection as a design pattern to solve this problem so like I've already told you all when you make use of dependency injection the class will not Define its dependencies but it will acquire them from external sources so we can rewrite the code for the mobile class we saw previously in this case the dependencies are no more created by the mobile class but it takes them from elsewhere so as you can see processor display and Camera are passed as a parameter to the Constructor rather than instantiating it within the Constructor itself this way we will be able to solve both the issues we saw earlier the reason is you will have the space to make changes to all the dependencies easily all you have to do is Define the parameter and then pass it as a dependency therefore we can conclude that using dependency injection makes the code very efficient and usable binds Loosely coupled components effectively increases modularity applications become flexible and robust and also it's easy to test and maintain your appli ations dependency injection as a framework so until this stage you have understood that by creating dependencies outside the mobile class you can make changes to the dependencies without having to change the mobile class itself as you all know the parameters you are using over here need to be defined before you actually use them in the previous example we just had three dependencies for the mobile class but in real you will have a lot more you will have many other dependencies such as RAM memory hard disk speaker microphone Etc therefore it is very clear that it gets really difficult to manage the code as the number of dependencies increase this is where the DI framework or the dependency injection framework intervenes this framework includes an injector which is the container that is used to register all your dependencies this way the DI framework will manage all the dependencies of your application okay so before moving on further in the session let us understand what is a service in angular services in angular can can be anything such as values functions or features that are required by the angular application service classes have a narrow and well-defined purpose components can delegate tasks to Services these Services can perform any task like returning output fetching data from the given URL checking the validity of the user's input Etc an injectable service class can be configured to do any of these tasks for any component in your application not just this your application can also be made more vers by injecting distinct providers of similar kind of services so what is the need to have Services a component class is meant to follow the single responsibility principle which is to control the views this is the reason why services are kept separate from the component another Advantage is that when you create a service you'll be able to make use of them anywhere they are required therefore you do not have to rewrite the code keeping it free from redundancy so when do you think you must use Services services can be used in different scenarios to serve different purposes such as to perform application specific logic Distributing data between multiple components or to communicate with external servers in angular these services are implemented using dependency injection okay so now let's move on and create a small application that will help you understand dependency injection and services in angular so what I'm going to do is open up my command prompt so I've already created a project over here so what I'm going to do do is just type in NG generate service followed by the name of the service I'll just name it as NS you can give any name of your choice guys so when the process is completed you will see that your application will have two new files that is the ns. service.ts file and the NS spec. service.ts file these are the typescript file and the test files respectively I'll open this project in Visual Studio code and within the app folder you'll be able to see that the new service has been added in case you're very new to angular and you do not know how to create an angular application you can check out the angular 8 tutorial video from edua so as you can see over here the at the rate injectable decorator is present this decorator specifies that the class that follows is an injectable service class class so within this NS service class what I'm going to do is create a small function you can give any name of your choice so I just type in get message and then I'll just type in a single return statement in this function which will be welcome to Eda once this is done I'll just save it so now the service class is ready but you cannot make use of this as of yet the reason is the service injector needs to be registered within the provider to register it you can specify within the providers of the components or the modules the availability of the service depends on where it has been registered so consider the application tree as the one that you see on the screen over here at the topmost level is the app module then is the app component and the app compon component has two subcomponents that is subcomponent one and subcomponent 2 subcomponent one has another component X as its child so you can register the service at any level that is the subcomponent level the app component or the app module level this depends on the requirements of your application if you register it at the subcomponent level only those classes that inherit the class of this subcomponent can make use of the service similarly if you register the service in app component level you can make use of the service within all children if you register the service within the app module the service can be used throughout the components that come under this module so the best place to register the service is within the app module itself for maximum usability therefore what I'm going to do is open the app module. TS file and over here within the providers I'm going to type in the name of the class that is NS service also don't forget to import the NS service class the reason why it's Auto imported over here is because I've added the autoimport extension in case you do not have this you'll have to manually import this class in case you want to add this extension all you have to do is click on the extensions icon and then search for the extension that you want and then install it so now let's get back towards our application so up till here what we've done is created a service and then we've registered it within a provider the next thing to do is declare the service as a dependency once the service has been registered you can make use of the service by declaring ing it as a dependency so what I'm going to do is open the app component.ts file and over here I'll import the service that I've just created so I'll just type in import so I've imported the NS service class within this app component class I'll Define a new parameter called as the message parameter this parameter will be of the type string this is because the value that I've specified within the function I created in the service class is a string so I'll just type in string equal to next within the Constructor class I'll create a private parameter and that will be NS service this parameter will be of the type NS service next I'll make use of the NG on init life cycle hook it will be of the return type white and within this I'll just type in this do message equals this do NS service do get message okay so I'll just save this I'll save this as well now I'll open the app component. HTML file I'll select everything except the last line and I'll delete it then within an H1 tag I'll use the interpolation syntax and I'll type in message which is the message to be returned in case you do not know how to make use of interpolation in angular you can check out the angular directives video from edua okay so I'll save this and I'll get back to my command prompt and I'll just type in NG serve IO so as you can see on the screen I have the output as welcome to edura now since I specified The Hyphen o extension with the NG serf command the development server is run directly on Local Host port number 4,200 in case you do not make use of The Hyphen or command it's not going to open this directly you can create as many services as you require and inject them in any component of your choice it's time for another question what is the purpose of adate inject decorator in angular and the options are a to define a new angular module B to inject a specific dependency token into the class C to bind an event in the template D to declare a component metadata if you know the correct answer please leave it in the comment section below with the dependency injection understood will proceed to angular routing and navigation here you will learn how to create single page application with multiple views and seamless navigation why we need routing in angular so basically angular routing is nothing but a technique for directing users to appropriate web page so they can complete their task and other words you can say a single angular application may contain several components now as you can see here there are multiple components which actually comprises of of a angular application now understanding some more needs of using routing and navigation it's basically is that if you enter a URL in address bar for corresponding page it will navigate to the corresponding browser again clicking links on page the browser navigates to new page and browser navigates backward and forward throughout the history of pages as you may wish with that said let's understand and learn more about routing and navigation so what is routing in angular basically routing is a process of partitioning and applications UI using URLs and it's very essential functionality for every front-end framework it enables programmers to create modern single page applications with numerous views that may be loaded once by a browser now once a browser is loaded a single page application should be viewed in different and numerous ways and routing comes in handy with that so let me give you some instance of actions that user do while browsing through an application now it could be like you type a URL into address bar the browser will take you to appropriate page or the browser navigates to new page when you click links on page it can also be like browser navigates backward and forward throughout history Pages like I've mentioned before now this is where angular routing enables navigation from one view to another and this can be done to perform user task adding on routing actually allows to display specific views of your application depending on your url path to add this functionality to your sample application you need to update the app as you can see here there are two views each each view has specific URLs which is associated with each of the views as in when the application is updated the views Associated to the URL is displayed now with all that said we shall take a look at the architecture or the life cycle of our routing and navigation as to how it takes place to start with there are five major operations for angular routing when angular router receives a URL it does first task that is apply redirects or as you can see here URL redirects the applied this means when the user clicks on a link or updates the location bar directly the router receives a URL so the router's initial action with this URL is to apply any redirections next we move on to the statuses of router so the first step in statuses is recognizing status of router the router here will actually use URL to generate a router State now to comprehend how does this step works we must first comprehend how router matches the URL so that's where the third step comes into picture executing guards and data resolutions or process guards and resolvers we currently have a future router State now the router will then verify that switching to the new state is is permissible so with this we will accomplish using running guards now we suffice it to say that guard is a router function that ensures that navigation to a specific URL which is permitted is occurred coming to the fourth step that is activate view user router Outlet which means it enables all required components here the router can Now activate this mode by bringing up all all of the required components and plugging them into proper router sockets now this will take us to the fifth step the final step which will navigate and update browser's location so the router has constructed a router State and it has also instantiated the components at this stage right after that what we must be able to do is we must be able to move from one router state to another now there are two ways to do this the the first way is imperatively using rou on navigate function or we have another way that is declaratively using router link directive we'll get into it further when we get into the demo part with that I think we can proceed and go ahead and learn about common routing tasks now this command here actually uses angular CLI the first step is to generate an application with routing enabled so angular CLI is used to generate a basic angular application with application routing module called app routing module this is basically an NG module where you can figure your roots this is basically your NG module now the next step in generating an application is to add components for routing so let's see how we can do that to use the angular router an application needs to have at least two components so that you can actually navigate from one to another to create component using angular CLI you need to enter these comons the first one being NG generate component first for your first component and second for your second component next we are importing new components in generating a new application for that these comons come in handy so to use new new components we need to import them from App routing module which is of course at the top of your file with that said actually there are many more steps involved in common routing task like defining a basic route for starters there are three fundamental building blocks to create a route so in angular CLI actually performs step by step for you however if you're creating an application manually or working with existing non CLI application make sure you verify the Imports and configure if all of them are correct now getting root information so often what happens is user navigates your application now when you want to pass information from one component to another this basically happens so for example consider an application that displays a shopping list for your grocery items so each item in the list has a unique ID right to edit an item user click clicks on edit button now this will open something called as edit grocery component so you can actually if you want retrieve this ID from this component for your grocery item so that it can display the right information to the user now we will take a look at it in our demonstration going ahead we have setting up Wild Card Roots now a well functioning application should gracefully handle when user just attempt to navigate to part of your application like this does not happen normally so to add to this functionality your application should be set up in a wild card route this means the angular router selects this roote anytime the requested URL doesn't match any root paths next we have displaying a 404 pages so to display a 404 you need to set up a wild card with component property and to set this you can actually use 404 Pages displaying methods like the traditional methods itself and then we have using relative parts so basically relative Parts what it'll do is it'll allow you to Define parts that are you know relative to current URL segment so the first component and second component are at same level here in the tree as we saw we created two components right with that they will be in the same level however the second component is situated within the first component because obviously you create the first component first and the second component definitely has to be located inside meaning the router has to go up a level and then into a second directory to find the second component so this is where your relative parts will come into picture now you also have something called as choosing a routing category like you should make sure that you choose a routing strategy early in your development of your project because uh once the application is in production visitors to your site use and depend only on application URL references I think next we can go ahead and see how single page application routing techniques works so in order to understand single page app routing techniques we need to create an application and following we'll be seeing the tech techniques for creating this application and the steps to create them and the first one is creating a sample application so to create a sample application we need to create an angular project called angular routing sample or anything as you may wish but here let's say we create an application called angular router sample the next command we need to be using is generating a component where we need to create a component now for that I have used a component name as crisis list next component name I have used as Heroes list and then we use NG serf in order to see our compilation and output now again the steps here is theoretically explained I will get into the Practical part and the demonstration in our demonstration section now next we have defining the roots here basically what we do is from our code editor we open app module TS typescript file and then we locate at NG module section and we type the following comments here next on updating the components we search app. component. HTML and then we give our router Outlet tag now this is a directive just so I mentioned here next moving on we have control navigation with UI elements here again in app. component. HTML we create a tag in app. component. HTML and we add these following HTML components both are the button tags as you can see and next we have app. component. CSS file here we go to the CSS file and add these code lines so we'll get into the demonstration part and here we can get a thorough look at what we're doing next in order to identify the active roots from our code editor again we need to open app. component. HTML and then give the following tags we also need to update our anchor tag in order to include router link active directive now here a router link active directive is a particular directive just to mention again next we'll see how we can actually add 404 page so in order to add 404 page as we discussed that we should be doing this we can actually give this command known as NG generate component to generate our page not found when we do that we'll find one such page now finally we have reached our final section of today's session that is a router reference so here here the first thing that we have is uh router Imports so in order to make sure that we import our router services in our angular application we need to make sure that we give this particular command so basically the angular router is an optional service and that again presents a particular component view for our given URL now it is not part of angular core that's why it's in its own Library package that's why you're supposed to be using at angular SL router now next in order to configure there is a bunch of code structure that you have to follow so basically a rooted angular application has one single ton instance of router service now when the browser URL changes the router looks for corresponding root from which it can actually determine the component to display next speaking of router out Outlet like I've mentioned before it is a directive from router library that is used like a component now it acts as a placeholder that marks the spot in the template where the router should display the components for that particular Outlet now speaking of router events there are actually several events for us to know during each navigation the router emits the navigation events through router event property these events range from when navigation starts to navigation ending now there are many more points in between some of them again like I said start of the navigation and cancel or end of the navigation there is navigational error root config load start or load end again there are couple of more events that you can look up for with that said let's dive into the demonstration part now for the demon demonstration I'm going to consider Visual Studio code here so firstly what I'm going to have to do to start with our routing project is we need to generate a routing project for that I'm going to take terminal and in a new terminal I'm going to say this command where it goes like NG new and any project name that you're creating now say I will create a project name called angular R routing you can select any name that you want with this I'm going to have to give a command dash dash routing indicating that this is a routing project now I say enter now this might take a while to create a project as there are too many packages to be installed now when this project is created we have to dive into the next next part but before that as you can see it is asking for The Styling sheet that you want to choose you can choose anything that you want I'll say CSS and when I say enter it's going to start with installing all the packages and creating our project now once the project is been created as you can see it says the project is being created now let's open the folder we have angular routing demo the folder is right here and once you do this let's go into the source code app as you can see there is a folder created called app routing module typescript file and then you have HTML component file all sorts of file which we'll get into later the first step here what you're supposed to do is you're supposed to go into index.html and once you go here as you can see you have title being created called angular routing demo let's make it a little visible now once you've done that the base tag should be mentioned with href now let's get into the app routing module typescript file now let me save this before I do that here as you can see it contains the routing module for our application and this is where we have to configure our routes for our application here we're supposed to make sure that we have imported our angular core and our routing module now with that we can step into the next step that is we supposed to look into the module typescript file here we have to make sure that a routing module is been imported with our routing module file and then as you can see there is an NG module and also declaration should be made for our app routing module as we have imported our routing module the Declaration should also be made now with that we have generated a routing project the next step is generating component in our routing project now to generate a new component we're supposed to consider a following comment but before that let's get into to our directory that we have just now created now you might take a long time to type such huge project name so you can create a easier one so we have gotten into our directory now let's go ahead and create our component the command is NG G is for Generate you can actually write generate as I've mentioned in the pp earlier and uh here I'm going to consider C that is for component again you can use component instead of c and then I'm just going to give an example list or component you can again consider anything you want and the command goes like dashit that is for inline text and dasis that is for inline style I say enter a component is being created all so similarly you're supposed to create one more component I say teacher list an example again in line style and say enter our components have been created also make sure you import your components here now that we've created the components let's go ahead and configure our routes for our application so to configure our routes we supposed to get into this file routing. module it's a typescript file so here all the routes used in this application are actually called here and in each route it is actually considered as an object so basically each route is considered as object and so I'm going to go ahead and create an object style since this is an object let's go ahead and create this also you have to remember there is a path present in the URL for this particular object because we need our routers to redirect through this path or via this path so what I'm going to do here is I'm going to say path colon and students since I have said student list and there is also component for this and the component is because you need to render this particular component that you have just created over here so I'm going to say component colon or student list here you go it's a student list component now this is for students creating for teachers the same thing path I say teachers component and again here teacher list component once this is done save it and now also with this you have to go ahead and mention the same even as your import doing this we will actually create redundancy as it is present in both app module and also in our routing module so now here since we've created in both routing module file and app module file I don't want it to be here in app module so I'm going to create an export class over here I just say export const because I'm calling this particular constant routing components and I create an array over here so here if I create an array both these things will be called inside so I say student list component and we have our teacher list component I say save now let's go ahead and import it that should be done in our app module typescript file so what I'm going to do here is I'm just going to import my routing components which I've just declared I save this and I have to remove this since I have declared it already there and here just going to say routing components save doing this it is a really good practice as redundancy will be avoided and you don't have to going on creating components here as well as here so you just can go ahead and create an array of components here and just mention our routing components which will be a good practice now to display the view in routing we need to open this file it is an app HTML file which has some redundant code let's not consider about that let's go ahead and this tag router Outlet tag helps us display our output now we have to make make sure that this is always there so let's just remove this unwanted code we just don't want all these now now this will be created as soon as you create a new application so I'll just say this and let's create a normal HTML tag to display our routing output I'll say style and I say one heading tag maybe this is called routing tutorial just maintain the code I say save and once I save just come to your command prompt and say npm start and once you do that you can go ahead and look into your Local Host 4,200 you'll see our output so let's see if this is configured so since this is still compiling let's wait and see if the Local Host will work now since the configuration and the compilation is all done as you can see our routing tutorial is been displayed now in order to jump into our students and teachers list that we just created I'm just going to have to say students I say enter it says student list work and instead of that I say teachers says teacher works but obviously the user cannot type the URL hence let's go ahead and add the buttons over here into our HTML file so here what I'm going to do is I'm going to create an anchor tag so let's say navigation because I need our user to be navigated and inside navigation I create an anchored tag now here what I'm going to do is I need to relink our student URL into a button so for that I'm just going to say router link which will say that our students must be linked into a button so I'm just going to go ahead and add a button over here I say button now this will keep it enabled we want our student to be displayed here and similarly I say router link for our teachers I close the tag and once I have finished this adding anchor and button tags I'll just save let's go ahead and see this as you can see clicking on this buttons this works now this is what we do in our routing tutorial we can also do this in our existing application we can implement it we can modify it but this is the basic works of all the routing tutorial here here's a simple question which module must be imported to use routing in an angular application and the options are a forms module B HTTP client module C router module D NG module if you know the correct answer please leave it in the comment section below Having learned angular routing in our previous module we'll now explore Ang forms this topic will cover how to handle user input efficiently including form validation and data collection so angular forms assist you in managing the user input it accepts the input and sends it to the server for processing and as we all know the majority of web applications depend on forms to serve various purposes such as retrieving search results entering emails submitting blank details signing in using usernames passwords Etc angular basically provides two types of forms namely reactive and template given forms however the building blocks of these forms are common first of all you have your form control which is used to keep track of the values and the validation of each form control followed by Form Group which is used to track the same values along with the status for a collection of form controls then you have something known as a form array now this feature is used to keep track of the same values as mentioned before along with the state status for an array of form controls and finally we have control value assessor which is used to create a link between the form control instances and the original Dom elements now if we did a head-to-head comparison between reactive forms and template driven forms we would notice certain differences between them setup now in reactive forms the component class directly defines the form model whereas in template driven forms the NG model directive is is liable to generate the form control instances reactive forms which are built within the component class are more explicit whereas template driven forms are less explicit then we have something known as a data flow now form elements in reactor forms are associated directly to a form control instance whereas in template driven forms each element of the form is linked to a directive and this directive will manage the form model internally next let's let's look at validation now reactive forms define specific validators as functions these functions receive the control to validate template driven forms are linked to the template directives and must specify the custom validator directives that wrap up the functions for validation moving on let's talk a little bit about testing now testing is easier when it comes to reactive forms as there is synchronous access to the forms and the data model therefore reactive form forms can be tested without having to render the user interface on the other hand template driven forms make testing slightly complicated as they require a sound knowledge of how the directives are executing for every cycle as well as the change detection process then let's talk a little bit about mutability the data in a reactive form is pure therefore the forms are immutable so in case there is a change that is triggered a new data model is triggered by Form control in template forms on the contrary there is mutability they are mutable they make use of angular's two-way data binding in order to update the data model where there are changes made to the templates and finally scalability angular's reactive forms not just provide synchronous access to the form model but they also provide low-level apis which help in easily creating large scale forms template driven forms Focus mainly on simple scenarios now that we have a clear distinction of both the kinds of forms let's go ahead and look at each of them in some depth so first of all we have reactive forms now angular reactive forms can be used to create forms whose values change with time they provide a model driven approach to handle the state of angular forms at some given time as mentioned earlier when changes are initiated they give rise to a new state thereby taking care of the Integrity of the form model reactive forms cater to a direct path for testing purposes as the data is predictable and consistent so let's move ahead and create them I have already created an angular project here in case you have any doubts regarding how to install angular and create an angular project you can refer to the angular 8 tutorial the link to which I will leave in the description box below so the first step is to import reactive forms module this module is present within the at angular SL forms package so I will open this file which is the app. module. TS file and import it next I will have to add it with the Imports array as well next what you're going to do is create a new component using the command NG generate comp component RFS now RFS is the name of the component it can be anything so you can basically give any name of your choice remember that whenever you create a new component you will have to import its class within the app. module. TS file so you're going to go ahead and open the app. module. TS file now as you can see on the screen the component has been added in my app. component.ts file and this is because I have added the auto to import extension if you do not have this extension you will have to manually import it now the most basic building block in the case of reactive forms is the form control class so you will have to import the form control class within the RFS do component.ts file and then you're going to create a new instance that is the employee name of the form control which you are then going to use as class property in the templates here we have set the initial value of the employee name as an empty string using the form control Constructor all the controls that you create in your component class will help you in various tasks such as getting instant access to listen for updating checking the form validation Etc moving on we have step three which is updating the template once you create controls within the component class you will have to link it to a form control element within the template of the component next you'll use property binding to bind the form control provided by Form control directive to the name value okay so now the form control is registered to to the employee name input element present within the template of this component here the form control and the Dom element will communicate to reflect changes made in the views and the templates the final step is to display this component to do this you will add the selector of the RFS component within the app. component. HTML file next we're going to open the styles. CSS file of this application and then add a bootstrap link to add some cascading style sheets to this application finally you're going to save and run the application using this NG serve command as you can see the form control that you assign to the employee name property is displayed on the screen next let's go ahead and discuss something known as a control value management now at any point in time angular reactive forms give the user access to both the form control State and the value to change the current state or the values you can use the component class and the template let me show you an example of how to display the value of the form control instance and also change it the first thing to do is to display the form control value you can do this in two ways one either through the value changes observable where you can listen for the changes in the form's value in the template using async pipe or in the component class using the Subscribe method and the second way is with the value property which gives you a snapshot of the current value in the following example I'll show you how how to display the current value using interpolation in the template so when you modify the form control element this displayed value will change accordingly angular's reactive forms give you access to the details about some control through the properties and methods provided with the instances these properties and methods of the under Ling abstract control class are used to control form State and determine when to display messages when handling validation now how can you replace a form control value so the values can be changed without the user interaction a form control instance provides a set Value method that updates the value of the form control and validates the structure of the value provided against the control structure for example when retrieving form data from a backend API or service you can use the set Value method to update the control to its new value which replaces the old value entirely we going to add a method to the component class that will update the value to John using the set Value method we also going to include a button that will update the name now let's get back to the development server as you can see when I click on the refresh button the value of the employee name gets updated as John now the next thing is how to group form controls a single form control instance as we have seen in the previous example it gives us control over a single input field similarly a form group instance checks the form state for a group of form control instances when the form group is created every control present in a form group instance is traced by the name in the next example we will see how to manage multiple form control instances in a single group what we're going to do is we will import the form group and form control classes present in the at angular / forms package so the first thing we're going to do here is to create a form group instance now let's create a property called the employee form and set this to a new form group instance to initialize the form group you're going to have to provide the Constructor with an object of the named Keys mapped to their control for the employee form we're going to add two form control instances namely the name and the designation the individual form control that is the name and the designations are now grouped together the form group instance provides its model value as an object reduced from the values of each control in the group this group instance has the same properties and methods as those of form control instances the next step is to link the form group model with the view or the template now for every control the form group will track the status and then modify in case even one of the controls is changed the parent control also generates a new status or value change the model for the group is maintained from its members now after you define the model you must update the template to reflect the model in the view I will copy paste the code that I already have here the employee form form group is linked to the form ment with the form group directive this creates a communication zone between the model and the form that consists of the inputs the input form control name which is provided by the form control name directive binds each individual input to the form control defined as form group the form controls that we have created here will communicate with their corresponding elements and not just that they also communicate changes to the form group instance which provides the source of Truth for the model value so the next thing is to save the form data so how you going to do that the RFS component accepts input from the user but in a real scenario you will want to capture the form value and make it available for further processing outside the component the form group directive listens to the submit event emitted by the form element and emits an NG submit event that you can bind to a call back action now all you have to do is add an NG submit event listener to the form tag form tag with the onsubmit call back method the on submit method in the RFS component captures the current value of the employee form now let's make use of this button element and create a submit button let us get back to our development server and see how the form we just created looks now this is how your form looks similarly you can also create nested form groups to do that you're going to add the employee address with the employee form so let's get back to the RFS do component.ts file and add some nested Fields now the address will have two subp Parts namely the country and the city I will copy paste the code that I already have so what we're going to do is create new form control instances for them that will be nested within the address form group finally you're going to add these fields within the views so the name and the designation becomes one heading and the address will be the other let's get back to the development server and see how it looks so this is how it looks so by now you must have understood how to create reactive forms in angular in this tutorial we will not be focusing on form validation so let's move on and see how to create template driven forms in angular now in the previous section we created an employee form using reactive forms now what we're going to do is create a separate template driven employee form to do that first we are going to create the employee model class followed by creating the component that controls the form the third step deals with creating a template that specifies the form layout and the next step is to bind data properties to each form control using the ngg model two-way datab binding syntax finally we are going to add a name attribute to each form input control so first of all let's go ahead and create the employee model class the this model class will specify the layout of the form you can also call it a property bag that holds facts about a thing of application importance that describes well the employee class with its Fields such as ID name designation and an optional field such as skills So within the command prompt type the command NG generate class EMP to generate a new class named EMP I will copy paste the code that I already have now it is the job of the typescript compiler to generate a public field for all the public Constructor parameters not just that the compiler will also Auto assign the value of the parameter to that field when you create employees now an employee can be created by creating an instance of the EMP type and passing the designated values to each of the fields such as ID name designation and the skill so the next thing you're going to do is to create a new component for the template driven form now in angular forms there are basically two parts that is the template which is based on HTML and a component class which handles the data and user interactions technically we are going to begin with the class as it briefly describes what the employee editor can do so within the command prompt type the following command then what you're going to do is within the component class create a list of skills such as Java python SQL and C++ and then create a new property known as model that will hold all these EMP fields or M Fields so I will just specify the ID as 101 name as John designation as project manager and set the initial skill to the skill present at an index number zero which is Java this component is just like any other component you create in an angular project there's nothing that is specific to the form so simply put the import statements import the angular code library and the M model that we just created the selector present within the at component decorator specify the value of app hyphen tdf using which you can add the form in the parent template using the same tag the template HTML is pointed out by template URL and finally you have your employee data within the component class so next what we going to do is we are going to modify the root module here the app. module. TS specifies the applications root module you can add external modules that you will need to use in your applications and declare all the components that are a part of this module therefore you will need to add the tdf component within the app. component.ts file next you will have to add the forms module within the app. modules file because template driven forms are in their own module therefore I'm going to import forms module and also specify it within the Imports array now our application has access to all the template driven forms features including the NG model also if you have noticed the TDS class has been imported automatically because of the Auto Import extension if you do not have this extension make sure you manually import the component class as well as add it within the Imports array moving on next you're going to display the template driven form now to display the content of the template driven form you're going to have to remove the reactor form tag from the app. component. HTML and replace it with the app hyen tdf tag so next we are going to be creating the HTML form template I will copy paste the code that I already have and this is what a looks like so here we have specified the name designation and the skills please note that for skills I have made use of the ng4 directive in case you do not know about this structural directive you can refer to our angular directive's video the link to which again I shall leave in the description box below now we're going to save everything and run the application using NG serve so what do you see now you probably see the form but no data and this is because we have not performed any two-way data binding yet so let's go ahead and do that now for this I'm going to be using the NG model syntax which makes it easy to bind the form to the model now let's go ahead and run the application as you can see the data of the employee has been retrieved and if I make changes to any of these details you will see that the corresponding value within the diagnostic output also changes now this is because of the two-way data binding let me just go ahead and show this to you all as you can see the name appears to be Joe so when I make changes to John you can see that the name is being altered within the diagnostic as well here's a simple question what directive is used to create template driven forms in angular and the options are given on the screen if you know the correct answer please leave it in the comment section below we have learned forms so next is angular crude operations you will learn how to create read update and delete data essential for any Dynamic application what crud really means now the ability to create read update and delete items in web application is pretty crucial to most of the full State projects for example if we're creating a storefront blog posting page to-do list or even social media clone without crud actions we'll get stuck very quickly now let's see what crud is now as you can see from this diagram crud is an acronym which abbreviates to create read update and delete now these are the four most basic operations that can be performed with most traditional database systems and they are the backbone for interacting with any databases now the crud acronym identifies all of the major functions that are inherited to relational database and the application used to manage them which include Oracle database mongodb Microsoft SQL Server MySQL and many such others now here since we have to have a data of considered a small employee schema which is in Json format now this is just for our reference so let's start with first operation that's create now in create users can use this function to add a new record to the database now the create function in a SQL relational database application is called insert now it is also known as create an Oracle and so in mongod DP now remember that a row is referred as a record and column are referred as attributes now user can add new attributes to the table by creating a new record and populating it with data that corresponds to each property however in general case scenario only an administrator may be able to add new attributes to the database now with that let's move on to our second function which is read now the read command is something like a search command so basically it allows the user to search for or even read the values in individual records in a particular table now users may be able to find records using their keywords or even filters for specific criteria now if you consider there is a database called Vehicles if you need to search a particular record called toyoto Corolla you can apply filters like model or which year it is been created in something like this now let's move on and understand our third operation in cud which is update now using update function we can actually make changes to existing records in the database now users may need to edit information in numerous fields to completely change a record to explain this let's consider a table called restaurant now this might have attributes like dish cooking time cost pricing now this contains recipes for menu items in a database now Chef chooses to replace one of the dishes ingredients with something new one day now as a result the old database record must be updated with all attribute values updated to reflect new dishes features also here I might add that update function is simply called as update in SQL and mongod DP or even in Oracle with that let's move on to our final operation which is delete now users can actually utilize uze the delete function to delete records from a database that no longer is needed now the delete function is available in both SQL and mongodb and even an oracle perhaps now this will allow users to remove one or more records from the database now users may be able to do a hard delete or soft delete in some relational database applications now a hard delete removes records from the database permanently and a soft delete on the other hand May merely change the status of a row to show that it has been deleted while leaving the data intact now with that we'll see how we can perform crud operations in angular so to perform crud operations in angular there are a few steps that we need to consider so firstly we're going to mock the backend data using Json server next we'll create an angular module and then we'll import angular HTTP client module and forms module next we'll create components so we are creating different components here we'll understand that in our demonstration next we'll add angular routing and then similarly We'll add angular service next we'll create a model finally we'll Implement all our crud methods and call those crud methods as a final step so to understand that let's go ahead and look at our operational demo so in today's demo we'll be understanding how we created this particular application now this is a simp simple application where we can show our records or we can add our records using this particular form we have a simple search button and this is our homepage now to browse from one tab to another I have added routing now I have created Services as well we'll understand each and everything when we look into the demonstration now let's go ahead and see how our crud operations work here now as you can see I have already added a record now let's go head and add a record in order to understand our crud operations now to understand our crud operations let's go ahead and create records now I'm just going to say XY Z as my name and I'm going to say senior man shot for manager location I'm just going to say London and say 2000 when I say submit it says save successfully now this means our database has accepted this record which means means create operation is performed in our crud now next we have read as you can see we have read operation automatically being performed as we can see our record popped up now also since I've created a tab to display our employee records we can also see our records being displayed here now with that we'll move on to our update now as you can see I have created an edit button over here to edit our record now once I click this you can see all my record is has been popped up here now let me go ahead and edit it I'm just going to say India and it says updated successfully here completes our update function from our crud the last part is delete as you can see delete button is there now if I go ahead and say delete there is a toast that's been popping up and it asks me if I'm sure if I want to delete the record in mind you when I say delete my record is been deleted even from my database so I'm just going to go ahead and say okay now this means our record has been deleted and as you can see our record is not been displayed here in our employees record as well now let's see how this has been stored in our mongodb or backend now I'm going to refresh this as you can see my only one single data that I've added through my forms is being displayed here in a Json format and you can also look at the autogenerated ID for each of the record now let's go ahead and delete the existing record and see if the deleted record will be deleted from my database as well now I'm just going to delete this record now let's go ahead and see in our now let me refresh this as you can see there is no data now this means there is a connection between database and our front end we'll look how we have created all this in our demo but before we get into our demo let's see what are the prerequisites that we need to create create our application and to perform our crud operations so looking at the pre requirements firstly we have client side we need to make sure that we are using typescript and our system is compatible of using typescript also we need to make sure angular CLI is been installed in our system now make sure your npm package has been installed and angular CLI latest version is being installed in order for us to run our application with ease now next we have server side on the server side I'll be using nodejs and mongodb so here you don't have to worry as I'll be showing how to set up your mongod DB in your system now with that let's proceed to our demonstration now first step in our demonstration is to install mongod DB so let's go ahead and see how we can do that I'm just going to say install mongodb and when you say that just go here and depending on the operating system that you use you can install your mongod DB Edition now after you do this there are few commands that you'll have to accept now once you do that you just have to go to command prompt let me show you the next process now once you've installed your mongod DP the installation file will be recorded in your program files now when you go to your program files you can find a file called mongodb here you'll have to go into the server your version bin and in inside that there will be an exe file now since I've already installed I have no exe file here and once you click on that exe file there'll be bunch of messages where you'll have to accept it and it'll further be installed now with that there'll be a popup called installation Compass now you can install your compass which will give you your desktop application with that your installation will be completed but in order for it to run as a server you need to run a few commands in your command prompt how will you do that well firstly we need to give this command in our Command Prompt CD and redirect to your file where will you get this link is here now wherever your exe file is there copy this link in your program files or wherever your exe file is being stored now once you do that go to your command prompt and give this particular command CD paste that link when you enter you will get into the directory now once you do that it is still not run but it has gone into the directory now next we'll have to create a file for storing all our database records we can do that in our C drive now I have done in my C drive as you can see here there is a data file here and in that I've created a DB file here all my records of DB will be stored now this is required for us to have have all the records in one place you can give any name to it now once you do that your second command can be run D- DB path and the directory now again this link can be obtained from here copy that link paste it in your command prompt to ease our work we can actually paste both the commands in a notepad save this as anything that you want I'm just going to say commands do B remember it should be bat save this in a place where your files are present your mongod DB files are present I'm just going to go and save as you can see I have come into my bin folder I'm going to save this here now all you have to do is run that particular command now since I have already done that I'm not going to do it again my connection will be established with that my connection is already established now you should get a message something like this it says connecting to mongodb with your server number now let's go ahead and open our mongodb app now when you open your app you'll have something called as connect when you connect it will autogenerate this page and you can just say connect again since I have already connected to a connection I'm not going to do do it again the next thing you will see is adding a database let's go ahead and see how that works now once you connect it will redirect you to this page where you can create your database now I'm going to create my database as crud and collection name as employees since I've already done that I will avoid the step once you do that just say create database and once you have created your database your database will be created here you can open it and you can see all your collections displayed here now I've have created two of the connections so it says employee and employees with that your collections have been created you can add data over here as well but since we are using our frontend client side application to add data let's not do it but to add it you can just import your file or just insert a document inserting document will take your record in Json form it will also give you autogenerated ID as you have already seen in the demonstration now let's go ahead and start with our creation so firstly to create any particular angular application I'm going to create a project name called crud demo this is just a project name next we are going to add Services client side server side all the files required let's go ahead and start with that first thing we're going to to do here is create a package.json file now let's go ahead and see how that is done now in order to create a package.json file all I have to do is give this command npm space in it when I do that as you can see a package.json file will be created now all you have to do is just keep hitting enter now I'm just going to keep saying enter it's going to ask if it is okay just say yes and as you can see package.json has been created now let's move on to our next step now we need to create a body parer for that I'm going to go ahead and give the command npm install Express body parser and I need to be saving it in a file so I'm just going to say save now this might take a while now as you can see our body parser is been created and there is one more file where we have created for all our operational purposes now next let's go ahead now to start coding first thing we have to establish connection between our server and our DB let's go ahead and do that I'm just going to say and create a file here called db. JS now once I do this I will have to call all my collections now to do that I'm going to call my mongos now as you can see here first thing that I've done is I've established connection with my server now this is my port number now I have to give an error message to see if my connection is succeeded or not and that'll be displayed in my console here is what I've done here if my connection is established I'm going to say mongodb connection succeeded or else it's going to show me an error now with that we have connected to our server I'm going to save this now next thing we're going to do is we're going to give a command in our node to make sure this connection that we just created is established I'm going to say node db. js now as you can see it says mongod DB connection succeeded the next thing I'm going to do is I'm going to make sure that node modon is being installed for me to make my connection instantaneous this will make me avoid running the connection again and again if I make any new changes so all I have to do is the command you can see here is noon db. JS now I'll run that running that will make me avoid redundancy of giving the code again now let's go ahead and create our root Javascript file which is index.js now I'm going to do that I've created my index.js now in my index.js all I have to create is a request statement for Express for calling my Express API next I have to create a body parser as I have created a body parser next I have to call my DB file next in order for me to create Port connection here for port number 3,000 where all my server side request will be passed I need to call my console and create it here with that I think we are ready to proceed next so the next step is to create models for that I'm going to create a folder known as models now once we've created our models we're going to create a file known as employees. JS which will be present in our models going to say enter now in my employee. Js here I'm going to have to give my schema but before that make sure you give all your requests statements in every JS file that you create in your nodejs so I'm going to call the request statements now as you can see I have called my request statement and after that I have given connection next as you can see I have created a schema with a type string for my name type string for my position type string for office and type number which is integer for my salary with that I'll have to export my employ employee record over here now this completes our employees. JS file now let's move on now the next thing is our main goal here we are going to implement crud operation create read update delete now for that I'm going to have to install or create another folder known as controllers now inside this folder I'm going to create a file file name is going to be employee controller.js now here again as I've told you before we need to call all our required statements so the first thing is I'm going to pass my required statement now as you can see I'm establishing router connection here through my Express now once this is done let me go ahead and create a get statement now here in my get operation I have requested the result and here in case I cannot retrieve my employees it's going to show me error on my console otherwise it's going to give me the data now employee is something that we created right now and for this to happen we need to give an export statement because we need to export the router from our main route now I'm going to say this export router now with that let's go ahead and add our employee controller to call in our main page now as you can see I have added employee controller that I just created here now similarly I'm going to create a post request now for that I'm going to go ahead and give all the requirements now here in my post request as you can see I have given my structure of the schema and then employee save now this is a keyword for me to save all my records that I'll be entering into my forms now with that I close it again with the router why why don't we just go ahead and see how it works in our browser how the record has been retrieved by my server now to understand that I'm going to go ahead and say this as you can see since we have no records now it says an empty bracket now let's go ahead and add records and see now say if I add my record in my existing app for us to understand if I've added my record here the format has been shown in the Json as you know and I've already mentioned that our records are being stored in the Json format in our server that is in our DB now similarly let's go ahead and create our update and delete functions as well as you can see our create has been created over here we are creating our record of course creating from the front side we will work on it now in order to read I'm going to say find by ID let's move ahead and create that now as you can see I have given something called as find by ID update so in order to update you want that particular record itself to be updated to avoid that glitch that will be created otherwise I'm going to say find by ID update this will find us by ID as I have given my find over here it will collect the ID of the particular employee and update so our update operation is been carried on the same way our create has been done now also if there is no record within that ID we want this statement to be returned now let's go ahead and finish our operation by delete now for delete we are going to check if the ID is passed is valid or not otherwise it's going to return me a no record now for that I have created a e valid next again to delete Del a particular record I'm going to find the record by its ID and then remove it and hence our record will be deleted so this will complete our server site now the next thing that we're going to do is we are going to create a client site angular application so in order to create a client side application I'm going to open one more command prompt now here since all this belongs to our nodejs part I'm going to create another file where it it says angular app now to create our angular application or our client side application I'm going to open my command prompt now here I'm going to say NG new or angular app name which I'm going to name it as angular app enter now this might take a while now once this is created let's go ahead and open this application and see I'm going to say NG serve open in order to open my application now as you can see this is a bare minimum app which is autogenerated when we created our angular application now let's go ahead and add all our features and see how we have created our required application now in order to understand what I have done in my angular client side application I'm going to walk you through what I have created so the first thing I did was I created components called employee and in order to create that the command that we used here is NG space g space c and the component name and in this case it is employee now once I created that all my component files will be established now here in my HTML I go ahead and create a form that is required here as we already saw I need bare minimum facilities like div now we don't want to spend all our time adding this so we are just going going to copy everything and we are going to add a table now as you saw I have added a table format record for my employees in order to store their records as you saw I've added an action button to edit our employee and action button for deleting our employee record now all this in our HTML let's go ahead and see what we have done in the rest of the files now before we go ahead and see all our employee related components files let's go ahead and create our models and services for that I have created a file name called shared now in that I'm going to create a model with the command NG space g our model name for that we have to give space class space employee D- type-h model I'm going to write down that comment for you so the command for creating model is NG space g SP SP class employee because our model name is going to be employee d-h type model now when you hit enter it will redirect to a model file so when you have the model file the first thing you're going to do is export the class employee this means we have to create our record into a class now this is why we create our model next thing we're going to do is we're going to add a service in order to add service we have to type a command and that is the command is going to be NG space g space s and a service name here my service name is also employee so I'm going to give this and let's see what happens next in our service files now here my service file is been created let's see the further operations here now here we're supposed to create an array now this array consist of all our employee records here I'm going to call that array next for particular selected employee records going to call that array next we are going to add where we can retrieve our employees from that is from our server from our get call we can add this now let's go ahead and see the rest part will then come back to this again so back here in our app. component. HT ml first thing we're going to do is we are going to call our router Outlet now that router outlet should be called in our container for us to have a nice working application the next thing we're going to do is we're going to call our services for our component for that I'm going to import the service package next I will use providers as employee service next I'm going to create a Constructor which is private and create an employee service now with this we can go ahead with our HTML again now in order to create this kind of form all you have to do is go to bootstrap.css and establish a form now I'll walk you through what extra I have added here but for basic you have to create number of div tags and give a form structure or also the next thing is I have created an NG on submit now if I give information into my form this should be accepted when I press the submit button now this will be operated by our NG submit now to add submit and reset button we have created a div class again here and inside that we have called a custom button and we have added reset and submit now in order to make our reset and submit button workable all we have to do is go to employee. component.ts and here we have created a function called as reset form next a function called as onsubmit now for this function we have to add some more functionalities the first thing I'm going to do is I'm going to give my schema structure over here next I'm going to call it in a service known as employee service now since I've created Employee Service everything that comes to this this particular function comes from our service this will avoid redundancy of our code now I'm going to select the service that I have created select a particular employee and give the reset for that particular employee now I'm going to call the function form reset now this will provoke our form object so here goes our reset function similarly for submit I'm going to say save successfully if I'm submitting or up successfully if I'm updating the same function is been used for both update and submit with if and else Loop now if I call a particular ID the employee record is being submitted otherwise for a particular ID employee I can edit now in order to request for a particular record I need to subscribe and this is where I have given subscribe now it is important for us to give a toast as you saw in my application once I give a submit it says saved successfully for a particular employee and similarly it says updated successfully when a record is been updated this is been done here now before doing everything something that we have to do is add our style classes into our styles. CSS sheet now again if you want this this is available in bootstrap website whenever you download your form you can download the CSS features as well now with that we can go ahead with with our components now along with calling the service here I'm going to go back to my services and here in my service file I'm going to create a HTTP client in order to call all my get and put records here I'm going to call my post record for my employee get list record for my employee and put in order to update delete employee in order to delete and everything is being called with respect to our ID ID s now ID is something that we generate in our mongodb now when you import the statement do not forget to create a Constructor in order to call and use HTTP clients now going back to our HTML now that we have created our forms and displaying our records we have to make sure that our records are being displayed as I've already told you about this I have created a table structure here and in order to display our records in a table format we are creating this particular table and hence we are calling particular records attributes with its ID called M now m is something that stores employees service. employees which means it stores all the service records for our particular employees with that all our records that we type in our forms is been retrieved now with this our record is been displayed so let's go go ahead into the browser and see what in all records we have covered until now so until now I have covered form structure how to add records updating records and also deleting records now all we have to do is create routing and jump from one tab to another for that I have created routing Services now the first thing that I have created is components now I've already discussed how we can add components all I've done is add three components here the first component is Navar in order to add all the tabs next is home in order to add homepage and post for our post or employee records table now we'll go ahead and see what is there in each of it firstly we have Navar in Navar it is a simple div statement and HTML tag for us to add form link record link and our home link as you can see the route link is been activated here now we have not explicitly created any routing as you can see it is internal router link that has been called now once this is done it is simple link tags that I've added for each of the routing now going back to our nav component I have called the init component environment is being imported and hence environment is being called this is just for the appearance now again all our components are being defined here here that creates our nav bar now going back to our homepage similarly in our homepage we have added nothing but a simple title next going back to our typescript file I have added the title dynamically which ISS urea app now similarly I have called my import function import of the component next going back to our post which has our records the similar record of whatever table we have created in our form is being copy pasted here now you could add your action button if you will but I have not considered this and hence I've commented this out now again if you go to typescript file I have called all the functions that I have called on my form now since I want all my records to be displayed dynamically as in when I add into the form all my functions should be called here let's go ahead and see our final application how it works now I'm going to say forms I'm going to add one more record here it says form submitted our create is successfully done our reading is successfully done you can go here and check it reads the record next we have update let's see if it is updating the records have been populated here right before we update why don't we get into our mongod DB and check I'm going to say refresh now as you can see both the records that I've added have been populated here now I'm going to go back to my browser now here in my browser let me go ahead and update it I'm going to say 3,000 instead of 1,000 I'm going to say submit updated successfully as you can see the record is being populated let's go ahead and see yes updated let's go to our mongodb and check and refresh it as you can see it says 3,000 which means our update is done successfully now let's go ahead and see our delete I'm going to delete this record going to say okay next going to go to my DB refresh it my record is been deleted this way we can add our CFT operations involve mongodb involve nodejs for our operations here is another quiz question which HTTP method is used to update a resource in angular and the options are a get B post C put or patch D delete if you know the correct answer please leave it in the comment section below after learning crude operations we'll move on to Anglo bootstrap in this module you will discover how to use bootstrap to style your angular applications making them responsive and Visually appealing so before moving ahead with the session let us take a look at the website that I've created using just bootstrap and angular now since I'm a football fan I wanted to create a simple FIFA website for the upcoming World Cup at Kar so this website basically has different components that give you various information such as the latest news from FIFA World Cup 2022 some official videos embedded into the website booking tickets online and the stadiums Etc now let me just show you guys how I've done all this the uppermost region of my website contains a Navar this Navar contains links to all the pages that I've created in my website if I click on any of these Pages I'll be redirected to that particular page one more thing I want you guys to note is that for redirecting you can simply type in the address of that page in the address bar itself next up I've made use of Carousel images so as you can see over here I basically have three Carousel images followed by that I've created a Jumbotron that contains cards having the latest news updates from the FIFA World Cup 20202 next I've created another Jumbotron wherein I've embedded an official video from FIFA World Cup 2022 so this was the homepage now let's move on to the venue page so just like the homepage I've embedded another video on the venue page now this video will basically show you all the stadiums that are constructed for FIFA World Cup 2022 at khar also I have a separate card that will allow you to book tickets online so basically when you click on book online you'll be redirected to the ticketing section of the fifa.com website next up is the locations page now this page basically contains the images of all the stadiums and a small description about each of them not just that I've also created a drop- down list over here so when I click on any of the stadium names that particular Stadium's image will appear so this is the website that I've created without manually having to write any HTML or css code all I've done is just made use of bootst along with angular so if you want to create this website or even better ones let's move on further with the session basically what is bootstrap bootstrap is an open-source HTML CSS and JavaScript framework that is used to create mobile first and responsive websites using bootstrap you can easily create beautiful and responsive websites by making use of its readily available layouts components utilities Etc so how can you embed bootstrap in angular there are basically two ways by which you can embed bootstrap into angular the first is by making use of the bootstrap CDN or the content delivery Network or by making use of npm or the not packet manager now in this session I'm going to cover both of these topics so first let's see how you can embed bootstrap by making use of the bootstrap CDN so using the bootstrap CDN you can make direct use of the bootstrap content delivery Network or the bootstrap CDN this is going to deliver the cached version of bootstraps compiled CSS and JavaScript to your angular application now to access that you can directly go to the bootstrap CDN link now you can get this bootstrap CDN version from the official link so I'll just type in bootstrap CDN over here and I'll hit enter so as you can see over here I have all the CSS and the JavaScript that I need for my project the first thing that you'll have to do is copy the Cs stylesheets link element and then get back to your project open the index.html file and paste it at the end of the head section so I'll just paste it over here and I'll save this next get back to the official page and from there copy all the three script tags now this is in order to incorporate jQuery and popper.js into your applications so just copy this and paste it at the beginning of the body section just save this and now get back to your development server and as you can see bootstrap has been successfully embedded into our application the font that we saw earlier before adding this and the font that we see now after adding the bootstrap CDN links is very much different so this was the first method now moving on towards the second method which is making use of the npm so what I'm going to do over here is just delete links that I pasted over here and I'll save it again so now I'll get back to my command prompt and over here I'll type in npm install bootstrap jiry popper double hyen save so that is bootstrap jiry popper.js double hyphen save so once you've installed these packages you'll be able to locate them within the package.json file so as you can see over here bootstrap jQuery and popper.js have been successfully installed in my application so now the CSS and the JavaScript must be loaded globally and for that what you have to do is specify the path within the angular.js file so I'll just open up the angular.js file so as you can see over here there are two arrays that is the styles and the scripts array now what I have to do is specify the path of the CSS as well as the JavaScript files in order to incorporate them into my application so all packages that you install to your application will be present in the node modules folder so just open up this folder and over here look for bootstrap so here it is now within this bootstrap folder open up the disc folder and within that open up the CSS folder now for my project I'll be making use of the the bootstrap min. CSS file so what I'm going to do is incorporate the path of this file within the angular.js file so what I'm going to do is just see the path which is node modules bootstrap disc CSS and then bootstrap men. CSS so what I'm going to do is get back to angular.js on file and within the Styles over here I'll just incorporate the path so as you can see over here I've specified the path of this bootstrap M.C SS file now what I have to do is include the scripts so I'll just come to the scripts array and since I already have the code present in my previous project I'm going to copy paste that so I've included all the required CSS and the JavaScript that I want in my application now what I'm going to do is save this get back to my development server and I'm going to rerun my server so I'll just type in NG serve even after I've removed the bootstrap CDN links from my index.html file bootstrap seems to work in my application this means that I've Incorporated it successfully so now let me just get back to my project and over here I'll open any of the HTML files present in my project so the base HTML file that is present right now is the app component. HTML file so what I'm going to do is just remove this hello world and I'll open up the official bootstrap link and over here I'll click on get started so from here I'll pick up a Navar and since this is for demonstration purpose I'll just copy the first code present over here and I'll paste it in my project I'll save this and I'll get back to my development server so as you can see over here the Navar has been successfully embedded into my project this is not the Navar that I've used in my project so what I'm going to do is for the app component HTML file I'll just paste the code that is present in my original application so as you can see over here I just copy pasted the code which is present in my previous project and I have the nav bar that I would like to use there are a number of options over here guys you can choose any one of your choice you don't have to stick to the one that I've chosen so the next thing that I'm going to do over here is open up the app routing module .ts file and before editing this what I'm going to do is add in some components to my project so I'll just get back to the command prompt just clear the screen and like you all might know to incorporate a new component in angular project you can make use of the generate command so I'll just type in NG generate next up you must type in the schematic the schematic in this case is a component so I'll just type in component followed by the name of the component so basically I'll have three components that is home venue and locations so I'll just type in home the next component will be venue sorry for the name and next is locations so I have incorporated three components in my project now what I'm going to do is get back to visual studio code and over here within the app routing module. TS file I'll specify a path for each of these components now since I already have the code for that I'll just copy paste it from my previous project another reminder for you guys in case you're not aware of any of these files or parts or any such details please check out the angular 8 tutorial video from Eddie rea I'll have to import the components over here as well so I'll just copy that and I'll save this so now in case I have to redirect to any of these pages I can do it easily by just specifying the path in the address bar now this element over here which is path match element this is actually an optional property by default it will be prefix now why I've specified full over here is because in case the user does not type in the right path the user has to be read redirected to the homepage itself so in case the user just types in ven instead of vnue which is venue the user is going to be redirected to the homepage itself so now let's get back to our project and see how this is working I'll rerun my project so as you can see over here the home component works fine now let's redirect to The Venue component and see so venue is also working fine and then was locations so all the three components are working fine over here now what I'm going to do is get back to my app component. HTML file as you can see over here within the anchor tags I've specified a rotor link property now this property will allow me to redirect to any of the components that I would like to so if I open up the Navar and over here if I click on any of these I'll be redirected to that particular component so the first thing that I'm going to do is modify the home component. HTML file so I'll just clear the data that's present over here and the first thing that's present in my page is a carousel so what I'm going to do is just get back to bootstrap and over here I'll select Carousel and I'll just take any of these codes I just copy it get back to my project paste it save it and rerun my server so as you can see over here the carousel images have been added but you're not able to see them because I've not specified The Source I'll get back to my project and I'll paste the code that I've already written in my previous project so as you can see over here I've included Carousel images in my project similarly if I open up the venue component. HTML file what I'm going to show you guys over here is how to embed a video in the project so what I'm going to do is just get back to the official website and over here within utilities I'll click on embed and I'll just copy this code get back to the project paste it save this and then open up the development server okay I'll go to The Venue page so as you can see over here a video has been easily embedded into my angular bootstrap project similarly guys you can choose any of the elements present within bootstrap and simply embed them within your project I've already shown you guys how my end project looks so all I've done in my project is chosen some of the elements present within the bootstraps official website and I've simply embedded them within my project you guys also can customize your own website according to your choices here is another question question which command is used to install bootstrap in an angular project and the options are given on the screen if you know the correct answer please leave in the comment section below having styled our applications with bootstrap we'll now move on to angular projects this section involves Hands-On projects to apply all Concepts learned and built fully functional angular applications so heading towards the first section over here we'll create a project at components services and also see how to perform routing so now I'll jump on to my command prompt and over here the first thing that I'm going to do is install the angular CLI to install angular CLI you can make use of npm so the command will be npm install hyphen G which stands for Global at the rate angular CLI so to create a project you can make use of the NG new command so I'll just type in NG new and the name of the project you can give any name of your choice in my case I'll just name it as basic this is going to take a while so when you're doing this angular will ask you two questions the first question is if you would like to add angular routing just type Y and hit enter the second question is what type of stylesheet you would like to use in my case I'll be using CSS therefore I'll just select CSS and hit enter okay so now our project is created the project that is created will consist of many files and folders in case you select no for routing you will see that the app routing module. TS file will not be present in your workplace now to show you guys all this what I'm going to do is just get inside my project so I'll just type in CD basic and then I'll just type in code space dot this will open up my project in Visual Studio code so as you can see over here a project has been created with a number of files the NG new command creates an initial skeleton of the angular application by default at the root level of the workplace along with with that it also creates end to endend tests those tests are present within this e2e folder now when I try to run this project you will see a default welcome page of angular so just to show that to you guys what I'm going to do is jump on to my command prompt over here and to run my server I'll have to make use of the NG serve command now what I'm going to do is add an open extension to this and this extension will open the development server on port number 4,200 so I'll just type in hyphen o or you can also type in double hyphen open the NG serf command is used to serf the application through the development server on the Local Host this is nothing but the welcome page of our application as you can see over here it says the basic app is running now to create your own angular application all you have to do is modify this okay so now let's get back to visual studio so now coming back to the files and folders that are present over here in this video I will just explain the files that we shall be using in case you want to know what each of these file does and why is it present over here you can refer to the angular tutorial video from edura so now I'll move on towards the main.ts file so this is nothing but the main.ts file this file contains the code that is required to bootstrap or start off the angular application the next file that I want you to see is the index.html file the text. HTML file basically feeds the default page of a website in case no other page is specified the angular CLI will automatically add the CSS and JavaScript filed over here therefore you will not have to add any link or script tags manually the folder that we're going to concentrate on is the app folder the app folder is present within the source folder and the first file that I want you guys to see over here is app module. TS file the app module. TS file defines a root module named the app module this app module tells angular how to assemble the application initially and declares a component called as the app component as you add on more and more components to your application all you have to do is come over here and declare it within the Declarations array next up is the app component.ts file the app component.ts file defines the logic for the application's root component which is the app component the view or the HTML file which is associated with this component becomes the root of the view hierarchy the app component. HTML file the output that we've just seen on the default page is rendered from here this file defines an HTML template associated with the root app component the app component. CSS file is the personal app components CSS or stylesheet so now talking about the app routing module. TS file this file is created because you choose to have routing in your application in case you would have selected no this file would not have been created so what I'm going to do over here is go to the app component. HTML file and select everything from here except the last line which is the route Outlet so I've cleared everything that's present over here now just to show you guys that this app is working I'll just take an H1 tag and within this I'll just write hello world now let's get back to our development server and see what happens so as you can see over here the default page no more exists rather it's replaced by the hello world text that I have just typed in now let's get back to the app component. HTML file and within this I'll create a simple form so you'll have to make use of the form tag and within this I'll just have name and the input type will be text name will be name itself and I'll close this so simple form is ready I'll save this I'll get back to my browser as you can see over here the page has automatically refreshed and a simple form has been created so in this project I'm not going to concentrate on the HTML or the CSS part all I want you guys to get familiar is with the building blocks of angular and how to add them in your project now before we move on towards that let me just tell you guys how an angular application actually works so for that I'll just open this angular.js file so the execution of an angular application starts from the angular.js file this file is used to define all the standards and parts for your angular project also the angular.js file specifies which main.ts file and index.html file has to be executed once this main.ts file is detected it is compiled as it contains all the code that is required to bootstrap or start off the angular application from the main.ts file angular moves on to WS the app module from this main.ts file angular will move on towards the app module the app module is present within the app module. TS file this file consists of all the components that angular needs to know in order to run your application and these components are declared under the NG module decorator in the Declarations array from App module. TS file it moves on towards the app component.ts file in order to look for the app component this file specifies the selector and the template URLs all the components of an angular application are related to this root component the index.html file contains the app Root selector so let me just open it okay so as you can see this is the app Root selector for the app component to sum it all up you can say that the execution begins from the main.ts file then it's passed on towards the app module. TS file and then it moves on to the app component.ts file I hope you guys are clear with this now let's move on and understand the building blocks of angular building blocks of angular are nothing but modules components templates metadata directives data binding services and dependency injection a module basically allows you to separate the functionality of your program into different parts these parts are independent of each other which means each module's output is completely separate from that of the other if you make changes in any of these the change will be made to only that module and it will not interfere with that of the others in angular modules allow you to group together all the other building blocks such as components directives Etc these modules are referred to as NG modules applications created by angular are driven by functional sets which collect related code therefore angular applications are defined by a set of NG modules NG modules are very much different when compared to those of the JavaScript modules NG modules declare a group of that can be passed and analyzed you can also make use of other NG modules within one NG module by simply importing them above all these modules prove to be very much helpful when you're creating large applications that have multiple functionalities besides allowing clean code creation these modules also help you minimize the code size by reuse of these modules and optional import of the required ones optional importing is also referred to as lazy loading meaning you can load NG modules only on your demands not to forget NG modules are also one of the biggest reasons for angular's popularity every application created with angular will have at least one NG module which is the root module this root module in angular is referred to as the app module so as you can see on the screen this is the default app module that is created by angular CLI the import statements are basically the JavaScript inputs the class that follows has an atate NG module decorator decorators basically modify classes or property definitions they are also referred to as annotations and are JavaScript features in angular these decorators contain some metadata to classes and properties so as to convey what they mean and how they're supposed to function I shall explain metadata in detail when we reach the component section so the NG module decorator that you see over here identifies the root module or the app module it then tells angular how to launch and compile it by making use of the metadata by default the Declarations array contains the app component which is the root component of this application Imports are used to import the browser module in order to attain the browser services such as Dom sanitization rendering Etc providers are nothing but the service providers which we shall be discussing later on and bootstrap is the root component created by angular and it's inserted in the index.html host web page so as you can see over here app component is present both in declarations and in bootstrap now this is because this is the only component that is present in this application coming back towards this declarations array the Declarations array present in any module informs angular about the components that belong to that module when you create more and more components to your application don't forget to add them in your declarations components cannot be used without declaring them in the NG module class so make sure you declare every component in exactly one n module class if you fail to do so your sure to encounter an error the Declarations array can only contain declara bles or components directives and pipes all the modules declara bles should be present in the Declarations array and they must belong to just one NG module the classes declared within one module are visible only to that module but in case you want their functionality somewhere else all you have to do is export them to other modules apart from declarations Imports providers and bootstrap there's another array that can be present over here which is the exports array the exports array is a subset of the Declarations array that are accessible in the component templates of other NG modules so now let's move on towards the next building block which are components as I've already mentioned earlier all angular applications have at least one component which is the root component this root component connects the component hierarchy with the page document object module or the Dom all components Define classes that have applications d data and logic and they are also associated with HTML template this HTML template defines a view that is to be displayed therefore components are basically used to control the views of an MVC architecture the etherate component decorator that you see on the screen will tell angular that the class immediately below is a component and provides the templates and the related component specific metadata angular components are the most basic user interface for your application and they always are associated with the template and are a subset of directives the components logic is defined inside a class this basically determines how it supports the view components are created updated and deleted by angular as you proceed within your application your application can take action at any moment in its life cycle through the optional life cycle hooks life cycle hooks provide visibility into key life moments and the ability to act when they occur therefore life cycle hooks allow you to control components runtime behavior and they are called only and only when they're defined so now let's get back to our Command Prompt and see how you can add competents to your projects what I'm going to do is just return the control to the command prompt okay now let me just clear the screen so to create a new component you can make use of the NG generate component command so what I'm going to do is just type in NG generate and since I want to generate a component I'll just say component now you can give any name to your component I'll just call this component as home and I'll hit enter so as you can see over here this has created a new component with four files that is the component.ts file or the typescript file the component. spc. TS file which is used to perform endtoend testing the component. HTML file that will render the required HTML or or the view for that page and the component specific CSS file so now let's get back to our visual studio and over here you'll be able to see the component that you've just added so I added a home component and it's just present over here now once you've added a new component you'll have to remember to get back and add it so as you can see over here the home component has already been added now this is because I have added an extension which is the Auto Import extension in case even you want to insert this extension all you have to do is go to these extensions over here and just type in Auto UT so as you can see over here the version that I'm using is 1.5.3 once you add this you will not have to manually come here and import the components that you add to your application so now get back to app component. HTML file and specify the component selector over here in my case the name of the component is home so I'll just say app High home and I'll save this now let's get back to our development server I'll have to run the NG serve command again so as you can see over here our application says that home works home is the name of my component and this is the default output so as you can see over here within the view of this component I have a simple line saying hom works and this is what we just saw on the development server what I'm going to do now is get back to the home component.ts file and over here I'll make a slight modification so before I make any changes to this file what I'm going to do is add in a new file within this folder and I'll just call it as home.ts do not forget the TS extension because I'll be typing in typescript code within this over here I'll create an export class and the name of the class will be name within this I'll keep a single property called name and this will be of the type string let me save this I'll get back to the home component.ts file and within the home component class I'll create a new property called as name which will be of the type of the name class in case you have issues understanding the syntax of typescript I'd suggest you guys to go and check out the angular tutorial video of edura so for the name I'll just specify as Eda now the reason why you're seeing a red mark over here is because I've not imported the class that I've just created so all I have to do is import it so import the name of the class was name itself from so now we've imported the class let me just save this I'll move on to the home component. HTML file I'll just delete this so one thing that I want to do over here is change the name of this variable since I already have this variable present in the name class so I'll just call this as my name and I'll save it so now I'll go to the home component. HTML file and over here I'll just specify an H3 tag and within this I'll be making use of the interpolation binding feature so over here I'll just specify my name do name I'll also make use of a pipe over here and to this I'll just say uppercase and I'll save this so now let's get back to our browser and see how this works as you can see over here the changes I've made has been reflected on this browser also please make a note that the pipe is working with angular pipes display value Transformations can be declared in your template HTML a class with the etherate pipe decorator defines a function that transforms input values to Output values for display in the view there are various type of views in my case I've used uppercase other than that you can also make use of lowercase date currency Etc not just that you can also Define new pipes so now you've seen what are competents and how you can add them to your projects the next thing that I want you to know is services service is a broad category that encircles values functions or features that are required by an application service classes have a narrow and well-defined purpose components are differentiated from services in angular so as to increase the modularity and reusability of your code separating the component view related functionality and other kinds of processing will make your component classes lean and efficient to create a service using the angular CLI all you have to do is make use of the NG generate service command so now let's get back to our Command Prompt and then I'll just type in NG G for Generate and service I'll just call it as home service and I'll hit enter so as you can see over here two files that is the home service. service.ts file and the test file for this have been created so as you can see on the screen this is the default service.ts file that is created by angular now in case you want to inject this into some component all you have to do is go to that component and over here type in import followed by the class name the class name is home service it's Auto imported I'll delete this the moment I type the name of the class it gets Auto imported so this is how you inject a service into a component now in case you want to make use of this you can go ahead and specify a property that will make use of this service what I'm going to do is create a private property over here I'll just call it as home service so as you can see over here this property is going to make use of this class I'm not going to get into the details of this I just want you guys to understand how to embed and inject Services next up we'll be looking at routing routing helps you to display your application information in multiple Pages this can be done using angular router which enables you to show different components and data depending on which part of the application the user is referring to angular's router will allow the user to navigate from one component to the other as the user selects the various components it can be done either by entering the URL directly in the address bar or by clicking on the links given in the application our application is already set up to use the angular router so to specify the root that is where the user has to be directed you can make use of the roots array which is present in the app routing module. TS file now in case I want to specify a different part to My component that is the home component all I have to do is just open cry braces within this I'll specify the Path property it should be home because the name of my component is home itself and for the component property I'll have to specify the home component class now the reason why I've just specified One path over here is because I just have one component you can add as many routes as the number of pages you would like to include in your project so with this I hope you guys have understood the basic building blocks of an angular application now I'll jump on towards the second case over here that is adding bootstrap and jQuery to your project to create beautiful websites it's very much required for you to integrate bootstrap and JavaScript files into them now in case you want to add bootstrap you can do it in two ways the first is to directly make use of the bootstrap CDN or the content delivery Network to enable bootstrap to deliver the casted version of bootstrap compiled CSS and JavaScript to your project to do that you can go to the bootstrap CDN link so just go to get bootstrap.css as you can see you will have the bootstrap CDN provided over here now what I want you guys to do is include this bootstrap.min.css file to include that all you have to do is copy this link from here then open the index.html file and paste it at the end of the head section so move on towards the index.html file and towards the end of this head section I'll just paste it save it and I'll get back to the browser next you will need to add the bootstrap.min.js file this is mandatory if you want to include bootstrap JavaScript functionality just copy the script tag from here and paste it within the body part of this index.html file now the next thing that you'll have to do is include jiry Library this is because JavaScript functionality is dependent on jqu to include jQuery functionality you can go to the official jQuery website so I'll just move on to jqu website jiry 3.x is the latest version and over here I want the minified version so I'll just click on minified so as you can see I have the corresponding script tag that is present I'll just copy this I'll get back to my index.html file and I'll paste it just above the script tag of the bootstrap min.js file so once that is done I'll rerun my server so I'll just run NG surf command again so as you can see the font has changed which means bootstrap has been embedded into my project the second method is to install bootstrap and jiry now to install it all you can do is get back to the command prompt and over here just type in the command npm install bootstrap jQuery double hyphen save double hyphen save will save bootstrap and jqu to the package.json file so as you can see both the packages have been installed now let's get back to visual studio studio so now let me just open the package.json file so as you can see over here both bootstrap and jQuery have been installed now since we want to load this CSS and JavaScript globally we should specify the path of this within the angular.js file so what I'm going to do is just open up the angular.js file and move on to Styles and scripts now what I want to tell you guys is that any package that you install will be present within this node modules folder so over here let's just look for bootstrap here it is and within this I'll open the disc folder CSS and from here I want to access the bootstrap min. CSS file so what I'm going to do is specify the path of this file within the Styles array over here so I'll just specify the path node modules within the bootstrap folder is the disc folder which contains the CSS folder and then is the bootstrap.min.css file just be careful while specifying these parts once this is done we move on towards the scripts array and over here I'll have to specify the part of the jiry min.js file so to do that all I have to do is look for the J quiry module so here it is within this the disc folder and within the disc folder is the jquery.min.js file okay so all I have to do is include the path of this file within scripts I just copy the previous one this is jQuery there is no CSS folder and the name of the file is jqu min.js I also have to include the bootstrap.min.js file over here so I'll just specify a comma I'll copy this line and I'll paste it and instead of jQuery it will be bootstrap and instead of CSS this time it's going to be the JavaScript fold folder or the JS folder now what I'm going to do is just save this okay so what I'm going to do now is get back to the index.html file and from here I'll delete the bootstrap CDN links and the jQuery CDN links I'll save this and I'll get back to my development server so as you can see bootstrap is still working and I have no errors in case you guys want to be more clear I'll just give you an example and from here I'll pick up a nav I'll just copy this code I'll get back to my project so now I'll open the app component. HTML file just remove this and I'll paste the code that I just took from bootstrap let me save this and get back to my project so as you can see over here the nav bar that I just took from the bootstrap official website is working this means bootstrap has successfully been installed so now moving on towards the final section of this video which is creating a complete angular application using all the building blocks bootstrap and jiry so now let's get back to our project and I'll just delete all this present from here here I'll open the Service file that I've created and over here I'll just insert some dummy data for my project so before I move on further let me just show you guys the website that I've created this is a sample edureka angular website and over here my home component or the homepage consists of some of the top ranking angular blogs and also a link to all the front-end development blogs from edira I also have a header component that contains the home student list and the enroll components now when I click on any of these components I'll be redirected to a different page this page contains a list of all the students who have enrolled for this course when I click on show details my page is going to display the details of that student also I have a separate enroll component which will allow the user to enroll himself for this course so let me just show you what happens when I enroll into this so I'll just type in some ID I'll say one 02 and for the name I'll just say student student at the rate xyz.com anything and within the description I'll just specify student details okay now I'll click on this enroll button that is present over here and I'll get back to the student list component so as you can see the student who has just enrolled is present within the student list now when I click on show details I'll have the corresponding details of that student so now let's get back to our visual studio and build this website so I'll get back to visual studio and over here I'll open the service.ts file I want the service to have some dummy data that I'll be able to show on my development server So within this home service class what I'm going to do is create an array of students since I already have some dummy data present what I'm going to do is just copy that over here and I'll save this now this service component will be used for all the other components present in my project so what I'm going to do over here is create two functions one which will display all the students that are present in my list and the second that is going to help students enroll for the course let me just specify a public access specifier in case you're not aware of any of these you can still refer to the angular tutorial IAL video by adura so public the name of the method will be get and I'll just call it students now this function is going to be of the array type and this array is going to hold the IDS names description and email so that'll be ID sorry I forgot to specify the curly braces ID name description and email so within the body of this function I'll just specify one return function that is return this. students this function will help me retrieve all the students that are present in my dummy data next up I'll create another function and the name of this function will be create student now since I want the student to have ID name description and an email ID what I'm going to do is just specify students and the type of this which is nothing but ID name description and email within the body of this function I'll just specify this do students do push so now both my functions are ready the next thing that I'm going to do is add on some more components to this project so I'll get back to my command prompt and over here I'll type in NG generate component and the first component will be student list the next component will be student create and I will also have a header component so I'll get back to the visual studio code now when I open the app module. TS file you'll be able to see that all the components that I created have been imported by default over here now this is because of the Auto Import extension that we spoke about earlier in case you've not added this extension you'll have to manually import the corresponding components now I want each of my component to have a specific destination or a separate page therefore what I'm going to do is go to the app routing module. TS file and over here I'll create a path for all the pages that I want to display in my project I'm not going to be typing this manually I already have the code present for it so let me just copy paste it over here so now my app routing module. TS file is ready so the path match property that you see over here can have two values that is the prefix or full when the user specifies some URL within the address bar this property will check if the user has correctly specified the whole extension or we'll just check for the prefix of it by default the value of this property is prefix the reason why I specified full over here is because I want the user to correctly specify the URL Link in case he does not do so I'll redirect to the homepage so now what I'm going to do is go to the header component and within this header component I want to mention the whole home component the student list component and the enroll component within the HTML part of this header component what I'm going to do is paste some navbar code from bootstrap so I'll go to the official bootstrap website I want my header to be right aligned so I'll just pick up some right align Navar you can take any of your choice I'm just taking something that I prefer to I'll paste it over here what I'm going to do is modify the content I have my Project Specific content present in my previous project so I'll just copy that from there HTML part of the header component is ready now in case the user clicks on home he'll be redirected to the homepage if he clicks on student list he will move on towards the student list component and if he clicks on enroll he'll move on towards the student create component I'll just save this next I'll have to move towards the app component. HTML file over here I'll have to include the header I'll delete this and I'll include app header let me just save this I'll delete hello world now when I run my server my header component is present over here okay I see this edua from here I'll just delete it so that's present in the home component so I'll go to the home component. HTML file I'll delete this this and I'll save it so now as you can see the browser has refreshed and my header component has been displayed now within the homepage I'll create a bootstrap Jumbotron or an area that is very important so what I'm going to do is just copy the code that's present in my project the next thing that I'm doing over here is modify the home component. HTML file since I have the code ready I've just pasted it over here so let me just explain to you guys what I've done over here the first thing that I've done is included an image because of the first image tag you are able to see this image present over here the code that I've used for this is the responsive image code present in bootstrap the next thing that I've done is within a div tag I have a class of Jumbotron jumbotrons basically Mark areas that are very important so as you can see over here the gray area is nothing but the Jumbotron not just that I also have some cards over here that are aligned next to each other and within this I've just specified a few blogs that are very important finally I have this last Jumbotron which contains a link to all the front-end web development blogs of edura my homepage is ready so my homepage is ready now I'll move on towards the next component that is the student list component over here I'll open the student list component.ts file within the student list component class class I'll create two variables that is student and selected student then I'll be making use of the same service class that I've created which is home service so I'll just create a public parameter I can give any name to the variable but I'll just specify as home service next I'll create a public function and I'll just name it as select student this is going to take student parameter this is going to take student as a parameter and within this I'll just return this do selected student and I'll insert it into the student property now I'll have to update the view of this component so I'll open the student list component. HTML page and I'll just copy paste the code that I've already written so now I'll just come and refresh my browser looks like the header is missing there it is the header has moved towards the end of this page that is because I've not specified the CSS for it so I'll just get back to my project and I'll go towards header component. CSS file and one more thing that I have to do is move on towards the app component. HTML file and instead of placing the header after the router Outlet I'll have to place it before that so now let's get back to our development server so as you can see the header component is present where I want it to be now I'll just click on the student list so as you can see over here all the students have been retrieved now in case I click on any of this it will show me the details of that corresponding student now two of our components are ready the next thing that I'll have to do is manipulate this enroll component I'll get back to visual studio code and over here I'll open the student create component So within this I'll create an array called as student and this is going to hold the IDS name description and the email of the students and one more thing that I'll have to do is import the service Clause so I'll just say import the name of the service class was home service what I'm also going to do is create a student class that will allow me to display the created student in the student list the student create component.ts class is ready next I'll have to modify the views of this component so I already have the code ready for this so I'll just paste it over here I've copy ped pasted the required code I'll get back to my browser and I'll rerun my project so let me just see if everything is working I'll go to the homepage and over here my homepage runs fine I'll click on student list so the student list component also works fine and the student create component so over here let me just type in some details I'll just give some random name so now let's get back to student list so here it is the student that just got enrolled is also shown up in the student list after completing your projects the next step is angular testing you learn how to test your angler applications to ensure they are robust and bug free and essential skill for any developer testing software testing why do we need to do a software test software testing is a process to evaluate the functionality of a software application with an intent to find whether the developer software met the specified requirements or not and to produce a bug free quality product so everybody what is our goal we have to deliver a product with all the features without any bugs quality product so to do that what we were doing is that first developers develop the code and QA Engineers comes and they will start testing the application they will make sure that no errors are there if there are any issues bugs they'll create a bug they will assign it back to the developer this is how it does right we fix it and send it to the product once the keyway people provides a sign up then only we'll give it to U test or production environment that's how we use to do it if there are any defects after deploying it to production then again you know it is the same process wherein you need to work on the defect and deliver it back so then solo software testing is to deliver a bug free quality product why should we perform testing cost to reduce the cost of fixing the bugs when you deliver a product if it has any bugs fixing those bugs invers a lot of cost that is what we need to reduce it so if you able to identify those bugs in the early stage the cost of fixing those bugs will be very less to produce the good quality product why do you think that fixing a bug is more expensive if we delivered a product to the production there is an issue you identified some customer or a product owners business they identified it now they created a bug the bug has to be prioritized the developers have to to put the efforts qway Engineers again they have to test it again you have to engage a infrastructure team or a devops team to deploy the application and again you have to impact the customers because while you deploying the production it might go down again this is all about process so that involves a lot of cost to produce good quality products why you have to test it you have to give a quality product to make software application defect free making sure that there are defects in the code which you delivering it to check if behavior of an application is same in development and production envirment that means the code which you have written the application which you are developing should be the functionality should be working same like how it was working in production also how it was working in development environment if it is working properly in Dev environment it is expected that it should be working in the same proper way in production also without any issues because of the environment issues velopment environment you have set up everything and it worked well but when you move to production it should not fail types of testing unit testing functional testing integration testing so there are three kind of categories of testing is there we'll go through that unit testing functional testing integration testing so in unit testing what all you will be cing who does the unit testing nowadays it is a a world whatever the code which you are going to write your story itself contains a acceptance criteria saying that you have to develop the feature you have to test it you have to write automated functional testing whatever unit testing everything you are supposed to take care of it that is a goal so unit testing is something is used to test small pieces of independent code uncovered with how they are unconcern what they're saying is unit testing is something which a developer does write the code to test your code that means you are automattic the behavior how you test the application that you have to automate let's assume you have written a class the class contains some behaviors and properties so it is talking to a database and to F some query data so this is the behavior your class has maybe now you have to automate the testing process so that your application whenever you deploy a code or somebody adds a new feature to your application so that automatically it will test the functionality instead of you testing it manually every time if you automate and code coverage and everything it will automatically does by clicking a button or running a simple script saying that test something it will take care of testing entire code whatever the pieces it needs to be covered use it to prevent regressions bugs that occur repeatedly so regression is a quick way of testing your application every time when you do some changes when you deploy to some environment easy to pinpoint and and fix the problem unit testing is helpful to do fixing the problem in advance so that if there is any expected parameter to be passed to a particular function and it will throw an error that's how you are able to easily identify instead of you waiting for a keyway to raise a but if it takes a longer time to execute it is likely that the code under test is much more complex than it should be longer time to execute if it takes maybe any piece of code which is talking to database is going to take longer time you can easily identify it because you have a time mod and all everything popular tools to perform unit testing on angular application is jasine so if you want to come up with a unit testing in angular application you have a different Frameworks but jasine is a very popular framework what is Jasmine does angular itself is a framework on top of that you are using another framework to test your application unit test scod what Jasmine does functional testing end to end testing functional testing are made against a combination of many units application functionality testing like how a end user if you're developing a web browser based application like a Gmail or something it will be tested like how a end user test your application how a IND user access your application what end user will do a QA engineer will do qway user if I ask you to open my application in a browser he will go to the browser and enter HTTP Local Host 42 and he will start entering username password and a click a button that functionality also can be automated that is called functional testing an you can use any number of external objects or systems like database UI security and other application layers you can talk to database also you can talk to any other external systems also which are being used in your application takes longer time to execute than unit test cases because unit test cases maybe you can mock it but whereas functional testing it needs to be interacted with the realtime scenarios functional testing represent major releases where unit test represents only minor changes due to which they are expected to change less often than the unit test cases functional testing means mostly you'll be running before you deploy to production or a q environment Maybe from your end example when user enters username password and clicks a send button or login button that user will be logged in we can easily see that this functional group will comprise of many unit test one for validating username one for handling a button click whatever example I give so integration testing integration testing ensures that the entire system application is working correctly or La it can be executed only with a realistic environment like a real database servers and other system which are like the target production environment you are completely doing maybe your Upstream systems Downstream systems if you are talking to Microsoft AO if you are talking to Amazon web services completely you going to test all the functionalities or you might be dependent on some other apis completely are going to do that kind of testing it can be executed only with the Real estake Environment whatever it is used in case you need to test a separate systems like database and applications it is slower than the other testing application complex to write also because it involves the real time scenarios real time systems for example a functional testing May successfully test the ability of an ideal system to open help the dialogue box like a UI related functional testing is mostly like in this context is like clicking on a button launching a popup filling the data clicking again saving the data these kind of like how a human test the web application that is what they're talking about testing angular applications so any testing types of testing in angular application broadly there are two forms of testing for an application unit testing it refers to testing the business logic of a small and isolated unit of code to verify the correctness of the behavior obviously you are going to test the code which you have written it will taken care of the code coverages whether you have covered all the scenarios or not something like that it is like testing automation of testing your developer code which you have written end to end testing it simulates the user actions and checks whether the application behaves as expected it simulates the user Behavior like I'm a user I'm logging into Facebook username password click on a button same how you are filling the data how you are clicking how you are validating the username password whether it is wrong or not when you see an error message and again you will retry same like how user Behavior it works during end to end testing you should not run the unit testing scripts so types of testing in angular application unit testing end to end testing so for that you'll be using a Jasmine mocha mocha or you can call it as mocha so written in Jasmine or mocha what is nend to end testing you'll be using a protactor which is a wrapper for selenium n to end testing can be done in angular using protactor why can't use selenium there is a strong reason it is rapper for selenium but still it has more advantages than selenium selenium is used to test applications in 13 language it supports 13 languages Java net C cold fusion feed PHP python so many approaches are there but you can still test the application how end user access the application same way protor also supports but selenium cannot access the model of angular model means data that means that comp component properties objects which we create right Services these cannot be accessed by selenium selenium is only for testing the browser based application but whereas a protactor can talk to or can access the model of angular data bindings it can talk to that protactor supports for all the browsers K stands for karma this symbol is for protactor this symbol is for jasine this symbol is for mocha so what I'm saying is these are are the things which we'll be using it so what you will do in a testing framework you'll WR test Runner and a browsers test Runners are nothing but karma task Runners you can call it as karma is a task Runner protactor is a end to end testing purpose Jasmine is a testing framework so the test cases are written in using unit testing libraries such as Jasmine or a mocha mocha is the one which is used to test JavaScript based code applications so Jasmine and Karma Jasmine is a behavior driven development framework for testing JavaScript code so Jasmine can be used for JavaScript code mocha can be used for JavaScript code it's a behavior driven development framework even though Jasmine comes with its own browser based test Runner we will be using command line based test Runner called karma that can be easily integrated into the application what is a karma karma is a task Runner like how you have a maven Jasmine is a behavior div it's a framework just understand if you want to test a JavaScript code you need some framework testing is a framework so that is comes with a jasine even though Jasmin comes with its own browser based test Runner we will be using a command line based test Runner called karma that can be easily integrated into the application so karma is something see you have a framework with you but who will run the test cases the test Runner the task Runners like ant and Maven what are those called task Runners ant is a task Creator task Runners same way karma is a one which will help you to run your test cases which is a command line application karma is used for testing JavaScript code written with or without Frameworks whether you write with framework without framework you can still use Karma to test the application that means you have to say karma test something like that Karma can run the test cases to check whether the application works properly in multiple browsers or not karma is a configuration file which is used to do some configuration related to browser and all angular application setup comes bundled with a jasm so there is no need to install separate what they're saying is Jasmine is a framework used to test a JavaScript based application so Jasmine by default comes with you when you create a project you don't need to install them separately when we create a new project and start so CD Sur angular February batch 2020 so here we sayu unit testing whatever so go to the project angular February 2020 unit testing example see here today if you look at it karma is there what is karma before we go that package.json file is there in the package.json file there are two different type of dependencies dependencies Dev dependencies dependencies are nothing which are required for production purpose if you want to run your application without any issues you need dependency because these are required to run your application in a production environment without FS I cannot validate my form without FS I cannot do data bindings router without routers I cannot Implement a routing even though if you implement and this dependency is being not available in the project it will fail r JS libraries Jones whatever data binding concept or data State management related all those things will not work compiler common libraries all these things so you need these must mandator in the project de dependencies if you look at it Jasmine Karma and typescript TS link all these are required only for development purpose once you compile your typescript code into techmas script or a JavaScript you don't need this this happens at the time of build time TS link syntax checking strict all those things TS link TS node typescript node versions or whatever protor testing purpose functional testing Karma task Runners whatever the testing unit testing code coverage Istanbul Chrome launcher Karma Chrome launcher headless browsers Jasmine the framework which we use all these are required only for development purpose not to run in a production so if You observe here Jasmine is a framework which already available to you that is the reason why they are saying you don't need to install by default angular will give you the setup so what they are saying is Jasmine is the framework which you are going to use and karma is a task Runner what is karma if you go and look at it karma. config.py this is a Javascript file the code if you look at it it looks like a JavaScript only what it does so coming to karma karma is a configuration fun the karma talk tells you clearly you are going to configure something what is that you going to configure something for unit testing purpose you are using adjustment framework build angular deit that is also required for development purpose building an angular application what is our base path empty means the current route whatever plugins you are going to use Jasmine you going to use Chrome launcher and you are going to use jasine HTML report generation you are going to use Istanbul reporter code coverage how much percentage of code is being covered all those things the code which you writing in a component.ts file what is a class name app component what is a property it has title what template it is using App component at HTML if you go and look at it app component it has a unit test covered I'll tell you what is justment if you want to do any test cases you have to create a suit inside a suit what you will keep you will keep a features inside a features what we will keep a test case can we do this in a normal functionality wise I have a Facebook application inside a Facebook what all the suits you will have suit related to login login suit inside login you will have a features like login register something like this or you can say Suit name as user authentication suit login registration inside login what test cases you will have valid username password login user forgot password maybe invalid credentials something like that register register user all the things these are the test cases now another suit I can say products suit inside product suit you can have ADD product inside add product add a new product maybe you will have a add place order or you can say query products something like this I'm giving an example in this test case what you will write now if you want to convert this just imagine this example if you want to convert you have to use some framework so what does jasmine does is that it provides you a method describe is a method used to group test cases it is a method to write test Case Logic these are the methods you need to understand and before each after each like this Jas provides a methods to test your applications it is a test case so you have to use some assertions that we are going to see like this jasine provides an up first of all the code which you are going to is typescript only language now if You observe import statement let me run first of all whenever I say in this CD unit testing first of all I have to say NG Ser I'll walk you through the code later first understand how do you run a unit test coverage how do you configure the scripts when you trigger NG test what it is happening so your application is working properly first of all veryify then you can check the unit test coverage 42 your application is working properly no issues close this now go back to the another terminal let the application run as it is don't touch that open another ter teral now unit testing CD Sur February batch 2020 NG test I have to run this command so NG test if I say NG test what happens observe I to go to the unit testing coverage so from here I to say NG test NG test who is giving all these features to you your angular command line scaffolding project is giving it to you by default they are doing all these things for you it opened a browser 9876 Local Host in a Chrome application now karma connected to some server it ran three specifications zero test case failed and those test cases are related to app component should have a as title something I'll tell you later what it is all those things now come back to the application command line promps in the command line also it printed saying that I have run three test cases successfully those three test cases executed without any issues total out of three three got successfully executed now come back to the code package.json whenever I say NG test go to package. whenever I say NG test what happened here NG angular The Bu tool whenever I say NG serve what it is doing it is internally running a serving an application now it also instead of I saying NG Ser I can also say one more command the script tag I'm talking about control C I'm killing the application instead of saying NG S I can also say npm St npm node package manager start what it does is that npm means node package manager what is our package package.json file npm starts internally triggers NG Ser why if you look at it here the command npm start which is internally triggering NG Ser it is serving the application first compiles it is serving see same way contr C here the scripts are nothing but a shortcuts npm test you can say or you can say NG test when you say NG test which is going to trigger NG test what is NG test or you can say npm test also when you say NG test which is configured somewhere in our angular do Json file or you can say test command this is configured here what it is doing is that which will internally goes and triggers the main file is that SRC test.ts file what is there in the SRC test.ts file polyils if any of the functionalities of JavaScript doesn't support an ie older browser or something like that polyils are the one which are going to take care of backboard compatibility TS configuration. spc. Json file Karma configuration where is the karma configuration karma. config do Javascript file we have those files TS configuration test spec file so if you open a spec file all these the main file see you are telling whenever you run a command called NG test go through SRC folder star star don't bother about a sub folders you go through all the sub folders and find a dotp file every component is ending with a dopc file every component which we are going to write if you want to write a unit test cases you have to put app. component instead of TS you have to say app. component. SPC file so these kind of configurations they are done with the do configuration files so now all the SRC folder it will scan through wherever it has a spec file it will include now what is our justment types you are going to use output TS configurations TS config JavaScript why you need to compile the typescript code into JavaScript EAS script whatever now karma configuration in that angular do Json file whatever I have used there is the task so it is looking for all this file setting now it goes to Karma configuration. JS file it will pick up what is the browser what framework you are going to use to run the test cases all those things along with that you also need to understand SRC test.ts file why SRC test.ts file is important open a SRC test.ts file what is this test. CS file contains so same like understand if you want to run your application in a browser first of all what are you doing angular application has to be bootstrapped by a main module angular application once it is bootstrapped it will Travers through the scanning of the code and it will identify the angular syntaxes same way when you run your application that unit test cases you don't need to run it in the browser so for that purpose you have to bootstrap your application to bootstrap my application I have to use all the modules imported browser module Dynamic whatever blah blah so that kind of settings you are going to do it here what you are going to do you're are going to use angular Zone testing data binding related angular core testing related any libraries which requires to test your code you need to get all these libraries test bed whatever and browser Dynamic testing module if I remove this what it becomes browser Dynamic module we know what is browser Dynamic module which will help you to boostrap your application so for every module they have a corresponding testing module platform browser Dynamic testing declare constant request if you need anything first initialize the angular testing environment how are you going to initialize initialize Tes environment with the whatever get test bit on the main core module you got it now constant then we find all the test cases how do you go you will walk through all the spec files and get them context. Keys map your mapping with the application modules now the next step is that which is going to trigger angular doc config.js angular.js file where is that SRC test is going to take care of everything nothing else here and you are also making sure assets are being inserted or included everything now test.ts now it goes to module context whatever you are using it now go to your app. module. component spec file your spec file is saying that b you need a app component I'm importing app component it is not going through your app. module. TS file why the reason is app. mod. TS it is a replica of your TS file test.ts file is taking care of bootstrapping the application now which component you have to bootstrap so first app component that means instead of user accessing in the browser I am testing my app component code coverage so app component is being imported and also apart from that you need a test bit and a sync method from core testing Library I told you clearly describe is a method how describe looks describe is a method what it is taking a method can take a string as an argument app component a method can take a function as a call back instead of writing call back like this with the latest syntax they introduced without function and arrow function this is a function body that is what describ say if I remove this this is a method of my describe I'm just keeping some logic inside describe what that logic is that see app component this suit is related to app component testing of application component code before each that means every time before you run a test case this is one test case should create the application first of all what are the test cases you have inside this suit should create the application that means first of all I have to make sure app route if you go to component this app should be created that is what my goal so if you go to app component spec you are making sure that app component instance is created then you should have a title variable with a string called unit testing if you go to app component you have a title with the string called unit testing that is what they're talking about here why are we doing all these things to make sure the application is loaded properly so that means you are able to access that title which is a model what is that which is a model you can also access the method you can also access the properties of that component that means you are able to access the component properties and the behaviors in the unit test cases you are verifying whether the title contains so and so value or not if you're going to hit a database and face some records if the record length is matching that means you got a product if the record length is zero you didn't get a record if you want to walk through some login page success or failure you can still validate the test here these are called assertions and another one it should render title in a H1 tab where is the title going to be app. component the title variable the model is going to render in a H1 tag called title H1 tag that means this entire string can be validated using this H1 I can do it that is what we are doing in this should render the title in a H1 tab what are we doing that H1 I'm able to access the HTML element in my unitest cases you understood what is happening this app component. speec is a simple component a component with appoo with a title with this and if you go to HTML page you have a H1 tag if you want me to remove I can remove all this unnecessary steps so that it has only the H1 tag in a H1 tag contains this tag so when you run the unit test cases I'm able to access my HTML elements along with its value so that is also I have written in the spec file that means I'm able to do model validation I'm able to access my HTML elements so I can check whether this particular element is rendered or not whether this particular HTML element contains this text or not I'm able to verify that in the unit test cases now that means your component is being covered by unit test cases describe is a method which contains it it is a test case one test case code you will keep it here what is the one test case I want to test it should have as title unit testing that means the title variable should contain a value called unit testing so to test that it's a testing so I'm calling it as one like this if you have 100 components you have to write test cases for 100 components otherwise your code coverage will goes down if you cover each component with unit testing that means you are writing a proper way of unit test cases otherwise what is the point of like having a unit test case code covered for only for 10 components remaining 90 are not covered again you have to do manual work every time to validate and everything so to Avid that now for a component if you want to do a testing describe is a method which is a group of test cases you can combine them now app comp it's a string you can put a spaces also no issues you can put underscores you can give a string name Also let's assume describe string login test case or login test Sue what it does comma first is a string second is a arrow function like this and a body of it before each time what I'm supposed to do every time when you test the application the test case you are making sure that the component is being declared the component is available that is is what your configuring test module declaration are you using any NG module here root module here no so if You observe your before each is nothing but it runs every time before you your test case gets executed at the same time it has a opposite after running the test case if you want to release some resources you can do that before you run every test case making sure that this component is available to you so to do that before each has a method called a syn manner we have to do s sync is a method so Arrow function again in this you have a function the call back function nothing but now you're doing now how do you declare a component you have to use a test bed do configure testing module what is the module you are going to test testing module what is the module you are going to test this one dot compile component that means you have to compile the component otherwise your application you have to compile make sure errors are there so in this testing module you are going to tell which component to be declarations colon app comp this is what happening for every time now what are you going to test every time it I'm going to say now coming to test case my component is available what is my goal I have to make sure my component is instantiated properly or not if it is a HTML page I should have done index. HTML like how we are doing app that will take care but here we are clearly using a unit test cases in the unit test cases how do you make sure the component is instantiated it is a method which will take a string and a call back function in this test bed do create a component you're going to create a component constant fixer fixer debug element component instance you are getting a component instance whichever the debugging element you got a app app is a instance of your component now what are you supposed to do how do you validate whether this particular instance is created or not you need some assertions that assertions comes with expect of app to be truthy that means expect 1 + 1 to be to equal something like this or expect some array length to equal to something like this I can write same way what these guys have done is that assertions has so many method to be truthy two equals two not equal not null so many ways it has a methods expecting you are passing a value to be truthify and checking whether this is truth that means if app is not null if app not equal to null that means truth so this will return a true that means my object got instantiated otherwise it would be a n once the component is instantiated The Next Step which you're going to do is that it should have a title in it testing so now the component is with you now create a component you got a instance now app. title to equal any testing why don't you do here itself saying that expecting app. title do to equal you can do no is going to stop but the thing is I have a separate test cases so I'm validating it so what you could do should have as a title any testing constant fixer test bid creating a component app component whatever component you are going to instantiate since the component object is with me I can access the properties methods making it to unit test now go back how do you test the application NG test now I will modify something and see your test case gets fails now it will success see your test case passed successfully without any issues let's see now go and modify the value of component test to in testing demo now automatically it is getting compiled one test case fail which one failed If You observe I'm expecting unit testing demo to equal to unit testing unit testing demo is equal to unit testing never that's why it failed so that means based on this it is going to fail same way spec file it should create render title in a H1 tag so how do I access HTML element value so h HTML element if you want to access first you need to get a app component and also it is detecting the changes if there is any change automatically to a data binding it will identify then you get a native element native element of what compiled query selector of H1 if there are multiple H1s you are in screw then you have to put ID which query selector you want to use that text content I'm getting it welcome to unit testing the H1 contains data binding it says two test cases failed why two test cases failed because the below test case also fail what is the below test case H1 do text content H1 has a welcome to unit testing this also did not match earlier when I modify to unit testing demo that is the reason why it f go to app component unit testing demo so what is the output if you run the application in the browsers two test case failed why two test case failed let's see the example here it says unit testing demo should be equal to that welcome to unit testing demo two contains welcome to unit testing now why two test cases are failing because when you run the application H1 tag also should contain the same string so now your code is being covered properly so this is how unit testing works now go to Next Level here is a quick examples Jasmine framework has methods like this and what are the each method does describe describe the script name whatever you want to give and the call back function this method is used to group a set of related test cases these are the methods provided by jasine it is a method used to perform the real testing what do you want to test it expecting is a assertions you passing something and you are expecting that to be matching with that 2 B the method specif that expected value of the test before each after each let's assume you're going to create create a database connection or you're going to initialize some object and you want to destroy that after each you can use it these are the methods which will be using it same continuation evaluation methods to be to equal to match to be to contains to be less than to be greater than not equal to so all these methods are available rejects also can be possible so they have given some example for calculator my calculator describe a method should know how to multiply something so they are creating a component app is an instance of component matter expecting app is an instance of app component something they're putting high level examples now it's time to understand a prot actor prot actor is very very important concept functional testing you are going to do protactor is a testing library that allows you to test application workflows simulating user actions without the need to perform them manually that means I have another example of unit testing angular in testing example NG Ser so it will serve the application once compilation successfully happens 42 is a p number now go to the browser Local Host 420 what it does observe it has a sign in username admin password is admin1 123 admin gmail.com now login what it does it showed me a login successful page so this is the application which you have developed and you are asking QA to test the application what QA has to do every time he has to launch the application in the browser saying that Local Host 420 he has to enter the username password admin at Gmail and click a button and verify whether the login successful or not so how do I automate this process so that I don't need to hire a QA engineer or a test engineer so to do that automation purpose we have a concept called selenium or protactor so NG E2 E I would say Ng g n to see the browser open it closed why because we haven't started the protactor server so before you do this you have to run a few things protactor web driver manager first of all you have to install npm install h g protractor globally why this protractor is a thing which can be used for multiple products not only for single purpose so whenever I run command called protactor Hy globally it requires a permission it's a user level permission access problem I have to install as a sudo or I have to open my command prompt in the administrator mode see it's a permission issue that means I'm trying to install some library at a user level that means if that library is a vulnerable it will impact my application system so it is asking for a permission so I have to say sudo npm install how do you install dependencies npm install i b globally prot done so it is asking for a password that means I'm giving a permission now it will install without any issues once the protractor is installed successfully now you can say protractor hyph V it will tell you the hyphen version protractor iph iph version 5.4.2 to check the version of my protractor you can do this for angular command line interface also NG hyph iph version also will work angular version the next step is you don't need to check that if you want you can do it now you can say web driver manager protactor requires a web driver manager that means you will be testing the application using a chrome Firefox right for that you are going to interact with the web application web elements HTML input text box checkbox radio button so for that some driver manager is required web driver manager you have to say update this is already installed when you install protector so again you have to sudo sud sudo web driver manager update make sure you are opening in a command prompt in a administrator mode permission web driver is updated now once this is done the last thing which you need to do is that web driver manager start then who will tell me all these things now the web driver manager is up and running selenium server is up and running on port number 44 that means when you install a protactor you are also getting a s cium server on your mission now go to the browser Local Host 44 if you say selenium server is up on R if you want to see console go to the cons no sessions are ready how do you know what all needs to be installed very simple angular protractor tutorial make sure you are opening a angular not a Angular JS tutorial n to testing angular that is wrong Angular JS but this guy also tells you the same but better you always angular five you can say or eight whatever so you can follow these steps here is the details so I have done the same whatever I'm supposed to my web driver server is up and running that means selenium server is up and running don't kill it now open another terminal so far whatever magic I have done is only to start the selenium server and install make sure you update the selenium server when you install it now CD Sur CD angular CD unit testing example this is what my project now what you need to do is that NG end to end testing n to end testing shortcut I will tell you for now let it run the Demo First it will start the browser it will try to enter the username password automatically without my key in I don't need to involve in it it will automatically does it will click the button it will verify whether the successfully executed or not login successfully happened or not those things it is launching the browser Local Host 4915 data will be entered Sur I'm not entering anything admin 1 2 three I'm not entering anything login success and it will close the test case executed successfully did I do anything I have automated that it's like a robo is doing it now go to the code the code package. JSM file what is the script end to end when I say NG E2 e it started triggering something which we don't know as of now we already have protector installed for development purpose even you don't need to say npm install hyp G but as a practice I made it now go to protector configuration file in this protector also I told you clearly we will be using jaspine as a framework all script time modes any script which doesn't identify or execute within 11 seconds it will fail and specifications this is not a unit testing this is a end to end testing so you need to go to this folder location do/ toe go to there at the SRC folder level outside you have a E2 in the U2 you have a subfolder or it can be you don't need to it will go to E2 dope. this is the main entry F which will trigger protactor config.js which will use Chrome browser which is running and what is my base application Local Host 420 which application I have to test first of all application has to run if the application is running in a running State then only my end to end testing can start working so first of all my application has to be up and running J is a framework which I'm going to use default timeout interval 30 seconds and now on prepare TS config when the first time it gets executed TS config n to end Json file is the one which we need to understand what it is doing is that it is going through all these things extending typescript configuration file TS config.js file output. TSC end to end file common jscript file Jasmin Jasmin whatever now the main entry file is this what it is doing is that I have a component what is that component go to my code app component app. module. I have a main app component I have a login component what my login component will do and it has a forms module imported so now you have a login component login component is a root component for you now go to login component at HTML what login component has it has only HTML code one form input username and a data model binding NG model why do we use NG model whether you modify the model of username it will reflect in the UI whether you change in the UI it will reflect in the model so you will say username password when you click a button called login it will call the method called validate login go to HTML page of login login component HTML what it does it will validate and it has a variable called this. status when you click on a button called login of hitting a database right now I hardcode it what it does is that it will change the status of login message to success by default login message is empty the variable like title it is empty now when this becomes a successful login you send a database call you hit a API you got a successful response then you are setting it to successfully logged in now when you say successfully logged in if status is not equal to empty you are showing a message called login successful with a green color message now this is the component how do you make this component as a automation automated go to very first is this one so to make app E2 spec. TS file first of all you have to import a protactor protactor gives you option of browser why you need to import a browser because you are going to interact with the browser import login test case from login. test. poo so login test case who wrote that login test case here it is login. P.S C is a test group now before each whatever blob login test case I'm declaring before each time you test a test case login test case I want to instantiate and the test case which I want to do is login test what it does is that login. launch app loading the application into browser how do you do that login what is the login go to login test case login test case is nothing but login. test. po open that login. t.p import browser from protactor and also few more important statements because see first of all I have to launch a browser I have to use method login test case is a class I have to say return browser doget whenever you say browser doget browser is given by protector whenever I say browser doget you are launching this application Local Host Now launch is done the Second Step if you want to access a input Fields you have to use bu method element method elements can be identified by ID elements HTML input Fields can be identified by CSS class or ID name or export now what are we doing I have a main entry file wherein I'm getting a login test case before each time I'm creating object to this login test case my login test case contains internally methods I have instantiated something now my testing is starting log is a reference to login test case now login has a method called launch app launch app as a logic to launch the browser that's it next step after browser is open I have to say login. do login do login what it is doing if you go to login. do login method it will sleep the browser for some time because it has to wait once the application is loaded it has to wait for some time so that all the elements will be rendered once the application is rendered properly what is the element I see login page so how do I access my login page I can say by. name what is by do name your login component has a HTML element name with this identify with this go to here by. name what is the name of the thing username this needs to be converted into casted into element so that I can get element object do send keys send Keys is a method used to enter the data what is the data you want to enter Sur now first input username is entered with a value called Sur this is a value you guys have seen whenever I entered here something now if I make this as a John this becomes a John if you want to run NG E2 e now you will see John browser is entering data now you will see John John is being entered now come back so that means I will add one more input field then you will get an idea how to do that so one more input field if you want to add it here do some input field name text now go to the application here once do login right I would say by. name you can use ID also by. name first name if you want to enter the data you have to use element which is given by protactor so now you have to say element element is what it will give a method to send Keys then you can enter the value Smith or some launch the application once again ng2 it will compile the application it will launch the application and it will start the test cases this is the beauty of angularjs application the first name will enter with Smith John password email there is a delay for every enter because I have added delay like this after entering launching the application wait for 2 seconds after entering username wait for 3 seconds after entering password wait for 3 seconds after entering the email wait for 3 seconds click the button wait for some how do you click a button element by. button text go to the HTML Page look at the button button has a text called login so to access that there is a method called buy. button text login method and convert into element and you have a method called click when you click on that wait for one second now return element. login component. paragraph there is a text by. CSS I told you go to login component and see the paragraph tag what is a CSS it has alert success with this CSS also you can access the component by. CSS login component you have a paragraph tag you have one more paragraph then that is a problem but right now I have only one I have used and this entire thing I'm converting into element get a text that means the text entered in the green colored successful log will come here that is what I'm wring who is calling this du login the DU login will be called by this guy very first time so I'm expecting this do login will return a message called two equal to login successful then test cases it successfully executed now what we are going to do is that I will add a button in the login component this is what my login component now running the application on a production server so for this I need some engine anx till now we were building our application on a node server local machion to make an application operational in case of multiple request we need to deploy it on production server engine this is called engine engine what it does is that engine is a web server software that allows you to significantly reduce the page load time it's an open source software that provides a HTTP server capable mainly used for reverse proxying caching and load balancing why do we use the load balancing let's assume you have application developed millions of people are requesting your application millions of people are accessing your application when the number of requests coming to the same server obviously the number of threads are very less it reaches to the thread sizes so it will automatically the application server performance goes down because the load is more to avoid this we will have multiple servers installed and the load is being distributed to multiple servers using a concept called load balancing all these things but those things can be taken care by infrastructure team you don't need to involve but if company is very small maybe you are supposed to involve designed for maximum performance and stability all these are features of load balancing reverse proxy reverse proxy is something which runs behind the firewall to take the request and send it to the corresponding servers so use non-threaded and even driven architecture engine X follows non-threaded and even driven approach that means it doesn't depend much on threading Concepts to handle the request on all so wherever it request maybe internally it's like nodejs Concepts even driven programming architecture ofx engine X uses Master Slave architecture by supporting even driven a synchronous nonblocking model this is the same concept nodejs also follows even driven that means when something happens then only it gets Shinken otherwise that piece of code will not be get disted same way when the request comes then only that will be handled non-blocking what is blocking blocking means some CPU intensive tasks like you know I want to read some data from a database it's a blocking you got a request you does some manipulation you send the response back it is not non-blocking you got a request that has to run some job which involves some like 2 to 3 seconds delay it's a blocking it has to read some file it's a blocking like that Master Slave concept user makes a request request comes to workers thread worker server whatever and a proy caching mechanism cash loader cash manager it works on a master and slave that means you will have one server as a master others are workers that means you can do horizontal scaling here web server application server MIM cast and back end all these Concepts can be implemented same web processors worker processor accept the request and start processing the request whenever it request needs to be interacted with the master it will interact with the master and response will be sent H loader H manager now how to configure inine X you have to use firewalls all these things but I don't have all this setup with me go to this location configure all those things deploy your application and do that deploying application using Docker image why do we need to use a Docker what is a containerization we'll talk about problems before containers my application is working in laptop but not in a testing or production environment why you develop an application it works perfectly on your mission because you are a developer you know how to fix the versioning issues you know how to install the required perfect libraries on your you can spend time but when the application move to production environment or a testing environment you are not the responsible person you are responsible person only for application functionality not for dependencies or something who has to take care one you have to coordinate with the infrastructure team to make sure all the required dependencies are available in that particular server or not version number matching or those things maybe you will be testing your application on Windows box suddenly you will move your application to test environment which is running in a Linux BX so there are some issues with the versioning that is what they're talking about my application is working in my laptop but not in testing or production environment because of the runtime drip configuration drip or dependency drip it could be configuration issue it could be dependencies versions which I'm using it may not be suitable for Linux or production environment because production servers might be running on a Windows 7 or Windows 2000 application server whatever it could be so my laptop has version number 5.4 and Tes enironment has latest version of software or of angular or whatever it may production has old version for on premise we have version s so there are versioning differences how do we avoid this problem that's where your containerization came into picture how containers solve that issue it's like creating a virtual for you python nodejs all these people started creating a virtual environments containers are the solution to face this issues as it packs up the code and all its dependencies what it does is that when you use a containerization Concepts it packs Up application along with your dependencies single unit that it can run reliably from one competing environment to another competing environment so what are your are going to carry your code your configuration settings your dependencies your runtime environments also you carrying along with the shipment this can even be done by a virtual machion but virtual machion if you use it takes lot of memory because every virtual machion will have its own operating system running you have to maintain multiple operating system virtual machines takes up lot of resources as they have a full copy of operating system virtual copy of Hardware which adds up lot of ram CPU whereas in containers you just need to supporting program libraries and the runtime man you don't need to carry all those things guest operating system containers virtual machines will have host operating system hypervisor guest operating systems that means a virtual box can have all these things multiple with O and all applications running whereas containerization having only host operating system which will be running inside a container engine containerization is a separate training gkp all those things containerization Google provided kubernetes why Docker Dockers are used to develop an application using Docker containers with any language and any tool chain Dockers are something to run your applications which are sitting in a container multiple containers can put it on a Docker tool and can be run you build you ship you run the application anywhere at any time even in a cloud also that is the concept of Docker why Docker means develop an application using Docker containers Docker provides a containerization any language whether python Java nodejs angular application anything it can be supported ship the dockerized application and dependencies anywhere to qway teammates or the cloud without breaking anything you can ship all these things the applications which you are going to run scale to thousands of nodes move between data centers and Cloud update with zero downtime and more reliability you are going to have why because see you are not maintaining locally it is being managed by Dockers containerization Concepts multiple environments are supported what is Docker then the docker is a tool designed to build deploy and run the application with ease by using containers so this is the symbol of Docker you can use there are multiple Docker supported by in the market but Docker if you look at it each one is a container this can be nodejs application this can be Java application this can be net this can be python this can be angular but still you can bring them into one place and run it build ship run any software anywhere Docker allows a developer packaging of an application with all of the requirement such as libraries and other dependencies and ship it all in one package it ensures that your application works seamlessly in any environment development test or production environment terminologies in Docker what terminologies we have to use Docker first Docker file how do you install a Docker install Docker on Windows Mac whatever so here are the steps if you guys are using Windows you have to download the docker and install it for Mac for Windows download and start using it once the docker is ready you are supposed to login by creating a Docker account you can say Docker login Docker login sign into Docker hd.com now go to the application once the docker is installed you can create a Docker account then create a angular project create a Docker file Docker file contains a information the configuration what is a distribution package all those things Docker file is a basic building block of Docker containers Docker file is a file with a set of instructions and forms the base for any Docker image every time base image is going to be based upon another image you are going to pick up a base image and build your application on that image so we will take some base image and start building the application so what is an image so container image image base image kernel something image is readon file system that is used to a template to launch the container so our application when you build and create a Docker container it creates an image start from the base image that has your dependencies and your code custom when an image is turned into a container the docker engine takes that image and adds to read write file system on top of it you'll be running your application so we will see one example what is the docker content container Docker container is a package which everything required to make a software to run except the operating system hence making the application portable all you need to do is that libraries and settings to make software work on any system that means you are ready to ship a package which can run on any platform it makes the container efficient self-contain lightweight guarantees that the package software will always run regardless of whether it is Docker file Docker image the container Docker Hub as I said Docker Hub is a tool it's like a jit Hub where you put your images and check out your images you can also start the docker containers there Docker Hub is that pull push all those things you can log to web portal all those things can be done Docker commands Docker pull Docker create image Docker run Docker build Docker container Docker login docker push once you install the docker first you need to create a Docker account with that Docker login you have to provide a credentials from command line or you can use the tools also it will work so these are the commands it's like a GitHub repository guys end of the day we will create one project and show you Docker PS Docker kill all these are there now go to the application so this is the application we are going to see there is application built already check out that angular application convert into Docker container and run it in the docker so first of all jiub clone take out this step copy this open any terminal we are in February batch so here I'm going to keep that git clone it's like git clone somebody created a project you are using it so now once that is done you import the project clone project is happened even you can clone your project same like how I use it to share the link angular February the project name is this what is that as aone Willa app now get clone is done what is the next step NG build hyphen hyen product So when you say NG build it does building but you have to pass a parameter called dash dash build when you do this it does some minification when you do this so I have to go to Project location ason app NG build iph iph prod so you are saying that build theun npm install so see project is checked out but nodecore modules is not there so npm install is the command we need to run so it creates a nodecore modules folder and adds all the required dependencies no errors now I have run the command called npm install it is downloading the required dependencies into the project now you have a project with you the project should contain some Docker file Docker file is nothing but a set of instructions for your you to run your app application in a containerization I don't know how many of you heard about a containerization all these are called kind of you know extra stuff they have added containerization all those things but right now people are using up to cloud and all another step containerization where you want to run the virtual environment kind of things but not mandatory for you to complete your angular course it will be useful if your company is planning to do containerization it is useful otherwise normal angular application is good enough for you so you are done with this now go to the application and see it has a Docker file now if you want your application to create and add a Docker file please add it not a problem this is a basic file what it does it has a work from node 12.7 Alpine as a build some the node Andel working directory user SRC app copy package.json file run npm install this will be done on the docker not here copy do dot you're copying something from here to there run npm run build you're building something from engine X server they're using it these are the mirrors available already so now copy from build user srz app distribution distribution app it will create some distribution package and moving into nnx server that is what on the docker not on the local machine now go to here you saw this they're telling what is a Docker file and all now you have to create a Docker image see Docker build You're Building application hyph t AV app image space dot copy this statement if you go back to Eda they're clearly telling you all these commands Docker build same we are going to use that now go to terminal open it creating a Docker image for you it's building so there is a image created with the name called avf latest this is the do image name which just get created what is the next step if you want to see how many Docker images are there in your system can simply say Docker image LS AV app image latest created now go back Docker run I want to run my image AV app in a container called AV app container hyph D in a background mode with the port number 8080 locally the image name is avf image that means where are you going to this application you created a container right so Docker image run blah blah and so on now your application is ready that says there is already in use some application I have created it earlier so now once this step is executed on your mission now if you go to Local Host 8080 it's not coming up so I have to remove the application first AV up container is already there why don't we change the name AV app container new let's see done now go to Local Host 42 and see 8080 application running I'm able to see everything my application is up and running whatever they showed in the dashboard it is up and run so now your application is running so what is that image you need to look for Docker image iph LS so this image if you are able to take this it will work on any container Docker containers anything any environment you don't need to bother about it so that is what you need to understand Docker container if you want to see list of Docker containers how many containers are there in my machine two Docker container LS AV app image AV app container new that's what I have seen right just now so like that here is another question which file extension is typically used for an angular test files and the options are given on the screen if you know the correct answer please leave it in the comment section below with the solid foundation and testing we'll now compare Anglo versus react in this module you'll explore the differences similarities and use cases for each framework to help you make informed decisions in your future projects angular was developed by Google and its first release dates back to 2010 the first version of angular was also known as angularjs on the other hand react was developed by Facebook in the year 2013 so coming to towards the architecture of these Frameworks angular and react both are component based Frameworks but angular makes use of typescript and HTML whereas react which is a user interface Library makes use of JavaScript and jsx jsx is nothing but a syntax extension for JavaScript the latest version of angular that is angular 9 was released on the 7th of February 2020 one of the core features of this major release is the angular IV to know more about the angular IV you can check out the angular 9 video and blog from Eda whose link is mentioned in the description box below talking about react the latest major version of react is react version 16 the rendering process angular performs client side rendering however it can be rendered on the server site as well using nodejs on the other hand rendering is done on the server site in case of react websites built using these Frameworks YouTube as we all know is the world's largest video sharing platform owned by Google and this is built on angular another very popular online payments application website PayPal also runs on angular other popular websites that use angular are Walmart which is a multinational retail Corporation and gmail which as we all know is an email service platform I'm sure after listening to this many of you would have felt wow angular is amazing but let me tell you guys that react is nowhere behind Facebook is the developer of react and yes Facebook makes use of react as well other popular applications such as Instagram which is a photo sharing platform and WhatsApp which is a crossplatform messaging app Airbnb where you can book your stays for your vacation are also built on react so moving on towards the licensing of these two Frameworks both angular 9 and react 16 come under the MIT license MIT or the Massachusetts Institute of Technology license is an open source license sometimes it's also called as the BSD style license and it has minimal software redistribution requirements the domm or the document object model angular makes use of real Dom while react uses virtual Dom the real dor updates the entire tree structure for HTML tags it does not make much difference in a simple application but if you're dealing with a large amount of data requests on the same page it affects the performance as well as the user experience hence real dor actually offers low performance with complex and dynamic applications at times real dor becomes extremely difficult to handle because the whole tree data structure is updated even if a minor change has been made virual Dom on the other hand has its components attached this gives the comfort of navigation within a website virtual dor is also a node tree that lists out elements and their attributes as objects react's render function creates a notary out of the react components then it Updates this tree in response to the mutations in the data model caused by various actions done either by the user or by the system virtual dorm is not browser specific and it is lightweight it is provided in react package for free and eliminates the issues of slow performance of real dorm having said this I'm sure you would have understood that virtual domor is better than real domor data binding angular uses 2 data binding event binding and property binding in event data binding angular allows you to bind events along with the methods property binding of angular will allow you to pass data from the component class and set the value to given element at the user end property binding also allows you to control elements Property 2-way Data binding is a very important feature of angular with this angular allows you to make changes from the views to the models and from the models to the views react unlike angular allows one-way data binding here the UI elements can be changed only after changing the model State the developers however cannot alter the UI elements without updating the corresponding models a great advantage of using the one-way data binding is that throughout the application the data flows in a single Direction which gives you better control over it this makes our application more flexible and leads to increased efficiency so talking about the latest feature of angular 9 and react 16 angular 9 has a number of new features which are compilation of application with IV is default in angular 9 your angular 9 application is compiled ahead of time this means the angular's aot compiler will compile all the HTML and typescript present in your code into JavaScript before your browser downloads and runs it this conversion takes place during the buildt process itself and it also includes type checking angular 9 requires typescript 3.7 any lower versions are not supported TS lip or the typescript runtime library has also been made a pure dependency rather than a direct one earlier this library was installed automatically but now you will have to explicitly add this using npn or yarn react version 16 allows you to build great user experience models with concurrent mode and suspense concurrent mode is a feature that helps in binding apps faster with great user experiences that can help developers achieve their goals suspense is also a powerful tool for carefully organizing An Elegant loading sequence with a few well-defined states that progressively reveal the content the next very important feature is that react allows you to easily create Dynamic web applications and mobile applications react also provides support for custom Dom attributes instead of ignoring unrecognized HTML and SVG attributes react will now pass them through to the D this has the added benefit of allowing us to get rid of most of react's attribute white list and it helps in reduction of the size of the application react as I've already mentioned earlier has a single way data flow that offers a better and streamlined data overview in react version 16 there is an increase in productivity that helps in maintainance of the react project reusing components is the major advantage of react you can start with the usual components like checkbox button Etc once this is done you can move to wrapper components which is comprised of internal logic which makes it easier to manipulate and Define objects that are used this also ensures the consistency of application and facilitates the code maintainance react version 16 also provides better server side rendering and error handling in this version the server is completely Rewritten and it is very fast it also supports streamlining so you can start sending bytes to the client faster so now moving on towards the next comparison factor which is the speed and productivity talking in terms of angular earlier angular was heavier and a little slower compared to react but now thanks to the angular CLI that the app size of angular has been drastically reduced and offers enhanced development experience the angular CLI empires in creating a workspace and Designs functioning applications quickly it also imparts in producing components and services with on line commands angular CLI ensures the clean coding feature of typescript before I start the discussion over react let me just tell you what is reduxx rux is an open-source JavaScript library for managing the state of the application it is most commonly used with react for building user interfaces so coming towards react the development speed and productivity slightly get affected due to the involvement of thirdparty libraries like Redux however react is easier lighter and faster to code when it comes to small projects but for large projects typescript is preferable as it contains numerous features and components therefore angular has an edge overreact when it comes to speed and productivity deployment earlier it was complicated to deploy an angular app but now thanks to angular Firebase angular 9 has officially added support to Firebase and angular app and therefore angular apps are now easier to deploy to Firebase react as I've already mentioned earlier is lighter and the size of the application is smaller therefore it becomes easy to deploy the applications created using react these applications are usually deployed using nodejs the learning curve learning curve in angular is quite steep as angular provides numerous features options and components for react the learning curve is easy as as react is relatively small library and has fewer Concepts to learn when compared to angular and for those who want to learn web development quickly and the project requirement is not too large can go along with react so now coming towards something very important and interesting which is the market Trend the numbers that you see on the screen are taken from Tech Trends website according to Tech Trends there is a close competition in the job market for both these Frameworks however angular holds a slight upper hand overall moving on towards the final factor of comparison which is community support according to the 2019 stack Overflow survey it is clearly shown that react has stopped among the web Frameworks making react the most loved and supported framework by developers however angular is not far behind as it has good developer support by Google both these Frameworks have very good Community Support understanding the differences between angler and react we'll move on to develop an Ang application from scratch you'll apply everything learned to build a complete application from the ground up so if we talk about front end development framework so front-end development is all about the parts of the website that users see and it is also develop it is also referred as a CSS framework because just like we have bootstrap so in bootstrap we have predefined styling we have predefined functionalities that we can directly import into our application and then we can use it we can modify it as and when required so this makes it this make sure that we have a standard follow for the entire project that we are going to work on and angular as we know is maintained and developed by Google just like we have bootstrap so bootstrap is is maintained by Twitter and was developed by Twitter same way the react Library so react is not a full-fledged framework react is like a complete Library which is managed by Facebook and Google and this platform angular is basically maintained and developed by Google so it was developed by a community of individuals and corporations to address many of the challenges encountered in developing single page applications so the main aim is to simplify both the development and the testing of such applications by providing a framework for client side model or we can say say MVC like we have a model view controller and when we have model view view model mvvm architecture so if you talk about the entire base then base as we know has been used for JavaScript so JavaScript is a language of the web and if you know JavaScript we can talk to the browser like it is our best friend we can do anything we can do we can add any kind of functionality or interaction with any of the elements that we have specified on the page and angula is based on JavaScript and typescript which is basically a super set of JavaScript alog together and then it is mostly preferred for single page application so single page application is an application that works inside a browser and does not require page reloading during use for example all the social media platforms let's say Facebook now we can sit on Facebook and then we get can perform infinite scroll and even though a new whenever a new content is is available it gets pushed automatically without us needing to refresh or open up any other Pages same way when we are working on Google Maps again we don't have to do anything on Google Maps so Google Maps is also example for a single page application so the entire interaction is based on the map itself right the entire interaction is based on the map itself and that's how we start interacting it correct so again we have the entire map and again whatever address we want to go to for example let's say we want to go to suppose n again we can simply search for any any particular place of interest and then the entab background gets updated without refreshing or without going to any other page a simple example for a single page application in which we can interact with anything any component as as for the example we want to show see all the photos again even the photo section has been opened up in the same page without us navigating to multiple Pages correct and that exactly is what single page application is all about it simply allows us to interact or perform all the activ it allows the end users to perform all the activities without navigating to multiple pages and single page application for even for the websites it was popular back in 2015 but since it had some issues the SEO of the websites that's what that's what was one of the main reason it was not that much popular for the commercial websites because of negative impacts on the SEO so now if we talk about angular 9 so applications in angular line are IV complied by default so angular applications is compiled ahead of time that is the browser downloads and runs it that's why it is called as a client's side frame work is it's basically considered as a client side framework and angular 9 requires the typescript so it requires typescript version 3.7 and any lower versions are not supported by angular line so basically typescript if you have any queries and typescript is basically a programming language which is maintained by Microsoft and it is like a superscript and it simply adds the organic State as compared to JavaScript all right and the TS library is also a PE dependency rather than a direct one available in angular 9 so now if we talk about angular 8 IV so if you talk about the view engine the IV modified and IV compressed then angular's 9 compiling and rendering engine is referred as IV so once the inter application is completed again the ren ring engine used by angular that is what IV is so basically basically IV is smaller bundle size and is very helpful when it comes down to debugging and it provides faster comparation as compared to other engine for example if you talk about the view engine it takes almost 36 seconds whereas the same thing can be done in just 7.3 by IV medified and the and 2.7 by using IV compressed as a part of the content that we have defined as a part of the IV framework so apart from now basically now if you talk about a single use case then for example the simplest hello world program was about 36 KB which is quite a large bundle size for a simple hello world program right so the angular team decided that they will keep a threshold value of 10 KB and this was called as a cake threshold because the head of the team decided to give the team or the in the case they reduce the bundle size to below 10 KB that was the main idea behind naming it as a k size as or you can say k threshold so the team was successful in reducing the bundle size to nearly about 7.3 KB as you can see here and with the minified I version and something even better at 2.7 KB with the IP compressed version so earli it was 36 KB by default because again if you talk about simple hell World program there is two again for simple hell World program 36 KB is also a large size but the team was able and they were given a goal of reducing it to 10 KB and the team achieved 7.3 KB fori and 2.7 KB for the compressed version and if you talk about the advantages of using IV then then they are multiple again it simply makes sure that we have a smaller bundle size H it offers a large or it's a faster comparation as well next we have aot next we have angular aot so basically aot now as we discussed aot is basically used for faster compilation for example aot along with IV speeds up the creation of the applications all together right so it simply helps us in comparation of the HTML and typescript into JavaScript before the browser downloads and executed so basically if we talk about the aot again when we are using the aot the rendering becomes much faster and this is because the browser can download a pre-compiled version of the project and then it can load the executable code and this helps the application to render instantly without it having to compile the code first and the aot compiler will inline all the external HTML and CSS within the applications JavaScript which in turn eliminat the discrete aax request for these sourced files and when the application are already compiled then there is no need to download the angular compiler and this helps in reducing the size of the angular framework being downloaded as the compiler is half the size of angular itself and angular's aot compiler will help us in firing the template errors during the build process itself and reduction in injection attacks as the HTML templates are pre-compiled into JavaScript before they are rendered on the client side thereby providing a better security of the application as well so these things are again defined in aot so before we discuss over the project structure first of all let's discuss on typescript so typescript as we know is basically a super set of JavaScript which is designed and and still maintained by Microsoft and if you talk about the project setup or we can say a complete project structure so first of all we have to download angular now for working with angular first of all we can download the noj package in our system so for downloading the nodejs package we can refer to this link here called nodejs.org download and we will be able to download noj So So based on the environment can choose nodejs we can choose nodejs Ms install or zip package B basically on depending upon the platform we can download the package once we have installed it we can check now to check if we have properly installed nodejs or not we can open up the command prompt we can open up the command promt and then in the command prompt we can type in the let's do one thing let's increase the font size just to AV straight to your eyes now to check if we have no properly not so here we can simply check for the node version if node is currently installed we will be able to see the node version return to us so currently we have installed version 12.1 18.2 so once we have installed it now to install the angular so basically here we can start downloading the angular package that we can work with so here we can Define npm now basically in order to start working on the installation of angular so here we can use npm npm is basically like a node package manager and then we can use install and then from the global package we have a global and then we have a local package so from Global package we can download the angular CLI we have angular CA that we can specify here if angular is already installed then this is going to be to complete quickly if it is not then it is going to take a couple of minutes for to for install ation of the entire angular CLI from scratch so once the angular CA has been installed from the npm so we can directly use NG and then we can using the NG NG basically stands for angular and using the angular we can create a new app that is going to be deployed in the current folder that we are currently working on so as you can see this has been configured now to start creating a new application we can use NG as an angular and here we can Define new as a new application and let's say we name the application as suppose my app itself assemble my app so here a new folder by the name of my app is going to be created in this dietry with having all the angular setup done and then we can switch to this particular directory also when we are setting up the entire project we can choose what kind of Cs we want to use for example the Styles sheet we can use the the sasp stylesheet we can use a CSS we can stick to CSS for now so this is going to install all the required packages from angular and then we can switch to this directory so it may take a while for this entire package to be configured fully so let's wait for a second so as you can see now it has been configured so now if we want we can simply switch to my app so here we can switch to my app that we have currently created uh if you want to see the complete folder structure that has been created by angular let's navigate to this folder in our C drive we can go to the project structure now in here we can see my app folder has been created and in here the entire modeles for angular has been structured the ENT angular moduel has been currently structured here all right so now let's do one thing let's understand each and every component for node so we can have a better Clarity out of it so now we can do one thing let's open this up in any of the IDS if you want for example here once we are done with installation we can now to start the application no to start the application we can use and now we can switch to the dietry and then then we can use NG serve open NG serve open so this is going to open the angular package and then we can get started and now once we have served the application now we can see under Local Host on Port 42000 this entire angular application has been currently launched so as you can see the port 4,200 has been opened up in the local host and we can see the angular application has been defined now we can use any of the core editors to work on angular so we have so here if you want we can use Sublime Text we can also use Visual Studio code as well for starting a work on developing the code so visual studio code is basically like a code editor which is available for free by Microsoft so there is no licensing required here so if we have once we have installed it down we can open this up let's say we open this up system so here we can use Visual Studio code let's search for it so we can use any of the versions as part of the requirement so let's do one thing let's open up one dietry here so here we can click on open folder now let's do one thing let's open the folder of the project that we have configured so we can go to uh C drive uh users and a user we can navigate to the user and here we have my app so so we can open this up so currently if you talk about the my app then here we can see the entire folder structure has been currently opened up right so if we talk about the entire folder structure then we have my app and then we have source and other components defined here so first of all if we talk about the e2e folder first of all we can see we have something called as e2e folder so the E2 stands for end to endend testing and let me just highlight this part so this folder here called as e2e so e2e refers to end to end testing also known as the integration testing which provides a high level overview for the web application so the E2 folder consists of the specs and the configuration files and the e2e are powered by a testing Library called as protector and an E2 an e2e test Runner that can take scenario test and run them in the browser then we have node modules we have node modules folder so basically under node modules we can see all the npm packages that this application is currently H having we can see all the application that the entire node moduel has which we can use anytime when we want to refer them as a part of the project then we have Source folder so under source so basically Source consists of three subfolders we have the application we have application we have assets environment so basically and then they are multiple files including the ficon index and main.ts and then we have the application folder so under Source we have application so the application folder contains a component in which the logic and data is going to be defined the app component.ts which is available here for example here we have app and here we have app component.ts so basically this file contains let's just zoom out a bit so basically this file contains the typescript which is finds the logic for the apps root component name as app component Al together as you can see here and then we have app component. HTML so basically whatever we are seeing in the browser this is going to be saved as a part of app component HTML that means whatever we can see in the browser this my app again whatever we are seeing here this is all based on the HTML component that has been defined here for example say if we remove the entire HTML and if we Define okay only H1 suppose everything in center and under H1 here we Define welcome or welcome to Eda so if we save it we will be a if we come back to the application we will be able to see this welcome to Eda has been updated as part of the content that we had deployed currently using the angular framework and whatever changes we do here for example if we apply some HR lines here if as soon as we save it we can come back we can see the same change is going to be reflected here right so basically this contains the end HTML file that is going to be rendered and then we have CSS is also available like we have app component. CSS so if you want to apply any stying on any of the elements that we have referred in this HL folder then we can Define The Styling back in the CSS for example currently we have only one H1 element available in this particular page now let's say we want to make this H1 red in color so in app component. CSS here we can Define the H1 color it's like a stylesheet so let say we want to change the color to suppose red we can Define red as soon as we save it we can see the same change is going to be automatically reflected on the component that we have defined here as a part of ab component CSS and let's say if we want to integrate any other Frameworks for example let's say we are building the application on angular but we want to integrate the bootstrap CSS for example we have bootstrap framework now we want to apply the bootstrap styling on this application then we can do that easily by integrating the bootstrap CSS file as well now let's say we have defined the angular we have defined the angular setup and then we have defined the components as a part of app component. HTML now now if we are looking to import any of the components as a part of or if we are looking to integrate some third party framework into re into angular then we can also do that for example let's say we want to include bootstrap framework into angular now bootstrap is also one of the Frameworks correct so we can Define if we want to integrate bootstrap into angular then first of all we have to get the CDN so there are two ways either we can download the local files of for bootstrap framework and then we can integrate that or we can simply add the bootstrap as a part of the H file and then it is going to be rendered in the browser we can do both the activities so let's say if you want to integrate the bootstrap framework with angular then first of all we can get this CDN for bootstrap so here we can click on download bootstrap so either we can work with the local files or we can get the bootstrap CDN directly so we can copy the bootstrap framework and then we have to make sure that we are whenever we are defining see at the end we have to now once we have copied the bootstraps CDN then we have to come back to our project structure and in here we have to click on index.html so basically whatever we see in the browser that is basically the output of the index HTML and in here we have defined the app being the component that is going to be called here right as the app component. HTML which is being which is being rendered here so now if you want to use a bootstrap CDN so we have to navigate to index.html and just before closing the head tag we can enter the CDN that means the St sheet and the JS file that we have that you want to use as a part of the Frameworks so as we know bootstrap can be implemented by two ways either we can download the SCE files and then we can refer to the source files in the index document or we can or without downloading the files for bootstrap we can refer to the CDN link so just like we inate any third party images or files in the SM document we can integrate the bootstrap framework by using the CDN link and that's how we can enter them in the index or HL so once we are done we can save it and now if we come back to our own application we would be able to see the bootstrap styling has automatically been applied to the application here so as you can see the styling for the text has also been changed because we already have a predefined styling in H1 now let's say we want to insert some kind we want to inserts more elements then we can come back to app component. HTML let's say here we add another for example here we add a simple button for example here we can define a button by using button and let's say we want to define the button as get started we can close the button we can save it as you can see the this default button has been currently placed now let's say we want to use a styling of bootstrap now in bootstrap we have multiple predefined classes that we can refer and we can call it in any of the element that we are going to Define so that we can apply The Styling accordingly for example let's say we want to define a styling false buttons so here we can Define div class and now in bootstrap we already have a class defined for button and we know that in CSS we can integrate multiple classes together we can add multiple classes together let's say we want to call some bootstrap classes here so we can Define the class and we already have a class defined by the name of Button as suppose we want to use as button success so again these are the classes already defined in bootstrap so you can call this class once we save it if you come back we can see the styling has automatically been applied to this button as for the element what we defined under bootstrap right so let's say if we want to add more classes for example here we want to place a Jumbotron on propop so here we can use suppose a division and here we can Define division suppose first of all as row or as container as container Let's see we can remove the center pun component here so here we can open suppose div class as suppose container and then we can place div class here we can Define as row and here we can create a simple Jumbotron as well suppose here we can place a simple Jumbotron and then we can place the elements inside this jotron accordingly for example here we can have H1 here we can have a button also defined if we keep on saving here we can and we can see if we simply head refresh we will be able to see the elements will be will be called automatically and they are going to be saved as well as a part of the framework what whatever we have defined here for example currently we have defined this for single row correct now we want to add the stying further stying to this Jumbotron that we have called along with bootstrap then we can then here we can Define for example here we Define row and here we can Define complete class suppose as div class as call MD 12 for a full length class that we want to for for full you can see if you want to create a full division class and here we can use call md12 if you want to add stying to it we want to place everything in Center so we can place everything in Center as well in s jron we can use Center or suppose if you don't want to use C color as red so here we can define color as white as well and if you want to use suppose for Jumbotron that we are going to use here so here we have Define the class as Jumbotron now for Jumbotron we want to specify some kind of gradient as well for example here we want to add a gradient and here we can Define the background color as gradient suppose here we can Define the CSS so here we can Define background image and under image here we can define linear or suppose linear gradient or suppose we want to go from top to right or right to bottom so here we can Define the enter for example here we want to define linear gradient and then we want to Define from two right so here we can Define two right and we want to apply gradient from deep red or for example suppose here we want to Define multiple other other color groups for example let say here we want to go from not deep pink suppose here we want to go from hot pink to suppose dark purple suppose here we want to go from hot ping to suppose Indigo or dark violet for example hot ping to dark voilet then here we can define the color accordingly Dark Violet so now if you save this now same thing is going to be applicable on the image that we have currently defined so depending on the use case we can apply multiple styling to the CSS so again whatever we want to Define here same thing is going to be applicable on the CSS accordingly so whatever stying we can Define here we can integrate multiple other Frameworks we can Define the components that means in angular we can treat different components all together so here we can have different St defined for different components and then we can treat them accordingly so it all comes down to our own requirement how we want to develop the application and then get started on the application by using the framework so let's say if you want to create more app components here so here we can create a more app component and that has to be included as a part of app component.ts so let's say if people are have a different app component that we want to integrate here so here we can change the template URL to some different component and then we can have a different CSS also defined if you want to have a different app component also defined and we also going to discuss on the entire components as well it means how we can divide the application into the component section for example suppose if we talk about the components involved here so each and every area of the application can be divided into simple components for example we may have different components for example we have a different component for the menu we can have different components for each and every application as a part of the component structure that is followed by angular so we can have a root component and then we can have separate component let's say for browser we can create a separate component for the homepage and again in homepage let's suppose we have a slider then slider can be considered as a different component we have separate section for the gallery that we have Creed again that can be considered as a different component we want to have a different component for the review section that we have specified and that can be considered as a different component so depending upon the requirement we can choose different component accordingly having developed an application we'll now focus on improving form validation ux with angular this topic will enhance your skills in creating userfriendly and efficient form validation now guys what are angular forms now an angular form is typical HTML form with few extra features which is used to provide user input even from the view now it can be direct or indirect as well now like for example you're going to create your Google account you know I mean you're going to provide the information so you can either uh store those uh data either on the cloud or either on the own premises so you can just you know create that entire um you know I mean instances and you're going to get the entire information up over there now these are the three type of controls you can have which is uh form control which is required for each input field you're going to have a radio button you must have seen that selections like the radio button that you can choose so either it can be a radio button or either it can be you know a form group where um you know it it's just a group of form control objects wherein you have to work on a you know I mean the data that you're going to see on the screen now why we need validation in angular now for example guys if I will say that you must have loging to your Gmail account or something why exactly uh you need a validation on that the reason why we need validation because if I'm going to send a data to you I mean uh we need to have a way with the help of which we can be sure that you know I mean this data was accurate this data that we have received I mean it's right or not so we need a proper way so that is the reason we are going to validate with the help of validation uh it is going to help you to know that like whatever the data uh that you you have received is it as for the standard input like the standard value that you looking for like for example if I'm going to say that password is going to be entered for only 10 digits so with the validation is going to be checked and validated that it's going to be for 10 digits or not so that is a reason you need validation now this is a small example where you can see that you need a validation just to make sure that ASP security posture everything is working as expected like um you know I mean if you want to prevent a form from the changes if you want you know I mean to websites you know I mean from the data leaks so for all this kind of things you need a validation in the angular so that you are being you know protected from the applications now there are different type of validations that you can have now you can have a validations in forms like it's going to be either a template driven or it's going to be a reactive form so you're going to have validation in either of the forms so I mean either I can create a template uh you know a simple very simple template and at the same time you will be able to uh work on it and at the same time I mean if a template is not going to be required I can simply create a form and with the help of which I will be able to do the you know entire work I will be able to do that entire validation as well so wherein you are going to have um you know entire clarity now talking about validation form so here the entire end goal of this forms or I would say the entire end goal of this validation is just to make sure that everything is working as expected I mean nothing has been changed uh everything uh is working like whatever the kind of requirement that you're going to have everything is basically working as as expected so that exactly is the entire um you know end goal so wherein you want to make sure that uh like whatever the kind of uh changes that you have made all all such kind of things has been done and uh everything is working as as expected and nothing has been changed so far so that is the entire end goal now uh like you can see it's going to look like that where you're going to have a small form small interface you're going to make sure that I mean uh each and everything within the given environment it's exactly working as expected or not plus you going to have different type of uh forms uh so here in this case like you can have validate validating reactive form so whatever the kind of form that you're going to have the validation is going to be done automatically so you are going to have validation forms Plus at the same time you're going to have validated template driven forms so either of the form is going to be there the only major difference is that the validating is synchronous where the the other one is asynchronous Plus at the same time um you know your validating rating forms are basically dependent on the functions and the other one is majorly dependent on the directives in the case of temporate driven like here in this case you can see if you want to add a validation to template driven you can simply add the validation attributes like for example if my data type is going to be integer so it's it's going to tell you that you know if that is integer or not so template D is actually going to tell you that what the kind of input values that you have supplied I mean it's taking those values or not at the same time temporate R is also going to help you that um you know whatever the kind of uh different values that you have provided it's it's there or not like here in this case you can simply add the entries and it's going to issue the data as for the entries that you have provided where in the case of reactive form uh you can even change the fields and you are going to have a popup at below like for example here in this case you can see I mean you are going to have validation form which is coming at the end at the bottom so instead of adding the validated through attributes you are going to have it directly so either it can be a synchronus which is going to make the out there directly or it's going to be asynchronous now there's a third term which is a custom validator now instead of Performing validation on the entire thing you are just going to perform a validation on the custom thing like some of the you know Common components that you're going to have so instead of making validation on all the things you're just simply going to do a validation on few components here is another question which angular service is commonly used to handle form validation in reactive forms and the options are a form Builder B form service C form group and D form validator if you know the correct answer please leave it in the comment section below having covered form validation we'll take on practical project by developing a recipe book using angular this project will solidify your understanding by applying your skills in a real world scenario when I say angular when we make a complete application where exactly this angular fit in that application first all let's understand the structure of any application that you see around then you understand that where exactly we have to use angular I'll open one architecture design a simple very simple basic design now when we talk about any application guys whether it be small whether it be big flip cart Amazon Facebook or whatever application you are using whatever application you're working on or you're using right in the market every application will guys have four parts for sure what are those four part of the application the first is called as a front end of the application then we have a back end of the application then we have a database of the application and then you have server of the application front end backend database and server so whatever kind of application you pick every application will have minimum minimum four Parts it can be more than that it can be caching it can be databases and so many things when you design one architecture of the application but when I just talk about a one basic application structure every application have minimum four parts so how exactly this four part works okay let me just show you one simple example now on this website you see so many things right you see overview you see repositories you see projects you see packages you see this image some content some display part some organizations like that right you see so many things in front of you now what all things that you can see or what all things that you can interact with okay the things that you can see or the things that you can interact with all are the front end of the application guys okay the things that we can see or the things that I can interact with all are the front end of the application now when we that the front end of the application then when I'm jumping here I'll see some different data when I jump here I see some different data how this data is coming this data is particularly coming from your database okay this data is coming from the database so we understand one thing that the display part is basically our front end and the things where we can see is basically refer as a database means the data is present in a database and the display part is basically refer as our front end of the application now when we have something like that then what is a use of back end what I'll do is I'll go to database pick a data and display on the screen it's better option but is it possible directly no as of now there's no such framework in the market which can pick a data directly from the database and display it on the front end so to get the data from the database and to display on the front end you need one more layer between that and that layer is refer as the backend varas so in short we can say that when we are making any application every application will have minimum to minimum four parts frontend that display then you have your database that have a storage back end in terms of I say back end is something that's more like a business or logical part of the application the next thing that we have is our server what is that server so once that application is created now once that application is ready to use what you will do that application ultimately you have to display or make that application live so that you can consume it the ultimate goal is to make the application live so that we can consume it if that application is not live nobody can consume that application so at the end you have to make the application the way so that people can start consuming your application and the consumption part of the application is actually come from your server server is the one which help you to actually consume that application on the browser side okay Serv the one that give us in the way through which we can consume our application so in short the first part of the application is a display second is the business logic and third is your back end and fourth is your server so that is how guys a one application is constructed and consumed the next thing so what all things are there which involve the front end and back in a database the things that we can see can be constructed either through your say angular react or basic stml it can be done through simple angular or simple react or simple basic HTML JavaScript all of them can make a one front end of the it can be anything that you can use depending upon requirement you can use anything so all of them are particularly used for making a front end then when we talk about the back end back end can be your nodejs python Java Ruby it can be PHP it can be any language that can be used for the back end in a similar fashion database can be my SQL Oracle mongodb these are the databases that you can use so this is how that things are divided now when we talk about particularly angular to makeer on front end of the application I want to show you one thing guys let's see I Le one applic of angular Local Host 8085 now you see home product order music okay I'll open that in Safari that give a better understanding so open that application of safari let's create that and let's open one more website say GitHub itself now see this application on this application do you see I have a home product order music now when I'm jumping from home to product notice one thing page is not refreshing only the content take a time to load but ultimately my page is not refreshing anywhere so what exactly it mean this kind of application called single page application how they work behind the scene I'll show you now see this one if I click on this issue it open something when I click on pull request it opens something and when I click on the marketplace do you see the page refresh every time I click on a tab but in this case when I jump from home to product page is not refreshing page is not refreshing when I jump from home to product But ultimately when I'm switching in the other website it's changing my complete page also it's refreshing that page what exactly the angle doing here this kind of application are called as single page application how exactly they work behind the scene how single page application works behind the scene now to work on the single page application now what they do is we make one page called as our layout page okay what that layout page will do that layout page is my common page in this website this header and other part of my application can be a footer also this is the common layout this is something which is common to my page application right now we have other component like home is one component product is one component or is one component what is component component refer as guys one single page one each page is referred as one component each component have its own HTML have its own uh your logical part have its own CSS have its own UI content so in short we can say every page have its own content and these all page are actually referred as your single page these are all all one on one by one is one one single page and we can also refer as one single component each page refer as our one component okay now when we say each page referring as our one component for us then how exactly it work behind the scene now what happen when you click on home no the content of home will load in this area how exactly so basically in this case of the applications at once means when the initial the application loading at the time of the initial load the complete application get loaded means all the pages get loaded at the once now when you jump from one page to other page only the content is replacing everything is there but only the content is replacing and how it getting a data so in the real time it getting a data so it's it's say we think like when it take a lot of time the very big then take a lot of time to load right but it's not like that guys it's not like that when the application big it take a lot of time then what the reason that not take much time to load because obviously it will bigger application take a lot of time no why because the data that you see inside the application know is loading after the application loaded remember one thing the data that you see inside the application loads after the application Got Loaded only at the time of the loading only at time of loading what exactly load it just load the dummy empty structure rest everything that you see is particularly loading after the page load so that is the reason that these applications are not take much time to load because the content in the application loading later on only the Dom structure load or only the page load happen initially so this is how guys one application work for us in terms of our single page application when somebody click on home the content of home will load in this area when somebody click on about home will go back and about will load in this area when somebody click on about contact about go back and contact will load in this area it means every time the page load the content will keep on changing but the application remain same there okay and this is particularly refer as guys your single page application and one more important thing is when we write our angular code angular code is written inside a typescript typescript that stand for TS t dot all the file in angular will be dot TS file okay what is typescript actually typescript is a super set of JavaScript guys so in short what all things you do in the JavaScript same thing you can do in the typescript but typescript have some additional feature more than a JavaScript so that's how it become that typescript is a super set of JavaScript what all thing a JavaScript have typescript also have all those things only thing it has some extra function more than the JavaScript okay so angular is a frontend framework that help to build a single page application using typescript in short the brief description is it help to make a single page application and the structure it follow is a component based structure that's what it mean but you can Define it in any way and other thing about the angular is it is actually designed by the Google remember one thing anything that is launched by this kind of big companies they get more popular and they get a more Market the Reas what the reason for that see the point is simple when these company bring up anything they bring up a big Community with that that support these things so and in anything if the support is high obviously that language or that particular technology grow very fast the reason for that is because support of that particular thing is very high that is the reason they grow fast and they get a better we get a better opportunities also the other reason that for this is we get a better opportunity because the support of them is very high so anything that backed by the Google or a Facebook or a big company like Amazon and all they get a better understanding JavaScript is used when we talk about the angular one but when we talk about now angular two or the higher version of angular then I it's is talking about our typescript only so earlier it is working on JavaScript but now it work on the typescript only I just explain you the concept of single page application and yes it actually promote a single page application and with the help of this we can make a single page application with us now what is new in angular okay angular is coming up the new new version every time when it coming up with a new new version so the mindset of people is like every time we cannot go and change our code right that's the one mindset of everyone that we cannot go and change our code every day because because if the every time the new version we keep on coming up to what extent we keep on working in our code right so up to what extent we keep on changing our code that's bit difficult for us so idly for that reason I just want to clear one thing although angular coming up with a new new version but it doesn't mean that angular is uh more like that every time a new version come and every time that all things got changed not like that so what exactly happening whenever the angle is coming up with a new version no it's only trying to change their backend their maximum 90% of A change is on their back end side they are trying to make the thing in the way that it become easy for people to make it more faster more reliable so that is their focus so their main focus is they're focusing on the things to become more lighter and More in terms of your usable when it come to the angular side so their main focus is to make a an application more usable or more light in weight what is the new thing there are three new thing that come up in the angular this time one is called as guys IV rendering one is called as a beel engine and one is called as a differential load what is IV rendering the very first topic I'll tell you one thing after this IV rendering is going to introduce this is going to be a one of the again become a Right now the react has on the top of the market which is is trending but this is going to be a trending in a market very soon again once it come up with the next thing that is there IV rendering and these two topic called basil and differential loading IV is one of the engine that Google use for their Maxum products okay like your YouTube and all these are running on the IV rendering and when it come to the IV rendering obviously this IV rendering is going to enhance the application so much that it become easy for us to load and it is going to be very light in weight plus it is going to be in the way that you are trying to consume it in a way that it's quite useful for us at the end of the day so ultimately the application performance going to be increased once the IV rendering is going to reduce very soon in as of now in angular 8 this is right now still in the beta version means some people use it some people don't use it because they officially said that it's not full-fledged available it's going to be full-fledged available when exact L it is going to be in the next version of angular so right now it's not very much uh trending means not very much usable because it's not completely available to us it's going to be soon completely available to us in the next version of angular once it is available we can start using it to enable IV rendering in the packet in the TS config.js there's a one option you can say IV rendering true and one more in angular.js file there one option called IV rendering you can set it to True by default it's not enabl right now then differential loading so the basil engine what the basil engine is Google open-source software responsible for building most of our project under the name of basil basil is a powerful tool which keep the track of dependency between the packages and build Target the coolest Fe say feature of Basil is that it smart algorithm determine the build dependency so right now when the application build so that with the help of a BAS later on the build become smaller the size of the build again going to become smaller with the help of this basil engine so when the basil will introduce going soon soon so it become easy for us to run the application because the basil make my build smaller and when obviously the build is smaller so in at that time your application performance will be bit more better to load on the server side right now it's not very much uh although it's quite small right now but I told you know what exactly they're doing is every time they're coming up with a new new thing in terms of these kind of a structure every time they're coming up with a way that how they can make the application to load more faster they're not focusing on changing the code of the user they say the code will be same the application that build in angular 2 no same application can be used with angular 8 hardly few changes need to be done but majorly the changes which are happening is happening on the backand side of the application the next thing about the application is differential loading okay this is a very common issue that everybody must have faced that what is differential loading is suppose I want to make an application on the uh say for a chrome right sometime it's a very normal question problem in it we are building application of the Chrome and suddenly what happen that applications working on the Chrome but not working on the IE working on the Chrome but not working on Firefox working on Firefox but not working on Safari right so this kind of thing generally happen like one application that build with one thing is working on the one structure One browser perfectly but not working with other browser how exactly this thing work and how we can enhance this thing so basically when we say that things are working in the way that working on one browser but not on the other browser then in that case you have one thing called differential loading if you are asking me for giving me the uh say build of the you want to run it over the Firefox will make a build which is compatible for the Firefox similarly if you say that no you want to need a build for Firefox and chrome also when that we make a build for Chrome and Firefox when automatically going to run over the Firefox it going to pick that build and then when it going to run over the Chrome it is going to pick that build so in short it become in the way that we will tell that what exactly for what purpose you're trying to use it and according to that purpose the build will be created and that build build can be used for that particular usage so in short going forward it going to become in the way that a build will be created for that particular thing in that particular Manner and by this it become easy for us to say consume our applications in the different different browsers also okay so these are three new things although they are still in the beta version they're going to be coming soon in the angular and once they are launched this angular is going to be again one more next level in terms of the application development project setup how to set up one angular project in a system okay I'm going to set up one angular project in our system I'll show you what all step you have to follow and guys what all code or what all step I'm going to write here now in my folder I'll make one fresh folder by the name of webinar now all this code which I'm going to write I'm going to push that code to the git so those who actually want to get a code also what I'm going to write today you can get through a Git You just have to go and follow this repo by the name of Akash developer on this repo I have so many code not only for the angular it's for multiple language angular react node python SAS AWS gcp Java or python so many things I'm doing in my day-to-day job so basically if you just search angular by just name of angular itself you will find so many repository from where you can get the code like this now first of all let me tell you how exactly we can set up one application project in for angular I'm using a text editor by the name of Visual Studio code but it's not compulsory that which text edit editor you should use you can use any text editor of your choice as like Java or any other programming like net they no such constraint what Text Editor to choose because it's free in terms of using a text editor I'll make one extra file where I WR some step that you guys have to follow for building that application the very important thing about the angular framework to design is you must have noj in your system you do a star Mark noj must be installed in the system the very first thing how to install that just go to the browser and type download nodejs you just say nodejs no nodejs.org is a website on this website you will going to get that nodejs version and LTS version are the stable version as compared to the node uh means as compared to your other versions so always prefer to use the LTS versions okay whatever is the latest after that once the noj is with you the next thing that you should do is you need to install one package a global package you have to open your command prom if you're using a window system for a window people run command prompt as administrator means you'll find option say when you search a CMD know you'll find an option say run as administrator so run as administrator one command prompt after that in that command prompt you type a command and PM I minus G at theate angular SL CLI you type npmi minus G add that angular SL CLI what is that actually angular CLI is a particularly a one framework of angular with the help of this you can develop one angular application okay with the help of this you can start developing your angular application so you have angular CLI okay you now to install this package by the name of angular CLI now once your angular CLI is installed this for window people suppose you want to create any application no now whatever application you want to create for creating that application you have to navigate to this path means in whatever folder you want to get application using your command prompt navigate to that path we'll say navigate to the folder using CMD once you are in the folder where you want to generate application there type NG new app name NG new app name whatever application you want to generate once you define that that your application is application name you have defined after that the next thing that you have to do is go inside the application whatever application created go inside that you use CD and application name once you inside that just type npm start once you at npm start go to browser and type Local Host 4200 this is a default port number over which our application run so on this port number your application will start running so these step you have to follow that you have to create that application in this manner and the application start running so let me just show you how exactly you can do that let's do this for window people and for mac and Linux I'll tell you only a few thing will change for mac and Linux people we'll do each step one by one from math open your terminal open your terminal then use pseudo pseudo npm I minus G use a pseudo command with that and rest thing will be same whether it be Mac Linux or Unix Oru any system okay let's try that so I already have this Global package with me I'll start from this place so I'll go in the folder that is CD desktop webinar I'll write NG space new and the application name suppose my application name is first app any name it can be now it ask do you want angular routing I say yes and the CSS will be SAS normal CSS now what it will do guys one first app folder created and one application structure also created see First Step folder with application structure got created once it completed you it come out terminal once that completed then you can go inside the folder and start running the application there let it take one or two minute let get completed to worry about this okay it's done now we clear this go inside the application now CD first app there type npm start when you start this automatically this is going to compile the application and run for us this is how the project setup is done and it's success sucessfully compiled also now the next step is done go to the browser type Local Host 4200 so open the browser and type Local Host 4200 see the first app is running so application started generated and it's running also so this is how exactly you work on the application and this is how exactly application run and execute the next topic that we have in our topic category is so we talk about t script the super set of JavaScript strongly type object oriented compiled language it is designed by the endress at the Microsoft and the typescript is superet of JavaScript so in short we call a superet of JavaScript the reason for that is as I said that what all thing that JavaScript have typescript also have everything so before talking about integrating all these things let's first talk about a few major thing about our application let's first let me first talk about what are components are there in one angular application now we'll say building block of angular now what are the building blocks we have in the angular so with the building blocks that we have in that angular is there mainly six building block of angular okay in total we have six building block in angular what are those six block let's talk about that one is called as your component module then pipe then service then routing then directive one we have is our pipe component service routing and we have one more thing that is directive what are these things okay now first of all component what is component component ref each page refer as one comp I already told you so we can say that one component contain its own HTML own CSS so what component contain own HTML CSS and Logics so each page refer as one component and in each page one HTML CSS and the Logics okay so each single page refer as one component to you apart from that what is f we'll talk about mod later on P runtime data manipulation what does it mean okay let me go back do you see this price right now the price that you see is something very much in different manner mean the price that you see currently is like minus Al is not possible why it's happen idly ID to create the logic of that also but what exactly happening behind the scene let me tell you one thing so see the how the data is coming as I told you that there no way that angular can read a data from a database that's not possible then what exactly angular did angular actually getting a data from a database using the API now see this AP what the price here 19 and what the price you see in your application it's 9 what the price here it's 32 what price you see is 22 how exactly does we are asking the database owner to change the price no no in real time we don't ask a database owner to change our price the reason for that is if a database on suppose this same API okay if I'm using a same API at the multiple places same API might be used at the in our mobile application also in our web application also and you if you remember sometime it happen the sale is only on the web application sales are not on the mobile application right so how exactly we going to manage that thing that the sale is going only on the web application not on the mobile application how we can manage that so basically to achieve that functionality to manage that functionality we need to have what pipes pipe the name indicating runtime data manipulation so whatever data is coming to us we don't have to worry about that okay whatever data is coming to us we not worry about that data at our side also it's possible at our side that we can manipulate the data at on on our side so we don't have to ask uh a particular user or a database owner to do something for us we at our side will manipulate our data so this is basically called runtime data manipulation and this is actually achieve using your pipes services to connect with any third party or DB interaction I can do that using your services in one application any database interaction that is going to happen will happen through your services guys okay service are one that give us this functionality and with the help of service we can make it so in short we can say that service are the one with the help of which we do all our database interaction and here the concept there one Concept in angular called dependency injection what does the dependency injection mean dependency injection also refer same thing like what is the okay if you see one database what is a dependency of a database on angular because as database cannot talk to the application directly so now somehow we have to inject that data from the database into our application and that's where it come to the dependency injection okay that's where it come to the dependency injection when we have to insert a database from the external Source into our application next thing routing to manage jumping between the page to manage jumping between the page is actually handled through your routing so routing is a one that help to help us to jump between the multi one page to other page and that actually done through your routing then directive I now in New ver of angular directive is not much useful earlier directives are very useful directive is a small portion of a page suppose you have one table in the page okay now you want to make a table reusable means anyone can use that table so for doing that kind of structure to make it make it possible to use a data table from any place in any any component I can use that table so for that purpose particularly we use our directive to make a reusable thing but ultimately earlier when it was angular 1 no that time it was very much useful because at that time we we don't have a concept of proper angular as reusable angulars so on the other side you can say that your directive is a small portion of the page and this directive idly nowadays this directive can be use with the help of your just and just component itself so we don't need a directive now we talk about all these building blocks but what about module what does that module do module is something that help to achieve so as if in if you go in a school right if you go in a school we have a register in the school what that register contain that one common register in which all student names are there right by the help of which our office or our school know or anybody come to audit suppose anybody come to audit our school from that register they can check that what all who all students are there in which all classes are there means that's someone entry point that's more like a complete description of your students so basically module is where where we declare all things where we declare all things all things means your compon on your modules so in one application you can have multiple modules but there one one common module means one parent module and one parent component but you can have a component module pipe service routing directive in multiple numbers so what all things are there how we can get that we can get that actually by the help of your module we'll do all these declarations and with this declaration it become possible for us to consume that now let's start with the where the actually the application is written basically all the content that you're building know where exactly you're writing it there one folder call okay I have to give walk through of that folder overview of that application the next topic that we have is integration of CSS that I'll do and how exactly angular loads in that application of angular there are so many things that you have guys so there's so many folder do we have to work on all the folder idly not you don't have to work on all the folders in the application you have to work on some particular folder in the application as I said that in one application there's a one file called module we always have one file by the name of parent module and similarly we have one file by the name of parent component okay in one application we have one parent module and one parent component so module that you have this module that you have is one parent module here all the Declarations happen and you have one component that having a component name and title of with any content how the HTML is coming this is a place app component HTM is a place where all HTML is WR so I remove that and I write one H1 and say this is urea webinar I go back to the browser and check your page it said this is Eda webinar what does it mean it means that actually the content got changed now and we are able to see the webinar from the Eda right so we have one main file called app module where all the Declaration happen and we have one main file called app component where all the content that you're typing is written here now how EXA the application run so the very first file that execute in the application is angular.js ang . Json is the very first file guys that execute in one application the very first file when the compilation is happening right now I'm not talking about the browser I'm just talking about when the compilation is happening when anything is compiling at that point of time the first thing that load is your angular do Json now angular.js specify from where to because as a browser what the browser do browser have a thing that it always try to load the index.html but when we will let them load once my application compile after compilation only I let my angular to load the application okay so in short the very first file to compilation after angular.js is main.ts main.ts is something that load once the application is after angular.js this file load main.ts now as I said that in one application you can have more than one com module you can have more than one component so how application will be aware which is a main component to load and with the first component to load and which is a second component to load or which the first module to load or which the second module to load how it going to specify that to specify that the main.ts specify which module to load that is app module from app. module file so it went to SRC and go to the app. module so how it happened from angular do is very very important for interview I'm telling you main.ts now the main.ts will tell that you have to load something called as app. module. yes okay then app. module will load app which component to load we'll say app component then we actually go for and load the app component for us okay after the app module app component load app. component now once it load what it do actually it now load bind the content in the HTML app do this is basically bind so this are one name here right app. root it's connected in index.html there one thing called app. app python rout so by this way exactly your application is connected so this is the way guys that you have to work on the angular first of all you have the way is angular.js main.ts app module app component after that the whatever the output is there that output actually load inside the outut load inside the index.html so once this structure is loaded then let's go and talk more about our structure of application so how exactly I can start making one component the very first component that you have to load will you will load through one thing called as your app. comp. HTML now I have loaded one component there suppose okay now once my one component loaded now I want to load a next component means one is fine but now I want to load our next component how exactly I can do in the way that I can start loading my next component now to load our next component what you need to do is you need to start working on I'll make one more component here say I'll give a name as header. component.ts all the file will be having extension. TS file okay one component we can make a separate folder for that also I'll make one folder by the name of header in that I'll put header. component.ts one component have one TS file component. HTML one HTML file and one CSS file one component will have three things TS HTML and CSS okay TS HTML and the CSS these are the three thing that one component is going to have how exactly we have to start writing our code so very first thing that you have to start writing our code is you have to give three thing in one component okay one component have three things guys what are those three things the very first thing that one component is import what is this import refer to import means for making any component you need to import component from angular slash core this is the very first thing that you need to have in one component why we need it because this is something we tell the angular application what we are trying to build the very first thing that we need to have in the system is component then your next part is called as decorat at the rate component noral bracket curly bracket and at the end export that export class name of component I'll say header component like this now this part of a component will contain few things first of all it tell that what exactly your uh structure is going to look in terms of like first of all it tell us that okay this this is the component that you're building and in this component what is the name going to be the name of my component name in terms of it will tell that what exactly this application name is will be mean the component name will be by name of selector I'll say app Hyun say header any name you can give then you have to tell that what is a template which is connected with what is the HTML of this component we'll say template URL I'll say do slash header do component. HTM head. comp. HTML and then what does CSS attach we say style URLs these are way to attach a CSS we'll say do/ header do CSS dot so header dot component do CSS and the CSS will be in square bracket why to one HTML to one component only one HTML can attach remember one thing to one component only one HTML can attach whereas to one component multiple CSS styling can be multiple to one component only one HTML is going to attach guys okay so now now in my HTML I have to give the next thing how exactly we can make it that we can actually bind it with the htmls now in the HTML file you can pass anything in HML file you can pass anything how exactly we going to pass it let me show you so here suppose I write one simple H1 tag say header under that I'll give one HR tag horizontal line okay now you want to use it first of all take this component and declare where I told you everything need to declare in app here in the your declaration array declare that component which you want to use like this once your component is declared you have a name of component take this component go to your app component. HTML and above this anywhere above this I want to use it suppose I'll put like this if we go back to browser see header and you ready to the app see one component created and consumed now suppose I want to bring in Center so I'll go to my CSS I'll say H1 text align Center if you go back see text coming in Center this is how exactly you can start consuming your CSS there okay now next thing I want to show you that suppose we want use some external CSN in terms of our uh say suppose some bootstrap is there okay now from that bootstrap I want to use this bootstrap is all together One external CSS that we can consume to consume that in a bootstrap so first of all you go to you'll say uh bootstrap Navar bar suppose I want a nav bar in my application I'll say bootstrap Navar now how to use that they have three scripts take the okay what is a common file where should I add this and can be consumed anywhere so this is the index file here I'll add and I can consume it anywhere now I edit there right now I'll go back to my HTML so this is the Navar code I'll take this Navar code and go to my HTML here I'll paste this Navar code like this and here I have website name I'll say Ed now go back to browser guys see I start getting n far want to give a better color so say inverse see is your color you want to give a proper say margin go to index add this I'll say div class container this is a bootstrap class container app Pyon R go back check see we're getting application the better structures with the recipe book project complete we'll focus on styling an angular application with bootstrap you will learn Advanced Techniques for integrating bootstrap to enhance the visual appeal of your applications styling an angular application with bootstrap so let's understand what exactly is this bootstrap see when I say bootstrap okay bootstrap is an open source HTML CS and JavaScript framework which is used to create mobile first and the responsive websites so using this bootst strap you can easily create beautiful and the responsive websites by making use of its readily available layouts components utilities and so on so here when we talk about this angular bootstrap okay so there are actually two ways where you can embed the bootstrap into the angular so first method is bootstrap CDN that is the content delivery Network and the other method I would say is by the by the usage of npm that is node package manager or node packet manager now if I want to talk about how to use this bootstrap in CDN okay so when we talk about uh bootstrapping uh CDN so you can actually make the direct make use of bootstrap content delivery Network or the bootstrap CDN and this will actually can be used to deliver the cached version of the bootstraps compiled CSS and the JavaScript to your angular application now in order to access it you can refer to the official page of bootp CDN and you'll get the overall idea of the same so what you have to do is you just copy the link tag and paste it at the end of the head section of the index.html file and once that is done just copy the script tag and paste it at the beginning of the body section okay now that's the high level now once you have actually done that you can also copy these two script tags of jQuery and the paperjs and paste them in the bootstrap script tag and save the file and open the development server so you'll be able to notice that the bootstap will be easily embedded and the front hand and the even the font like if you if you're trying to change something it will be changed accordingly or any changes that you would mention so it will be changed accordingly okay so this is uh about using the npm now here uh when we talk about the npm okay so this is another way or the alternate way which you can use uh which you can use it to m the bootstrap functionality into your project in order to do this what you have to do is you have to open the uh command prompt that is npm install bootstrap jQuery proper save okay once you done that okay once that is done you'll be able to see that all the all the three packages along with the version will be present in this package.json file okay so here the CSS and JS must be loaded globally so that's one thing that you have to remember and for that we must specify the path within the angular Json file within the Styles and the scripts array now all the packages which you install so it will actually get downloaded to the node modules folder okay it will be downloaded to the node modules folder now if you open the node modules folder and yeah if you open this node module folder so you'll be like you can uh you can actually look for I think let's see if it is available over here if you generally open this node modules folder and uh you can also be able to look for this bootstrap jQuery and paper Okay so that's the overall idea team so here once you have found the path of these so you'll be able to you have to actually have to add it within this angular.js file okay it should be added in this angular.js file this is the screenshot okay where they have added with angular.js file so this is the overall idea on the same okay so this is the overall idea of working with the same now that you have the overall idea on this okay let me just give you a quick handson as how you can get started with bootst let's get started so when I say bootstrap okay bootstrap as I mentioned it's a powerful front end framework so when we talk about this bootst okay let me just give you a quick tutorial so in order to in order for you to get started so I'm just going to create a code which will be where I'll be creating a web page using my bootstrap okay so let's do one thing I'll create my first web page using my bootstrap now in order to create the same I'll open my code editor okay so I'll start by by creating a new file I'll call it as basic.html so I'm I'm creating a new file that is basic. HTML now here I'll start by writing something like this so first I'm going to mention my doc type as HTML then HTML I'll mention my language as English okay next I'll mention an head tag okay and under this head maybe I'm going to add some metadata I'll mention my CET as utf8 I'll add a name okay I'll mention my view part and I'll mention my content and maybe I'll just I'll copy paste the code team I think that will be a best one so here I've created a basic HTML file so once I've created this HTML file okay so I'll make this HTML file as a bootstrap template so in order to make this plain HTML file a bootstrap template so we just include the bootstrap CSS and the jss file using their C CDN links okay so what I'll do is I'll just uh show you how it would look like so so this is the overall uh code would look like see I have added uh the Javascript file at the bottom of the page right before closing my body tag okay so I've created like this now after adding this bootstrap CSS and the JS file to our HTML page we can actually begin to develop any responsive site or application within this bootst framework now here okay so we have got something called as integrity and the cross origin that we have got right now so so these uh integrity and cross Origins so they have been actually added to the CDN link to implement the sub resource Integrity which is also known as SRI so it's a security feature which will enable us to mitigate the risk of taxs originating from the compromise CDN and this will also ensure that the files your website actually fetches it could be from a CDN or anywhere so it has been delivered without the unexpected or malicious modifications okay so once that is done so I'm going to save this once I have saved this okay so in order to open this so I'll do one thing I'll just uh open this file right now so this is how uh file would look like okay so like that's a simple file okay where uh I've just created uh HTML file and this uh like I've just created a bootstap all right so this is how you can get started and and open and view the files and you can also right click and click on inspect okay so you have got you'll be able to see the overall uh working right here okay so in this way you can actually uh perform the activity okay now while working so we can also create the containers with bootstrap as well so when I say containers containers are the most basic layout element when we talk about in bootstap and this is generally required when we are using a grid system so containers I can say basically we use it to wrap the content with some padding okay and they're also used to align the content horizontally center of the page uh in case of fixb layout so when we are working with the containers okay bootstap provides three types of containers one is dot container which has the maximum width at each responsive break point and we've got the container fluid which has 100% width of all the breakpoints and we have got container breakpoint which has 100% width until this specified break point so these are the types of uh containers that we have got in bootstrap okay now like uh in order to create a responsive uh fix withth containers okay you can actually uh simply use the dot container class if you want to create a responsive fix width container so if I want to show you the same okay let me just show you I'm just going to add the file okay so I'll just execute see I've have created uh the uh responsive fix withth container right now okay so I have added the hiding and we are adding the paragraph of the text and we can also use the FL uh like if I right click and inspect it see like I've added the class as container okay so if want we can also use the container uh fluid uh container fluid as well so where we can uh like the at that time when I do that okay so at that time so it will be always be 100% uh like it will be fixed withd irrespective of devices or screen sizes okay and we can also add the borders and the containers as well so if I want to give you an example okay so this is a code where I'm actually adding the background and the borders to my containers so by default my container does not have any background color or border so in case if you want to apply your own style so you just have to Simply use the bootstap background color border utility classes okay bootstrap container uh border utility classes if you want to create or add the background color or border on them so in this example this is a container with dark background and white uh text color and this is a container that I'm creating with light background then this is the container with border so if I save it and execute it see that's how uh we can actually add the background and borders to the container okay so that's how easy it is to work with the containers in bootst stab and we also have something called as uh grid system see when I say grid system okay bootstrap grid system will actually provide an easy and a powerful way to create the responsive layouts of all the shapes and the sizes so that's how the bootstrap grid system uh would work so we can actually start working at and uh create two column layouts like we'll have some three column layouts so like you can use all those principles of the grid and you can also start working on the same okay so that's the overall introduction to bootstrap here is a quiz question how do you add bootstrap to an angular project using npm and the options are a enter add bootstrap B NG generate bootstrap C npm install bootstrap and D NG install bootstrap and if you know the correct answer please leave in the comment section below having styled your applications will tackle an angular 8 project from scratch this project will help you consolidate your knowledge by building a modern angular application so let's start working on guys let's set up our angular project so when I say set uping angular project the very first thing that you should do is you need to have a no CHS in your system the very first thing that you need to have is a no in your system now what I'm doing is guys I'm actually making one folder that's how exactly and the one I'm do know this is how exactly we go in our sessions also guys in our session will actually Teach You by writing in front of you instead of just copy pasting or using a ppts but our Focus will be that will write a code in front of you what I what I'm talking about I'll show you now I'll make one folder say webinar now in this folder I'm going to write the things in front of you to show that how exactly practically things are working now let's set up that angular project so I have created one folder I'm using a a text editor called Visual Studio code you can use any text editor of your choice I'll open this angular webinar I'm going to make one extra file here in this extra file particularly I'm going to write all the steps that you have to follow first of all we say setup react setup angular application angular application the very first thing that you should do to set up angular application is star star nodejs must be installed then you need to install one package that Global package okay what the package actually mean there's one thing called as npm npm that stand for node package manager what is that actually basically there's on website called npm go to that npm is a website that hold a huge number of the packages guys around around 11 lakh packages now it's 12 lakh and they keep on growing why it's growing because anybody can contribute to this like I have my own packages okay I have a package to create one Redux application one node application like that right so anybody can contribute to this development guys when anybody can contribute to this development so point is simple that you can actually you can actually use these packages do I mean it mean for learning angular I need to know 12 lakh packages not like that guys some packages are for angular some packages are for the node some packages are for the react likewise for every single language there are lot of packages okay so in short we can say that we have huge bunch of packages which are available from where you can use out of that we have to pick our specific packages now first of all to create the one application we need to install one package as a global package now what that package name is angular CLI how to install I'll tell you now for a window people what you need to do is first of all for window people then for mac and Linux also now for window people you need to install first of all run CMD command prompt as administrator if you go search CMD right click you'll find run as administrator so first of all you have to run your command prompt as administrator okay after running your command prompt as administrator then the next command you will type there is npmi minus GLE Global at the rate angular SL CLI command line interface so basically first of all you need to install this package as a global package what and the only one time is only one time step so once this is done okay once this is done next thing you will do is navigate to the folder using command promp using CMD navigate to the folder where you want to generate application I'll do this also in front of you don't worry after that next thing is type there NG space new application name like that what is NG NG stand for New Generation whenever we are using your uh say angular no we have a keyword called NG NG stand for angular and NG stand for New Generation okay NG stand for New Generation so this is what your angular mean this is how we generate it let's do it I already have this Global package installed guys I'll directly go to NG new and generate the application how I'll go inside this folder which I just created that is CD I'll clear this first of all I'll make it bit bigger and I'll say CD uh folder name is web right right now we'll write NG space new and I say first app any name you can give now what it is going to do it is going to generate one folder for us is going to generate one folder for us let it get do it asking just hit enter twice now see it's generating one application for us once this application got generated let get generate it takes some time to generate the application so now I'll show you in the meanwhile if you go back to see first app created and see so many folder generated what all these folders are basically we're going to explain you in detail in our session what these folders are actually but right now let me just use it okay so see generated now once this is Generation complete means once the application generation complete after generating The Next Step you'll do is go inside the application CD application name means go inside the application and then type there npm start and then in a browser go to local poost 4200 like that this is the way to start now see application generated let's go there CD first app and we'll write npm start let get started so it will compile the application once the compilation complete okay once the application compilation complete then after that it start we can start using this application so let get done compile successfully now let's go to Local Host 4200 browser and Local Host 4200 like this see guys your application set up and ready to use now next step once this is created how exactly it's running see in this application we have one SRC folder okay in this SRC folder you have one folder called app in this app folder you have one file called app. comp. HTML I'll just write H1 and say webinar by Eda okay just refresh our page see it's a webinar by Eda but by default the port number is 4200 but you can change the port number also now guys in one application there's six building block okay we talk about the windows let's talk about the Mac same thing only for Mac you need to install same way you navigate to the folder but with this you don't have to run a command from administrator it's simple open Terminal terminal and use sudo command sudo navigate using terminal the folder where you want to generate the application so it's same thing almost same way to generate in the any other platform also okay now how ex it the flow is going see for understanding the flow we need to know a building block of angular building block in total there are six building block of angular what are those six building block one is called as module one is component pipe services routing director these are the six building block of angular what are they component Module come back each page each page refer as one component okay p runtime data manipulation what does it mean okay just as example I have an API see I just application right let's open that application see what is the price of product right now there go to product price is 9.95 and 22 .99 right now this is the API actual data what was the price 19 and 32 but what we are displaying 9 and 22 how means in back from back end I'm getting 1919 and 32 but I'm displaying 9 and 22 how basically runtime data manipulate means we got the data from a database but we manipulate at at our own side that is called as guys runtime manipulation and that is done by the pipe now Services your all external interaction external interaction some people call them a dependency injection why because the data which is coming is coming from database and the point is simple as my application cannot talk to database it need to connect externally and for that external connection we need this services okay now routing all your all navigation is controlled by this so I'm jumping with one comp comp all these navigations are controlled by this okay and then we have directive a small portion of the page small functionality or portion of the page is refer as directive Okay small portion or your functionality is refer as your directive although nowadays we just use the inbu directive are uh say your uh major directives are not now used basically we use our own structural directives okay now next thing is module what is the last thing module all declaration guys all declaration what it mean because in one application you can have multiple component multiple pipes multiple number of one kind of things right so how one application know how many component how many pipe how many directive is difficult right so that is why as our father having all the information that what about my family right maximum all information about my family what you want to hide we can do that right but point is simple that as we have all the information about our uh family similarly there must be a one parent who know everything okay so that is how guys this is defined that is how the module is a one where we declare all these things next thing is let me show you how to make our own component so I make one folders a component one component we have one HTML file I'll say home dot component. HTML one CSS file one TS file TS stand for typescript TS now to make any component three structures are there one is called import one is called as decorator and one is called as export import the things that help to make for everything whether you make a say uh your uh pip have a different things to import directive different import routing different import module different import component different everything import different different things so for component you have to import one thing called as guys component and that is coming from at theate angular slore okay so second part is decorator what this do it will tell my component which is the HTML file I'll say template URL tell me telling me that this is the HTML file that you have to display that is home dot SL home dot component. HT ml or you can directly select that also to tell that what CSS you have to use we'll say style URLs in that style URLs again you have to say do slash home do component do CSS like that so basically you are telling that comp so one TS file is like one component you are telling your component that what is the file you have to use and what is a CSS file in one component you can have more than one CSS but for one component only one HTML because that's the main page so one component can have only one HTML attach whereas one component can have multiple CSS attached multiple comma comma comma like that and you say export class component name I'll say home component any name you can get okay now after that once this is generated then the next thing that you have to do is you have to declar it now home go to the module in that there one thing called declaration in that put this name of the component and import it now go to your main component that is app. HTML and call your component like this I'll say component okay you have to give a name to the component how you give a name to the component go to the component in this you have one thing called selector that's the name of comp say app hyph home you can give any name to that take it go to the app component and call like this now you are calling one component inside the other component I'll put an HR tag like a horizontal line between them in the HTML of this I'll make one H1 tag and I say this is heading like that if you go back to the browser you will see Locos 4200 this is heading and webinar by so both the things are loading okay now I want to add a CSS to that a lot of way one is CSS F already already have or suppose I want already CSS file I'll simply say H1 I say text align Center text align Center like that this text is going to come in the center of the page got it now for external CSS suppose I want the bootstrap first all I take a CDN of bootstrap bootstrap CDN okay means one link to use a bootstrap our page say bootstrap W3 school that's the best way to pick those things I'll just add the CSS link and after this I'm next thing which I'm going to cover is I'll show you how the flow of the application is going binding and the flow these three links are there I'll pick this links go back to the index.html page there I add these links now I'm going to the bootstrap there bootstrap is external CSS file how what I'll do is I'll make one tag div whose class is Jumbotron Jumbotron there C bootstrap class I'll make one H1 tag say angular app and I'll use one P tag say webinar bya webinar of angular by ad like that go back to browser see guys you see some colors some styling just do one thing they one main index file let's understand the flow so here I'll give D what is this file I'll explain in a while div class container because all the things are loading here container I'll put the main tag here called container see guys application want equal margin and some content also you want to some put more content I'll say lauram some like that and I'll add some more content so that it should look like a proper page wise more content go back CS so external CS so why I did in index. HTML what is this file okay let's understand the flow flow is like that when the application load this a default property of any web application that it load the index file on the browser the very first file that load is index.html in the browser but after compilation so how the compilation work guys there one file called angular do Json is very this is this topic is very important understand it well angular.js this is my main file here okay this file tell that which index file to pick which is the main file what kind of a compiler you are using which is a main CSS file all these things are mentioned in this file called angular.js the very first file that start compilation is angular.js angular.js tell you that go to main.ts main.ts so so from angular.js what all these file contain again that's a scope of our course main.ts main.ts tell that which the main module as I told one main module and other module that is app do module. DS and this main module load your main component that is app. component. HTML flow is like that angular.js then main.ts then app module and then app component this is how a complete flow of one application goes all the thing compiled and where it load the main file called index file all the content which is compiled is loading in this and I'll show you one thing if you check the view source of this page see you not find anything you're asking me how big application it is see all your things are compiled like this that's it you it compiled into your vendor polyfill and one bundle that's it that is why this is very fast so this is the flow so guys the two important topic what are the building blocks what they do and what is the flow of the application we say flow now I'll take next topic that is binding although angular support oneway binding what is one way and two I'll show you one way binding and two-way binding for the scope of this uh today's session we're going to talk about oneway data binding one we have three things data binding event binding property binding okay data event property and two-way what is that if somebody click I want do something it's a event binding if a normal data that's a data binding property like anchor tag have the href image tag have the SRC those are the property One Way binding means guys that you declare something in that TS file that is consumed in the HTML that's a One Way two-way means you are having something in the TS file that's consumed in HTML and from HTML it's going back in TS that's a two-way Bing I declare one variable here suppose I a title okay now a type of that thing I'll say it's a string and then the data so instead of writing this title here I'll pick this angular app and I'll paste that in the TS like this if I want to consume it take the variable name go to your HTML put a double curly bracket like this and variable name like this title that's it this is the oneway data binding you declare one variable here and you just use like this I go back see but this time it's data binded this guys one way data binding now guys I'll pick a last topic directive actually angular propos some INB directive directive for four if condition suppose you the if condition the directive called NG if for for Loop they have ng4 for the class they have NG class like that way they have the inbuild directive what this directive do as example suppose I have one of my component okay in this component I have some data I'll say products I'll take one array products is one array it has some data suppose it have this two or say three records now I want to display the three records on my page so if it's a array guys what you use to display all the values for Loop correct for Loop to display data now same for Loop we use using ng4 how okay I'll do one thing I'll go back to the HTML I'll make one table here out of this like jotron I'll make one div and make one table whose class is table now I'll make one t head that is a table heading and T body that's a table body they have the TR that is table row and we say star Ng four okay T table row let's let's leave it as up now we'll say th and what all things it have it have your name also code also and date also I want to show three things name code and date so I'll say name as my heading code and date if I go back to browser see name code date is coming let's fill the data you have TR now for data what you will repeat guys now what all thing you want to repeat like T table row will repeat we say star ng4 is equal to let prod of products basically you take your own variable this is and this is a variable that hold the data that is products is a variable that hold the data product is a variable actually not products you'll say let Pro of let where cons all these things we have to learn in the session guys now I'll say here TD we'll say data binding prodad do product name product code and release date product code and One release date so release date is coming from I just want to check the spelling of that go back to browser see guys all data is coming in one go as static data later on we're going to call through API in sessions tomorrow if new product got added you don't have to worry you will just add a new product like this that's it see new product is visible tomorrow product is removed from a database just remove it it will be removed so this is the beauty of the angular and this is how it work and that's all thing you have to do guys so on the higher level I hope you guys now in a state where you you can tell people what exactly angular is and what you are doing after completing the angular 8 project we'll discuss how to become an Ang developer you'll get insights into the skills practices and resources needed to pursue a successful career in angler development well the first question that pops up in your head is why should I become an angular developer let's speak about the job opportunities well there is a vast demand and opportunity for an angular developer all over the world here let's try and understand the opportunities in India firstly in India there are up to 12,000 or more job opportunities just listed as by LinkedIn or glass door and around 30,000 job opportunities or more in the US again there would be a lot more opportunities but here we've taken and considered only based on LinkedIn and glass store we can also see in indeed or even private job portals now there are again company websites for that matter where there will be many more job opportunities available now the next question will certainly be how are the pay scale and is it even worth becoming an angular developer don't worry about it we'll discuss here as listed by glass store an average angular developer will earn up to 5 lakh perom in India and this is just with basic knowledge on angular skill set and if he's in advanced developer then he can earn up to 8.5 lakh perom or even more depending on his years of experience now speaking of the US one can earn up to a $100,000 in a year with his basic knowledge on angular while more than $150,000 with an advanced knowledge with with that your most certain next question would be where can I apply well you can apply on LinkedIn glast store na if you're in India indeed for us indeed works even for India now speaking of companies hiring now we all have our goals of reaching some of the top notch companies well all the high-end companies such as IBM Accenture and infosis are hiring angular Developers if you're looking for a product based companies some of the companies such as xiaomi Adobe among many others higher angular developers with good skill set now with that let's go ahead and learn about what are the roles and responsibilities of an angular developer so firstly uh the primary responsibility of an angular developer is to work on client side applications so they basically provide a full featured UI service for both web applications and websites in fact angular developers are typically involved in the design of modules and components after which they combine these modules and components to create a functional program so they should have a great capability to design minimalist modern web applications using all the latest trends and Technologies now they should also be very good in documenting HTML CSS and JavaScript now if they have good creat ability and Technical decision making it would again come in handy while creating great projects like angular now if they have good research on any given product that will make a complex task to break down and work on it now if they have good coding capability and writing great codes that'll help in unit testing of an application in angular and if they have good coding capability for lightweight and and well optimized and high performance programming skills that will also be a great responsibility for an angular developer now here I've considered some of the job descriptions according to a website enlisted for each of the company here I've considered IBM well IBM has actually posted requirement for angular developer and the main programming languages that they're looking for is Javascript and typescript as I've discussed earlier and they also require a person who has good knowledge on angular 6 and above HTML and CSS and any related Frameworks is also helping as you can see every company basically asks for angular JavaScript HTML and CSS in main scale now this is another company called seens where they have postered a requirement for frontend developer in angular again their requirement is angular 2 plus JavaScript HTML and CSS now considering another company called M tree even though they have considered four to six years of experience in angular they still ask you on good knowledge on typescript HTML nodejs and angular now yet another company Accenture also asks for the same as you can see there is a common description here asked by each of the companies which means if you know really well in such cases there is a high possibility that you get hired as an angular developer now with that let's move on and learn what are the skills required to become an angular developer as we've already seen in the job descriptions by now you should already know that if you have great skills and knowledge on typescript languages like HTML CSS adding on JavaScript it is a good add-on to it now if you have good knowledge on Cross browser compatibility for coding that will also help you knowing rest apis and rest services offered by angular is an add-on to become a good angular developer along with that Technologies such as a jaxs document object module manipulation techniques such things will help you become a good angular developer also if you have good knowledge on typescript that is a big add-on and it is a must for angular developer with that the certain question is how do I become an angular developer now the first thing is make sure you're learning JavaScript learning JavaScript from Basics is very vital to become an angular developer the foundation is basically built on JavaScript now you can go ahead and learn first JavaScript or even the basics of HTML and then JavaScript that will help you next typescript as I've already mentioned angular is built on typescript and hence you have to learn typescript now also modern web applications are also hugely built in typescript and hence most of the companies ask you for typescript the third thing but the most vital thing is that teach yourself angular now learning as you learn for your examinations might not teach you well but learning as though you have been taught or teaching yourself might make you learn angular in a more appropriate and a clearer way the last thing is that join social media groups and communities joining such groups will make you keep updated on all the latest trending Technologies and you can also update yourself by knowing more about any language that you're learning and here if you're learning about angular I recommend join all the angular related groups on any of the social media platforms like Facebook LinkedIn Etc now next let's discuss about road map for angular developer so basically for becoming any particular developer one has to follow a particular road map here let's consider a building of a project as an angular developer so angular actually receives many future request from Google and any other open-source Community now at the same time the list of projects are many and hence with that comes the maintenance tasks like code refactoring potential performance improvements and many more along with this angula brings in together representative from developer relation product management and many more engineering prioritized as in the list the list is created by the angular owners now as a new project comes into the queue there is a regular position for them based on any particular relative performance priority now as this work is done the project will move up in the queue and hence the next project comes into the picture now they'll actually release project on completion and there will be a part of specific version based on the release schedule that has been followed in a semantic versioning program as given in the angular now for example if features are released in the next minor after their completion then the next major versions are being added if they are including the breaking changes now this is a road map that has been followed while an angular version is been created again this road map keeps changes company to company as you work in an organization the project road map is being followed by that particular organization ational skills now with that let's see where one can learn angular from we have a Blog written on angular while urea's blog does not just comprises of what is angular or any features of angular it has all the frequently asked questions by any particular angular developers who's just planning to become an angular developer to an wellestablished angular developer now if you wish to you can go through the blog which will help you come up with a great ideas and hence start becoming a well-developed angular developer there is also a certification for which you can find the link given in the description box below now this certification comprises of all the angular course where it is a fully structured course and hence you can go through it and get the certification of edura finally we'll prepare you for job interview interviews with angular interview questions and answers this module will cover common interview questions and provide you with answers and tips to help you succeed in landing your desired job the first question in beginner's level interview question is what is angular angular is a typescript based free and open-source web application framework led by the angular team at Google a component based framework for building scalable web applications it also integrates powerful features like declarative templates an endtoend tooling dependency injections and various other best practices that smoothens the development path next what is angular mainly used for angular is typically used for the development of single page application it provides a set of readyto use modules that simplify the development of single page applications not only this with features like built-in data streaming type safety and a modular CLI angular is regarded as a full fledged web framework next what is angular CLI angular CLI is a command line tool that enables us to add various components directives and services from the command line test cases and code can be added via the command line itself angular CLI is mandatory for creating angular applications angular is a structural framework used to create Dynamic web applications it also uses modules from nodejs whereas angular uses HTML as your template language and lets you extend HTML syntax to define the applications components clearly and compactly write a pictorial diagram of angular architecture now this is most asked question when you go for an aptitude round so make sure you practice this architectural diagram of angular several times the next thing is building blocks of angular angular is built using components modules directives decorators pipes data binding templates metadata Services dependency injection the next is what are templates in angular templates in angular are written with HTML that contains angular specific elements and attributes these templates are combined with information coming from the module and controller which are further rendered to provide the dynamic view to the user next what are the features of angular 11 the updated features goes like faster builds internet explorers are updated there is an improved logging and Reporting there is something called as automatic font inlining next we have component test harness and then updated language service preview the eighth question is what are the advantages of angular a few of the major advantages of angular is that it supports two-way data binding it follows MVC model view controller pattern architecture it supports static template and angular template you can add a custom directive it also supports restful Services validations are supported client and server communication is facilitated support of dependency injection has strong features like event handlers animation Etc next state some of the differences between angular 10 and angular 11 angular 10 uses typescript 3.9 while angular 11 has upgraded to typ script 4 angular 10 uses enabled es5 builds but angular 11 uses faster builds angular 10 has a default browser configuration while angular 11 upgraded to language service preview angular 10 converted pre I code and angular 11 uses automatic inlining of fonts typescript lint version 6 is been used by angular 10 but there is a migration to es lint in angular Le the next what is data binding so basically data binding is one of the most powerful and important features that allow you to define the communication between the component and document object model it basically specifies process of defining interactive applications without having to worry about pushing and pulling data between your view or template and even component in angular there are four forms of data binding string interpolation property binding event binding two-way data binding with that we'll step into intermediate level interview questions firstly we have explained the concept of scope hierarchy so the scope object in angular are organized into a hierarchy and are majorly used by View it contains a root scope which can further contain scope known as child Scopes one root scope can contain more than one child Scopes here each has its own scope thus the variables set by its view controller will remain hidden to other controllers now the scope hierarchy generally looks like root scope continued by other scope controllers until n number of controllers the second second we have what are angular modules all the angular applications are either modular or angular which means angular applications follow a modularity system known as NG modules now these are the containers which hold a cohesive block of code dedicated specifically to an application domain a workflow or some closely related set of capabilities are also included these modules generally contain components service providers and other code files whose scope is defined by the containing NG module with modules the code becomes more maintainable testable and readable also all the dependencies of your applications are generally defined in modules only the third question is what is subscribing in angular in angular subscribe function is basically a method on the observable type the observable type is a utility that asynchronously or synchronously streams data to a variety of components or services that have subscribed to the observable subscribe takes three methods as parameters which has each as functions first function is next for each item being emitted by the observable perform this function error is the next function if somewhere in the Stream an error is found do this method complete is the next thing once all the items are complete from the stream do this method the fourth question is describe different types of filters in angular now the various filters supported by angular are currency which formats a number to an accurate currency format date which formats a date to SP specific format filter which selects a subset of items from an array Json which formats an object to adjacent string limit it limits an array or string into a specific number of elements or characters lower case it formats a string to lower case number it formats a number to a string order by orders an array by an expression upper case it formats a Str string to uppercase the next question is what is dependency in angular dependency injection is a software pattern where the objects are passed as dependencies rather than hardcoding them within the component the concept of dependency injection comes in handy when you are trying to separate the logic of object creation to that of its consumption the config operation makes use of dependency injection that must be configured beforehand while the module gets loaded to retrieve the elements of the application with this feature a user can change dependencies as per his requirements next question we have differentiation between oneway binding and two-way binding in angular in oneway binding the view or the UI part does not update automatically when ever the data model changes you need to manually write custom code in order to update it every time the view changes whereas in two-way data binding the view or the user interface is updated implicitly as soon as the data model changes it is a synchronization process unlike oneway data binding now describing with diagram impresses the interviewer even better what is trans trans filing in angular transpiling in angular refers to the process of conversion of the source code from one program language to another in angular generally this conversion is done from typescript to JavaScript it is implicit and it happens internally the next question is list some of the tools for testing angular applications Karma angular mock mocha browsey conon are some of the tools that is used for testing angular applications the next thing is list the differences between jit or justtin time compilation and aot which is ahead of time compilation in Justus in time compilation the application compiles inside the browser during the runtime whereas in aot ahead of time compilation the application comp compiles during the build time some of the differences as as shown in the flowchart here have a look at it the next question is how to create a service in angular in angular a service is a substitutable object that is wired together using dependency injection a service is created by registering it in the module it is going to be executed within the module there are basically three ways in which you can create an angular service they are basically factory service and provider with that we'll jump into the last part of today's session which is advanced level interview questions here the first question we have is what do you understand by rest in angular rest stands for representational State transfer rest is an API or application Pro programming interface that acts as style that works on HTML request in this the requested URL pinpoints the data that needs to be processed further ahead an HTTP method then identifies the specific operation that needs to be performed on the requested data thus the apis which follows the approach are known as restful apis next question in angular describe how you will set get and clear cookies for using cookies in angular you need to include a angular module called NG cookies they are angular cookies.js for setting the cookies in a key value format put is the method used next to get cookies for retrieving the cookies get method is used for removing cookies remove method is used now if you follow the code procedure shown here you can proceed with it next question explain NG application or NG app directive in angular NG app directive is used to Define angular application which let us use autoboot strap in an angular application it represents the root element of an angular application and is generally declared near HTML tag or body tag any number of NG app directives can be defined within an HTML document but just a single angular application can be officially bootstrapped implicitly rest of the application must be manually bootstrapped here is the code to follow the procedure next what is the process of inserting an embeded view from a prepared temp ref or template reference now template reference is a variable make sure you follow this code it's most frequently asked in advanced level interviews next question what is property binding and why is it important in angular Lev in angular one of the ways to pass down values from a component to its template with a set value is through property binding it is a great example of a one-way data binding technique used to transfer data one of the great things about property binding is the control you get over your template elements from the component itself angular finds great ways to give developers full control of the tools they work with and this is a prime example of that the developer can dedicate how data flows and gets updated with his own Logic on any Dom element without restrictions there are two bindings which is shown here property binding is one of them next what are angular Global apis angular Global AP API is a combination of global JavaScript functions for performing various common tasks like comparing objects iterating objects converting objects there are some common angular Global API functions like angular lowercase which converts a string to lowercase string angular uppercase which converts string to uppercase string angular E string which returns true if the current reference is a string angular is number which returns true if the current reference is a number next question is what is eager and lazy loading the feature modules can be loaded either eagerly or lazily or even pre-loaded when the application starts eager loading is basically when you have to load a feature module eagerly we need to import it into an application module using Imports metadata of Ng module decorator Eagle loading is useful in small size applications in Eagle loading all feature modules will be loaded before the application starts hence the subsequent request to the application will be faster while in lazy loading to load a feature module lazily we need to load it using load children property in root configuration that feature module must not be imported in the application module lazy loading is useful when the application size is growing in lazy loading feature modules will be loaded on demand and hence application start will be faster next question what do you understand by constants in angular in angular constants are like the services which are used to define the global data constants are declared using the keyword constant they are created using constant dependency and can be injected anywhere in controller or services next question what is bootstrapping in angular bootstrapping in angular is nothing but initializing or starting the angular application angular supports automatic and manual bootstrapping when it comes to automatic it is done by adding the NG app directive to the root of the application typically on the tag or tag if you want to add angular bootstrap in your application automatically when angular finds n app director it loads the module associated with it and then compiles to Dom manual bootstrapping manual bootstrapping provides you more control on how and when to initialize your angular application it is useful where you want to perform any other operation before angular wakes up and compil the whole page with that let's look into the final question of today's session how can you hide an HTML element with a button click in angular an HTML element can be easily hidden using the NG High directive in conjunction along with the controller to hide an HTML element on button click it's done as View and controller view goes into the HTML file of your component while controller goes into the typescript file of your component with that we have come to the end of the session I hope this video was useful and until we meet again next time happy learning I hope you have enjoyed listening to this video please be kind enough to like it and you can comment any of your doubts and queries and we will reply them at the earliest do look out for more videos in our playlist And subscribe to Eddie Rea channel to learn more happy learning e