Angular Crash Course!

1. 0101What is Angular: What is angular? Angular is a framework for building dynamic single page applications. Obviously, if you're a beginner, this definition may not be making complete sense. So to make sense out of this definition, let us start off by understanding how a simple web application works. Let's say that you have visited an e commerce website and you've entered this oral shop.com slash ElectronC maybe you just clicked the link. The browser would then send the request to the server requesting for list of electronic items. The server would process the request and then it might query the database requesting for list of records, which in this case are electronics. Once retrieved, it would send back the response back to the client or the browser. Now, back in the days, we used to use technologies like php, asp.net, RubonRails or jango to dynamically generate the STML and send it back to the client or the browser. So this STML have the data that is wrapped with necessary STML or presentation logic so that it can be rendered on the browser. But there are a lot of problems with this approach. Can you pause the video and try to make a guess? First of all, we will have issues with the performance because generating dynamic STML is very resource intensive, and if there is a huge amount of traffic coming to the server, it's going to demand a lot of resources, impact the performance, increase the cost, and eventually it might impact the user experience as well because web pages might be rendering very slow. There might be some latency. Other issue we can think of is complexity of the code base. The back end developers have to write code to generate STML dynamically, and this will increase the complexity of the code base and so the maintainability of the code base as well. Also, the back end developers need to learn front end technologies as well to do their job. Thirdly, and most importantly, there would be compatibility issues. Now, TML can be understood by a browser, but what if the client is a mobile application? Or what if some other application wants to read the data? Well, if an application is requesting for data, we cannot send them HTML. They have to do that additional work of removing all the presentation part, remove all the TML tags, and extract the data, which is not practical at all. So do we have a solution to this problem? Well, how about we just send the data and let the client handle the presentation part? Would that solve the problem? Let's take a look. So instead of sending STML, we would now send JSON. If you're wondering what is JSON, it is just simply data in a standardized format that every other client are willing to understand. For example, if we are requesting for a list of electronics, then the JSON response from the server might look something like this, and all the clients are equipped to understand that. For example, mobile app developers might write some code, which will pass through this JSON and extract the data that they need. Similarly, some other application can use some existing libraries to easily read the data from the JSON response. And nowadays, all these oversight technologies like Java, jango, PHP, node JS, which is very popular choice these days are only sending JSON data, and they're not bothered about tamically generating or including presentation logic in the response. But we have a problem here. This JSON can be read by mobile app or some other application or some other client. But what about browsers? We cannot just right away show this JSON data on the browser and expect the user to have a very good experience. They want to see the data in a visually pleasing manner, and they want to be able to interact with the application with links, buttons, forms, et cetera. So we still need to have HTML, CSS, and JavaScript somewhere so that we can accomplish that. How do we accomplish that? Let's take a look. So let's say that the user has visited shop.com. The moment the customer visits that site, the browser would send the request to the server requesting for Index SML file. This time, the server would respond back with all the TML CSS and JavaScript files that you ever need. And for all these subsequent requests, it's only going to respond back with just the data in the JSON format. When you visit a traditional website, every time you click a link or go to a particular page, the browser reloads the entire page, sending a request to the server and getting a new TML page in response. However, in this case, the browser loads the entire application structure, HTML, CSS, JavaScript, everything just once. After that, when you click on a link or navigate through the pages, the page doesn't reload. Instead, the application dynamically updates the content using JavaScript. It dynamically updates the JSON content or data using the JavaScript, which is already present. So essentially, it acts like a single page application. Just like you have a mobile app running on Android, you're going to have this application built using TML, CSS and JavaScript on a browser. And just like your mobile app doesn't need a reload every time you interact with it. Even this doesn't require the page reload every time the customer interacts with the application on the browser. Some of the examples of single page applications are Facebook, LinkedIn, Twitter, and there are many other. Instagram is also a single page application. As you scroll through the post, you're not going to see the page getting reloaded. That's because it is working in this model. The first time you visit facebook.com, it has already downloaded all the required TML CSS and JavaScript. And for all the subsequent requests, server is only responding back with the data in JSON format, and it is being populated on various components using JavaScript. The real question is, how are we going to build these HTML CSS and JavaScript? Are we going to literally use SML CSS and JavaScript to build these applications? It doesn't make sense. It's going to take unimaginable amount of effort, time, and energy, and it is just impossible. That's where angular comes into picture. Angular is a framework. What is the framework is just a bunch of libraries or pre written code, which will make the life of developer easy so that they don't have to write TML CSS and JavaScript from scratch. We use angular for building these dynamic single page applications. If you want to build a car, it doesn't make sense for you to build each and every component from scratch. You want to get components from various vendors and assemble them in a manner that you like. Similarly, you're going to use angular framework to build the applications as you desire. Hope it makes sense. I'll see you next. 2. 0102 NodeJS vs Angular: Really important to understand the difference between angular and node J, because we often think of nodejs as something that goes on server side and angular is something that goes on client side. However, we need nodejs to be able to build or develop angular applications. In fact, be it any sort of JavaScript application like nodejs react, or even view JS. We need nodejs to be able to build or develop those applications. So let us try to understand the role of node JS in angular development. Angler is something that goes on client side, which means it's a JavaScript application that runs on Browser. On the other hand, nodejs runs on the server, and both NodeJS and angler are JavaScript applications, and they do need JavaScript runtime to be able to run themselves. For angler applications, we have browser which executes JavaScript. However, for node js, we have nodejs runtime so that we can deploy our application on that environment, and then it can start serving the request. Now, so far, nodejs doesn't have any kind of role in angular. We don't need nodejs to be able to run angular applications. Browser is already doing that job. However, to build angular applications, we do need nodejs. To understand this better, let us take a look at how nodejs application is actually developed and deployed. So first of all, you have to install nodejs on your local machine, and then typically you tend to run these commands. Now, these are not exclusive list of commands, but just to give you an idea, I'm going to show a few commands which we might execute while developing nodejs applications. First of all, after installing node JS, you might on this command NPM in it, which will initialize the project and introduce the package dot js on file with some basic information. So it might basically ask you to enter the project name description, so on and so forth. After that, you might also install Express. Installing Express is pretty much a standard nowadays because it comes with some prewritten code and libraries, which we can straightaway use. For example, it makes it easy for us to introduce routing, request handling, responses, et cetera. And you might also install typescript. This is also pretty much a standard practice to use typescript instead of raw JavaScript because typescript is kind of like an evolved version of JavaScript. It will make our job a lot easier. So once you install typescript, you would then start writing the code, and after that, you'd have to translate those typescript files into equivalent Javascript files so that the nodejs enroment or nodejs Javascript, runtime enrollment can actually execute it. So once you do that, you might actually test things out with NPM start. And once you're good with everything, you will deploy that application onto the production server, and then it can start solving the request. Coming to angular, though, we cannot use these nod Just commands because the way the angle projects are handled is a little bit different from the way the nod Jz projects are handled. For example, the project structure is going to differ in case of angular. So to run anglo specific commands, we need another tool called angular CLI. We need to have it installed on our local machine. And the way we're going to install it is by running NPM command. So all these commands that start with NPM are nodejs specific commands. To install angular CLI, we need to first have node JS installed. Only then can we actually run this command. In fact, angular CLI itself was written using JavaScript, and it does need some JavaScript JavaScript runtime to be able to run itself. And once again, that enrollment is node JS. So even for developing angular applications, we have to first install Node js on our local computer. Then we're going to go ahead and install angular CLI, which will allow us to execute some anglo specific commands. After you install angular CLI, you can then execute anglo specific commands. For example, engine U, and then you're going to mention the project name, it will create a basic project structure with all the basic packages and libraries we need to start developing angular applications. Can technically do all this without installing Anglo CLI, but that's very paintaking process. That's why we have anglo CLI to make our job easy. It is going to do a lot of heavy lifting for us. And then you might actually start writing code in typescript, and then you're going to serve the application to test things out, and then you will eventually build the application, which will essentially translate all those typescript files into equivalent JavaScript because that's what browsers would understand. And then you're going to keep it somewhere on the server. Whenever somebody visits your site, the server would send back all those files and loads them on the browser. Now the key thing to understand here is that in case of nodejs, we need nodejs not just to develop or build the application, but also to actually run the application on the server side. Whereas in case of angler, we're going to need node J for building or for developing the angular application, but we do not really need it for running the angular application in production because we have browser which is doing that job. Hope it makes sense. I'll see you next. 3. 0103 Setting Up the Development Environment: Setting up the development enrollment for angular is very straightforward. It involves these three steps. First of all, we're going to install Node js, and then we're going to use nodejs command to install angular CLI so that we can start running the anglo specific commands. And then we need some source code editor, a robust tool that will help us write, build and debug the code more efficiently compared to a standard notepad. Visual Studio code does that job. Let's see how all these are done. So this is the official homepage of nodjs isndjs.org, and we can already see the download option. If you click on it, it's going to download the Installer, and then you can install NodeJS, just as you would install any other software. It's very straightforward. However, if you want to have better control on how you want to download, you can go to the Download tab and then here we can install and set up node JS using a package manager, or we can use a prebuilt installer like the one we've just seen, or we can just simply download the binaries and install manually. And if you want, we can also download the source code. This straightforward approach is, of course, to use a pre built installer. You would get to choose the version you want to download and the operating system. But if you want to change the version, we can do that. If you're working for a corporate company, then it's recommended that you choose one of the LTS versions. LTS stands for long term support. So all the versions that are labeled as LTS will receive support and maintenance from No Jess community for several years after its release. So these are more stable releases, but for learning purposes, we can go with the latest and the greatest version. I'm going to choose the most latest version and click on Download. I've already downloaded it and it's there on my desktop. But if you want to get more adventurous, we can go with the package manager option, and by default, it has chosen F&M stands for fast Node Manager. So if you want to use fast Node Manager to install Node JS, then all you need to do is to run all these commands on Windows command line tool or by using PowerShell. But before you run these commands, you need to have the Windows package manager installed or Wind get. You can easily get it from Windows Store. Once you install Windows Package Manager, you can then run all these commands to install fast Node Manager, and then configurate nroment then finally download Node JS. If you're a beginner, just go with the installer. You don't have to follow this approach. But you might be wondering why do we want to use package manager compared to just installing node JS using an installer? Well, F&M will give us some flexibility of switching between different node versions. For example, if you're testing for compatibility and you want to test it on a different version of node JS, F&M will make it very easy. Just by running a couple of commands, we can switch to a different node version. It will basically save us from having to uninstall and reinstall a different version of node JS. But if you're a beginner, chances are that you don't want to do anything like that. Just download installer and install Node js. We also have a bunch of other options here. If you want to install Node JS on a Docker container, then these are all the list of commands we need to run and this would install Node JS. Once you have the installer downloaded, just double click on it. Leave everything to their default, accept the license, and finish the installation. Hit finish. Once installed to verify our installation, let us launch Partial or Windows command line with administrator privileges. It's really important that you launch your Poial with administrative privileges. If you press Shift key and right click on the screen, you might see the option to launch Pill, but this is not with administrator privileges. So we're going to click on Windows key and then search for PowerShell. Right click on it, click on Run as administrator. So this has opened the Windows power shell. Let us verify if our node JS is installed. I'm going to say node hyphen B, B for version, and it has displayed the version. And similarly, I'm also going to check for NPM stands for node package manager. It is using this tool we're going to install all the packages we need in our project. Now, this command has failed because by default, for security reasons, powershell will not allow us to run any scripts. To fix this, we have to change our execution policy. Let us first find out the execution policy. And it is currently set to restricted. We're going to change that to unrestricted so that we can run scripts using partial. I'm going to say yes by typing Y. Let's clear the screen and try to run the command once again. And it has displayed. The next thing we're going to do is to install angular CLI, and the command for that is we're going to use node package manager to install angular CLI with a global option. With hyphen G option, we are saying that we want to install angular CLI globally so that we can run the angular commands from any directory. If we don't set this to global, then angular CLI is only limited to the current directory. If you want to install any packages that are limited to one particular project, then we don't want to use the hyphen G option. We can keep them local. However, we want angular CLI to be available for all the projects across all the directories. So we want to set this to global with this option hyphen G. And then we're going to specify angular CLI. This should install anglo CLI, and it's going to take some time. Now, let's verify if anglo CLI is installed by running angular command. That's NG hyphen hyphen version. And it has displayed the version, which means we have successfully installed Angular CLI. Next, we're going to install Visual Studio Code, and this is the official website for Visual Studio Code. This is very straightforward. All you have to do is to download the installer and then install it. Once done, this is how the Visual Studio code should look like. Hope it makes sense. I'll see you next. 4. 0104 Components In Angular: So what are components in angulo? Let's take a look. Imagine that this is your Facebook page. Now, this page is comprising of multiple blocks, or for the time being, let's call them UI components. For example, we might be having a component called photos that would display your photos, and then you might be having a component called A, which talks about you. And then we might have another component called pose that would display your pose. We can also have components inside another component. For example, the post component might be comprising of couple of components called create post and display post. Create post would allow you to create a post, and display post will just display the latest post, and display pose would be dynamically updated as we scroll through the page. That means as we scroll through the page, we're going to see new post getting populated, and all these components might be residing in a master component. Now, I have a question for you. What does it take to build these components? Let's take Display pose component, for example. What does it take to build that component? I'll give you a clue. We need HTML because that's what browser understands. Otherwise, we wouldn't be seeing anything on the browser. What else do we need? Styling, of course, we need CSS or something similar to make it visually appealing. And then we also need data, which often gets fetched from the server. And then we also need the logic or the code that would give some intelligence to the component. For example, user might want to interact with the component by hitting the like button or the user might want to submit a comment. Whenever the user enters the text and clicks on submit or add comment, the underlying logic or the code would get executed so that that comment would be added in the post. The combination of all these, the view which is TML and CSS, data and logic is what is angular component. An angular component would be comprising of all these so that when we run our application, we're going to see these components getting loaded. The best way to understand angular component is by taking a look at a sample code. Now, obviously, this is not a complete code. This is just to give you some idea as to what angular component is. This is comprising of the view, which is combination of the TML and CSS. Here we are trying to point out to an TML file and a CSS file. So all the estimul and CSS required for this particular component would be residing in these files. And then we also have the underlying logic that would give some intelligence to the component. Example, in case of display post, we might be having a method called post that will have some code to tell what would happen if the user hits a like button. Then we might also have another method called add comment defining what would happen if user were to add a new comment. The data would be fetched from the server, which we're not seeing in this particular code, but we will definitely explore that down the line. But I hope that you have got a sense of what angular component is. When we go through the example, you're going to understand it even better. I will see you next. 5. 0105 Creating Angular Porject with Project Walkthrough: Okay, let us see how we can create our first angler project. And for that, we're going to launch our Visual Studio code, and then we need to launch the terminal. We can either use the terminal that is already part of Visual Studio Code, or we can also use any command line tool like Windows command line, PowerShell, et cetera. As long as you can run anglo commands from that tool, we should be good. To launch the terminal in Visual Studio code, we should click on terminal in the menu and then click on New terminal. I've also created a new folder in my Windows, where we're going to host all our angular projects. I'm going to copy its path, and we're going to go to that directory. I'm going to do CD stands for chain directory, and I'm going to paste the path. So we're now in that newly created directory, and this is where we're going to create our new angular project. The command to create a new angular project is NG New. And then we're going to specify the name of the project. I'm just simply going to call it as my app. Now here we have a bunch of options. I would recommend you to use SCSS. SCSS is like an evolved version of CSS. If you're familiar with CSS, you can easily understand SCSS. And even if you don't know anything about styling, you can easily understand it as we progress through this course. So for now, let's choose SCSS option and hit Enter or Return. Now it is asking us if we want to enable server side rendering and static side generation. We're going to explore these later on, but I'll try to give you an idea as to what these are. Normally, when you visit a web page built with angular, the browser downloads the entire Javascript and then builds the page on your computer. The server will just send the data. That is called client side rendering, and client side rendering is most commonly used. The server side rendering or SSR works like traditional websites where the page is built on the server first and the complete estimate is sent to the browser. Now, there are pros and cons of it, which we will explore at later time, but most often we prefer client side rendering. The static site generation or SSG will allow us to generate static TML files for our website when we build our project. And these static files are then served directly to the users, which is fast because there is no need to wait for the server to build anything. It works like static website and is useful for a documentation website where all the pages are pre built as TML files. But like I said before, in most cases, if it's angular application, we're going to use neither of these. We would use the default client side rendering. But for now, we can say yes to this option so that Angler will include all the configurations required for these. And in case if we want to use them, we can use them. So we're going to say yes by typing in Y and then hit Enter. Now, this is going to take a while to create the project. Let me pause the video and revert back once it's done. Okay, our project is now created, and if you go to the Project Explorer, we see an option to import a folder or open folder, click on it. We're going to again go to the directory and choose the angular project which we've just created. Click on it and click on Select Folder. So this is going to import our project, and this is the typical angular project structure. Let me quickly walk you through what we're seeing here. So first of, we have the SRC directory. This is where the actual code for the angular application lives. It contains the app components, services, tiles, assets, and configuration files. Let's explore its main subfolders and files real quick. So we have this app folder, and this is where we have the root component. So all the files that start with app dot component are all corresponding to the root component. The app dot component dot Ts file is the root component typescript file. And just as with any other components, it is pointing to its corresponding template file or STML and also its corresponding style URL. So this is the STML and this is its corresponding style file. In addition to the app folder, we also have a bunch of other files. For example, main dot TS file is like the entry point for our application. It basically bootstraps the root module or the app module. And then we also have the index HTML file, which contains the angler app itself, and this is the file which gets served whenever somebody visits our website for the first time. We also have its corresponding styles file. And then we have angular dot JSON file. This is the main configuration file for the angular CLI. It basically defines the settings for building, testing, and serving the app. So here is where we can set up various build options and configure which assets, styles, and scripts are included, et cetera. We're going to explore all these later on. And then we also have the package dot JSON. This file contains metadata about the project, including dependencies and scripts. So we have dependencies that are required during runtime. Then we also have bunch of dependencies we need for development, but are not necessarily required during runtime. For example, anglo CLI is something we need for development and testing, but not during runtime. Another important file istsconft dot Json. It's a TypeScript configuration file that defines how typescript compiles the code. You can change these compiler options depending on your need. And then we also have the node modules. This directory contains all the dependencies, libraries and packages installed via NPM. You typically don't have to modify anything here. It gets auto generated. There are a bunch of other files as well, but we don't have to really pay attention to those files as they're not going to add any value to our project or to our learning. So that's a quick overview of what we have in anglo project. We're going to explore all these in detail at later time, but for now, I hope this has given us a good start to start writing our code. I will see you next. 6. 0106 Creating Angular Component and Lauching the App: Let us take a look at how we can generate or create a new component in angular, and then I'll also walk you through what goes inside a component. So the command to create or generate a new component is NG generate component, and then you're going to give the name for the component. I'm going to call it as pose. So this has created a new folder with the component name, and that folder has all the component specific files. Let's open up this typescript file and try to understand what goes in there. First of all, we have this component decorator that tells Angler that this class is a component, and it provides some metadata that helps angler understand how to create and display the component. So first of all, we have the selector. That defines a custom estimate tag the angler will use to display this particular component. If this component were to be part of a parent component, this is a tag name we have to use. We have the standalone set to true. This allows this component to exist without being part of any angular module. Well, before angular 14, we need to have all our components defined inside a module. With the latest versions of angular, it is no longer needed, and we can define standalone components. If you don't know what is module, obviously, we cannot talk about it right now. We will explore it another time. Next, we have imports. This is where we can list down all the angular modules or other standalone components that this particular component depends on next, we have the template URL, and this points to the STML file that defines the structure or the UI of this component. In this case, the file is located in the same directory as the component and is called post dot component dot HTML, which corresponds to this particular file. Similarly, we also have this style URL that points to the SCSS file that defines the styles for this particular component. You can write SCSS code in this file to style the component. So right now, by default, angler has populated some HTML in the post TML file. But right now, we don't have any styling for this. Soon we're going to introduce some code here. We also have this spec dot Ts file, which is a test file for the component. Obviously, since you're a beginner, you may not be able to understand this code, so we're going to save it for another time. Now let's try to launch this application and see what's going to happen. But before that, we need to include this particular component as part of the master component or the app component. So I'm going to copy this selector and go to the estimate file of the app component. Right now, it's populated with some default content. We can just simply delete it, and we're going to introduce our own code. If you notice we have an error here, that's because we need to import this component inside its corresponding typescript file. Let's go to this app component dot Ts, the TypeScript file, and then let's include our post component. The name of the component is the name of the class. I'm going to copy it and use it here. If I how my mouse, we can actually import this component automatically. So this import statement is auto generated by Visual Studio code. Now let me save the file and launch our application and see what's going to happen. For that, I'm going to use the command G serve. So this command compiles your wangular application and launches a local development server, which is accessible through local host. It runs on port 4,200, and that's where we can see your application running. This also has some live reload feature, meaning that as and when we make any changes in our code, it's going to be reflected instantly on the browser. So let me copy this particular link. Go to your browser. And it worked. Let's go back and try to change the HTML. Save the file. As soon as saved the file, Angular has done its job. And if you go back to the browser, the new changes are now reflected. I'll see you next. 7. 0107 Facebook Posts App Demo: I believe in learning by doing, and according to me it is the most effective way to learn. So today, we're going to create a Facebook post kind of application, and in the process, we're going to learn a whole lot of things in Anglo. This approach is not only fun, but will give you exposure to how we use angel in real time projects. So the application you are seeing is what we're going to build. It kind of works like Facebook post. So we have a couple of posts made by John Doe and Jane Smith, and these are the posts they made. We can then interact with the post by hitting the like button. Once you do that, we're going to see a message that says you like this post, and we can also unlike it so that we don't see that message. We can also add a comment, click on post so that comment would be added. All right, let's start our journey to build this fun little application. I'll see you next. 8. 0108 Data Binding Interpolation and Property Binding: So far, we have created the angular project and also generated a new component, which is just simply displaying this message. If you go back to the browser, this is a message we see. Soon, we're going to transform this application into this application. But for that, we need a data source from where we get all this data. Ideally, we're supposed to get this data from a server in JSON format. But since we're learning and to keep things simple, we're going to get this data from the parent component and then display it in the child component. Let me show you what I mean. So we have the child component which we've just created, and we already have the parent component. What I'm going to do now is I'm going to populate a property or a field in this component with that data. I already have that data. Let me show it to you. I'm going to change the name to pose and then I'm going to assign that value. So this is basically pose array that contains a list of objects that simulate the structure of a social media post with details about the post author, the content, and its corresponding comments. Variable pose is initialized as an array of objects and each object is representing individual post with its own data fields. The ID field is of type number. The user field is of type string, the content is of type string, and then we also have commands, which is an array of strings. This post segment right now is holding couple of objects. Now, we need to somehow get this data in the child component. Let's see how it's done. Let's create a property or a variable that's going to hold that data. Let's call it as User pose, and this is going to be an array as well. I'll do all Shift F to format the code. Let's give some breathing room. Okay, so User post is the name of the property, and it is an array of any type, meaning it can hold an array of any kind of data objects, strings, numbers, et cetera. And right now, it's an MTRI without any data. Now, let's define this particular property in this tag. So just like we have STML elements with their own properties, we can also use our custom properties as part of our components. We might be having an image tag whose property could be ARC. Similarly, we have this app pose custom component tag, whose property could use a pose. And we're going to now assign some value to this. Can you guess what the value is going to be? Well, it's this variable that's holding the data. Let me copy it and paste it here. Now to take a look at what this user post property is holding, let us try to display it on the UI. And the syntax for that is as follows, we're going to use curly braces so that it will get displayed. This is called interpolation. This is one way data binding technique that will allow you to display data from the component in the template. This means that the data flows from the component property to the TML element. Let me save the file, and let's go back to the browser to see if anything happens there. It's displaying nothing. That means nothing got populated here. So to tell Angular that we're expecting this property to be populated by the parent component, we need to use a decorator called input. Let me show you what I mean. Like so. An angler has already done the job for me of importing it as well. Once I say the file, we're seeing an error. Can you guess why we're seeing this error? Well, what we have here is an array, but what we're trying to assign here is a string. But the question is, we don't intend to assign it as a string. We intend to assign this particular value. To make it work, we need to use something called property binding. Just enclose this property within a square brackets, and that will fix the issue. Why is that? This means that you are actually binding a property from the parent component. Which is pose to a child component called user pose. And this property has to be having this input decorator. Only then will that happen? Now, let's save the file and go back to the browser, and all we are seeing here is a couple of objects. Why is that? Well, this is shown as array of JavaScript objects, which might not be very readable to make it readable, way to use pipe JSON. This will format the array into JSON string. And this is part of the common modules. We need to import it, save the file, and we no longer have that error. Let's go back and it worked. We're able to display the post information. Let's see how we can evolve this into this application. I'll see you next. 9. 0109 Directives Using NgFor to Display Posts: Right now, we're displaying the data in JSON format. Obviously, this is not how we want to show it to users. We want to extract the data from this JSON and then wrap that data with estimL tags and then eventually apply some styling so that we can display it like this. So our goal for this particular lecture is to extract the name or the author name and its corresponding post and then display it in a meaningful way. If we go back to the code, right now, this particular property is holding the data, and just to reiterate, we're getting the data from the parent component because of the property binding, where we're binding the user's property of the child component to the post property of the parent component. And that's how we're getting the data in this particular property. And it would only happen if you have this decorator. Now, let us try to display the data. I'm going to put everything in a DV tag to start with. And here we want to populate the name and the post content. I'm going to keep the name in H two tag. And then the post is going to go inside a paragraph tag. So how are we going to get the user name and the content? Well, it's by using interpolation. We're going to use a couple of Colbrss for that. And here, we're going to say user pose. We want to access the first element. Pose is currently having a couple of elements. And we're using user post because that is a property name in the child component. So how do we access the first element? Well, if I say zero, that's going to give us access to the first element as a dot user. Then I'm going to do the same for the content as well. I'm going to set content. So with interpolation, we're able to bind the data from the component to the template. Let me save the file, and let's see how it renders on the browser. Let's go back. And it has displayed the first element. And we're going to do the same for the second element as well. I'm going to copy pause the code and increase the number by one. This is going to access the second element, which is this. Let's go back and it rendered as well. Now how practical is it to write code like this? Right now, we have a couple of elements in this array, so we can write code like this. But what if we have hundreds or even thousands of elements? It's just impractical to write code like this. Do we have a solution? Is there a way we can let angular do the job for us? The answer is angular directives. We're going to talk about anglo directives in more detail later on. But for now, we're going to focus on one particular directive that's going to help us do this job, and that directive is NG four. Let me show you what I mean. So I'm going to define only one tag, one dive tag. And here, I'm going to use a direct. And the syntax for that is as follows, star NG four. And here I'm going to say let post of user pose. G for directive will allow us to iterate over an array called user pose. And for each item in the user pose array, it creates a local variable called post, which represents the current item in the iteration. In short, let declare a variable for each item in the array and of specifies the array that we're looping through, which in this case is user pose. To access the data of the current element, we can use this variable. I'm going to replace this with post. Tangler is essentially going to repeat this tag number of times, equal to number of elements in the array or number of elements in the user post. And we can access the data of each and every item by using this variable called post. Now, if you're wondering how we're able to use these directives in TML file. Well, when we compile this code, Angular is going to evaluate them and then generate dynamic STML. So if we have hundreds of elements here, those many number of Du tags would be created by Angular once after we compile. Browser do not understand these directives. These are provided by Angular for our convenience. So let me save the file and let's take a look at the browser and see if it renders the data, and sure enough, it has worked. Now I want to give you an assignment. Go ahead and display comments for each post. It's straightforward to do so and you already know the solution. I hope you will do it. I'll see you next. 10. 0110 Displaying Post Comments: We are able to display the author name and the corresponding post. Now let us go ahead and display their corresponding comments. In addition, we're also going to add these buttons like and post and also this input field. For this particular lecture, we're not going to give any kind of behavior for these buttons. We're going to do that in next lecture or upcoming lectures. So let's go back to the Visual Studio code. I hope you've tried adding the comments and I hope that you're successful. If not, just take a look at how it should be done. So just for some logical separation, I'm going to add another Dew tag. This might come in handy if we want to style particular sections. And inside this Dev tag, I'm going to create an unordered list where we're going to display the comets. Here is where we're going to use NGF directive to sort of loop through or iterate through all the list of commands. So I'm using the exact same syntax. Let's call it as comment, and I'm going to copy this particular field like so. And of course, we need to get this from this variable post, which would be holding the current elements commands. Post dot commands. And inside this tag, we can use interpolation to display the comment. Like so, save the file. And if I go back to the browser, we should be seeing the comments. Let me quickly add the button as well. I'm going to call it as like. We need similar button for posting a comment as well. Call it as post. And then we need an input field. Just like so. Save the file. Let's go back to the browser. So we have the like button, the input field, and it's corresponding post button. Of course, we don't have any behavior for these buttons at the moment. That's what we're going to do in upcoming lectures. I'll see you 11. 0111 Event Handling Adding Behaviour: Let us now work on this like button. I want you to pay attention to how this like button is behaving. The moment we launch the application for the first time, all the posts are going to be unliked state. Meaning, for every post, we're going to see this button called L. If I click the like button of any post, the status should change like this. The text on the button should change to unlike, and then we should be able to see this text that says, You liked this post. And if I click on Unlike button, it should change back to L button. And the way we're going to accomplish this is by maintaining a list or a set of posts that were liked. If you remember, for each and every element, we have this ID field. The moment I click on the like button of a particular post, we're going to add its corresponding ID to that list or the set. That way we can keep track of all the posts that are liked, and based on that, we can display the text on the button as well as the text we are seeing next to it. So let's see how it's done. So here I'm going to introduce a new set that maintains a list of liked posts. I'm going to say set. This is going to maintain a set of numbers because the ID field is of type number. And then I'm going to introduce a method called like post. And then we're going to send it the post ID. Which is of type number. This method is not going to return anything, so we say void. Then we're going to have I condition that we check to see if this dot like post dot has this sent ID. If that's the case, then we want to remove that ID from the liked post list. This method would be triggered every time we press that button. If we click the like button, we're going to essentially add that ID in this list or the set and vice versa. If we click the unlike button, then we'll check to see if the post is already present in the like post. If yes, we will delete it. So here, we're going to set this like post, dot delete, post ID, like so. Then we'll have the else block and here we just add the post ID. I know it sort of takes some time for you to sort of sink this in, but it will all make sense in a while. Let's go to the template. Here, we're going to do angular event binding. So the moment we click this button, guess what, we're going to call that method like post, and then pass in the current post ID, likes just to reiterate this post variable will hold the current element data, and that's how we got the ID. And here, we're going to use interpolation to sort of check to see if the post tide is present in the liked post, and based on that, we want to display the text. Led post dot has checking to see if it has the post taught ID. I want to use the question mark. If it is there, that means post is like, and now we want to show the text unlike. Otherwise, the post is not present in the list, so we want to show the text as like. Let me put this inside the DVTag And I'll do all Shift F to format our code. And next to it, I'm going to introduce a span tag, and here is where we're going to populate this text. Here, I'm going to use NG to check to see if the post idea is present in the liked post list or the like post dot has, and I'm going to send the post dot ID like so. If that's the case, we want to render this span tag displaying this text. U like this post. Like so. Let us save the file and see if it works. I'm going to like this button, and the moment I press that like button, it has triggered the click event of that button, which is called this method, and it will check to see if this condition is true. In this case, it is false. That's why it went ahead and added that particular item or the ID in the post list. And based on that, we're changing the text on the button as well as this particular text. Let's unlike, and it seemed to be working great. So when I unliked it, we've essentially removed that particular post ID from the list, and based on that, we're rendering the span tag as well as this. So this is called event handling in angular. Hope it makes sense. I'll see you next. 12. 0112 Two Way binding Adding Comments to Post: Okay, let us now try to add the add command feature to our application. The way we're going to accomplish that is by using combination of two way binding and event handling. Let me explain you what I mean. We have an input field for each and every post. Whenever I type in some text here, I want a property in the component to be updated instantaneously. We can accomplish that with two way binding. When user clicks the post button, we're going to call a method with corresponding post ID and inside the method, we'll try to find that post, and then eventually we'll try to push that comment into the list of its commands. Although we are seeing a couple of comments here, we might be pushing a new comment into this list. So let's take a look at how it's done. So we already have the input field. Let us first populate some default text. If we go back, we see default text called add a comment. So we're going to add that first. Placeholder, add a comment. Like so. And now here I'm going to use one of the anglo directives. For two way binding, it's called NG moral. And it's going to be wrapped with combination of parenthesis and square brackets. I'll explain to you what's going on here in just a bit. And here I'm going to say new comment. We need to have this property added in the component. I'm going to copy it and create a new property here. It's going to be of type string because that's what user enters. By default, it's going to have nothing. Save the file. This belongs to Forms module, so we need to import save the file and we no longer have the error. So the ng model is the anglo directive used for two way binding for all these form elements. The input field is now bound to the new command property in the component. When the value of the input field changes, whenever the user types in something, it automatically updates the value of the new comment. This property would be updated instantaneously. But why is this called two way binding is something you'll understand by the end of this lecture. Next, we're going to create a method that corresponds to this post button. So we're going to have a click event as with this button, I'm going to copy this and here let's change the method name to Add comment, and once again, we're going to send the post ID. Let's create this method. Again, let me just copy this code to save some time. We're going to change the logic though. First of all, we'll try to find the post by the post ID. So let's do that. I'm going to create a constant post equals this user post dot find. I'm trying to find a post with that post ID, and this is a syntax for that. Equals equals, equals post ID. So the find method is used to search the user post array, but the post, whose ID matches the post ID provided as the argument. We'll then have a condition to see if the post actually exists and is not undefined. So if the post exists and this new comment dot trim, only then do we want to add the comment? So if the post is not undefined and the new comment is updated with some value after trimming the trailing white spaces, then we want to actually push that comment into the list of comments of this particular post. I'm going to say post dot commands dot. Push this dot New Command. And then finally, once we push the command, we no longer want to show that text in the input field. So for that, I'm going to update the new command property and make it empty, save the file. I'm going to save this too. Let's go back and see if the application behaves as expected. And it worked. We're able to add a new command. Now, why is this called two way binding? As you notice, the moment something gets updated in this input field, the same would be reflected in this field as well. It's also true the other way. The moment we updated this particular property, the same is reflected here too. Data is essentially flowing not only from the template to the component, but also the other way. The data is also getting updated and is flown from the component to the template. Whereas in case of interpolation, that's not the case. It's called one way binding where the data is just flowing from the component to the template. So we no longer have the text here. Hope it makes sense. I'll see you next. 13. 0113 SCSS Mini Masterclass: This is going to be a minimster class on SCSS or SASA CSS. SCSS is like an evolved version of CSS. It looks similar to regular CSS, but with extra features to make our styling more efficient. But SCSS is more popular because it is fully compatible with CSS, meaning you can take any existing CSS file and start adding SCSS features without changing much. In this lecture, we're going to talk about all the essential features that you need to know along with examples. First let's talk about variables. Take a look at this tradition of CSS styling. We're using the exact same value or the color for the color attribute in both H one and H two. Now, this could be a problem because if we were to update this color, we'd have to do it in both these locations. Now, in this case, it's just a couple of locations, so we may not have a problem. But what if we were to update the color in multiple locations? Well, that becomes a tedious job and is error prone. In SCSS, we have variables. Here we are trying to define one variable called primary color, whose value is the color itself, and we are using that variable across multiple locations. So whenever we update the value of the primary color, it will get reflected across all the locations wherever we're using that variable. We can also use CSS custom properties or CSS variables, but they aren't as flexible as SCSS variables in terms of writing logic because SCSS allows us to write code with advanced features like loops, conditions, and functions which are not possible with CSS custom properties. However, there's one significant advantage with CSS properties, which is being able to update the values dynamically during runtime. Whereas in SCSS, variables are static and only work at compile time. In other words, the SCSS file would eventually be compiled to equivalent CSS file so that browsers can understand. We cannot change its values during runtime when the application runs. Next comes nesting. In CSS, we must write selectors repeatedly, even if they are related, just as you're seeing here. Whereas in CSS, nesting is allowed, which will make the code more readable and easier to maintain as well. And just by looking at this code, we can tell how its corresponding STML would look like. It should look something like this. We have the NAV element whose child element is unordered list or UL, whose child element is the list item, LI tag. The same structure is followed in styling as well, which makes it more readable and maintainable. Next comes partials. CSS does support the import rule, but each input results in an additional STDB request, which can slow down the loading time. On the other hand, SCSS will allow us to split the style sheets into partials and importing them without extra SDP requests, since they are compiled into single CSS file eventually. All the files that you see here that start with underscore or partials, and we're using the import statement to import them in the main SCSS file. Next comes mixins. In CSS, if you're using the exact same styling for multiple elements, you'd have to manually copy and paste the code. Whereas in SCSS, we have mixins, which will allow us to create reusable blocks of styles and reuse them throughout our style sheet. That way, we can avoid repetition and reuse the existing styles. Similar to writing functions in programming. And in this case, we have the mix in named button style, and we're including that mix in in multiple locations. And when we do so, we're also passing some arguments. In this case, the arguments are the background color and text color. By default, they were blue and white, but we can overwrite them by sending our own arguments. So for button one, we're sending black and white, and for button two, we're sending red and white. Next comes inheritance. In traditional CSS, if we have to use exact same styling in multiple locations, once again, we have to just simply copy and paste. But a CSS will allow us to extend one selector into another, and this way we can reuse the existing styles. Next comes loops. Take a look at this traditional CSS code. In contrast, take a look at the SSS code, where we have used loop to dynamically generate these styles for us. The FOR director creates a loop and dollar I is used to insert the current loop iteration number into both the class name and the property value in this case. This code will generate the exact same styling that you see on the left hand side during compile time. Next comes functions. CSS has limited set of built in functions like Calc, RGB or URL. However, you cannot define your own functions in CSS. Whereas in a CSS, it will allow us to create custom functions to perform operations like color manipulation, calculations, basically, anything that you would wish to do. So here we have the function called calculate width, and then we're calling that function by sending in some argument. In this case, we're sending 100 pixels, which would be multiplied by 1.5, and the same value would be returned back. Next comes conditional statements. Take a look at this code. As you can see, SCSS allows conditional logic with I Ls and elseif statements. So here we're checking to see if the theme variable is dark. If, we have specific styling for that, se, we're introducing a different styling. Next comes math operations. CSS has very basic math operations that you can perform using Calc, but SCSS allows complex math operations directly without any need for Calc method. That's all about SESS and congrats. You just graduated from the SCSS master class. I'll see you next. 14. Quick Message: Hi, This is your instructor for this course and I'm hoping that you're really enjoying the journey so far. The reason for this video is basically to ask you to just take couple of minutes to rate and review this course. This is really important because depending on number of ratings and reviews at the course receives, Skillshare team will decide whether to keep the course on this platform or remove it. Unfortunately, few of my courses were removed. And lot of students were impacted because of that, because they lacked enough reviews and ratings. If it's not a big favor, just take couple of minutes and do the reading for this course and also describing couple of lines, what you've learned so far. And if it has benefited you in some way or the other, that's going to help this course stay alive on this platform. And probably you're not going to lose access to this course as well. I hope you do that. Thank you very much and I'll see you next. Have a great day ahead. 15. 0114 Styling Our Posts Application With SCSS: I went ahead and introduced tyling for our application to make it look like this. Since you are now familiar with SCSS, you should be able to grasp what's going on in here. Basically, I have introduced class attribute for all the DV tags in the HTML, and I've also provided their corresponding styling. And if you notice, we're trying to follow and mimic the same structure of the HTML itself. So we have the Dv tag inside which we have couple of child Du tags, and we're following the same structure. So we have the parent DevTag selector. Post is the name of the class we've used here. Inside which we're trying to select the sub divs, actions and comments. And we have provided styling for their elements. I want you to take some time and go through this file and try to understand what we're trying to do here. I've also put in some comments for you to understand. And I don't think it will make a lot of sense for me to walk you through each one of these attributes because honestly, styling is one of the easiest thing to do. And moreover, this is not really considered as a technical skill. I hope it makes sense. I'll see you next. 16. 0115 Angular Services: Imagine that you're building an ecommerce website using angular. Now, as part of your project, you might be having these components, profile component and orders component. Profile component is aimed at displaying the user profile, and orders component is aimed at displaying the historical orders made by the user. Of course, in an ecommerce website, you might be having hundreds of components. But for the sake of this example, let us focus on these. There might be certain functionalities that are going to remain common in multiple components. In this case, we might need authentication residing in both these components. We might have some lines of code to authenticate the user, and this authentication code will send the request to the server, making sure that the user is actually who they say they are. Now, this is very inefficient way to handle this scenario. Can you guess why? Well, first of all, we're having the same code designing in multiple components, so that's repetition. Secondly, we're making multiple requests, which will drain the server resources. We should be able to send only one request and then store that state somewhere so that we don't have to keep on sending the request to authenticate the user. That's exactly why we need angular services. In this scenario, we might introduce a service called AT service, which will have authentication specific code. We're going to move the authentication code from the components to this at service so that it can remain in one place and components will just make use of the AT service to know the authentication status of the user. But it's the at service which will actually send the request to the server to authenticate the user. Once it does, it's also going to maintain a state. Essentially, inside the at service, we might have a property to store the authentication status of the user. It's only going to send the request once and then it's going to update the status or the property value. Components will just take a look at the property value and based on that, they will know whether they should be rendered or not. So essentially, we're using services to fetch data or to interact with the server, maintaining the state, like you've just seen. We might also have utility functions residing in AT service. So if you have any utility functions like data transformation or validating user input, for instance, you can have them all in one place inside the service. And, of course, we might also have the business logic. In this case, we're basically checking whether the user has sufficient permissions or not. But what are the advantages of this approach? Well, first of all, code reusability, logic can be written once and used across multiple components. Separation of concerns, which will keep the components focused on presentation logic, while the business logic and data fetching is moved to services. This will also improve the trustability of services because they do not deal with any UI logic. Next, we're going to introduce service in our Facebook post application. I'll see you next. 17. 0116 Configuring Endpoint and Serving the Data: At the moment, we're getting all the post data from the parent component. This is not a realistic scenario. We need to be getting this data from the actual server, and guess what? We don't have any servers right now serving this data. Ideally, we're supposed to create a server on Cloud enrollment and then write some server site code that will actually expose this API to send this data, but I have a better solution to this problem. Just simply going to use one of the existing tools online. I came across with this site with a quick Google search, and this seems to be solving the problem. So the website name is bispto.com slash MOC hyphen API. And as the name suggests, it will allow us to create a mock API so that we don't have to take the hassle of creating the server, writing the code, blah, blah, blah. Time of this recording, this website is active. If you're not able to see this site live with a quick Google search, you can easily find many such tools. So what I'm going to do now is I'm going to copy this post data. Before we serve it, we need to make sure that it is in proper JSON format. For that, I'm using another tool, which is again something I came across with a quick Google search. So I'm going to paste it here and click on Process. If you're curious about the website name, that's jsonformata.usccept.com. So apparently, this is not adjacent format. We're supposed to have double quotations for the keys and also for the values. So it has done the job for us. I'm going to copy it and I'm going to paste it here. Essentially, we're asking this tool to send this data as the response whenever I send the request. And here I'm going to say pose. If the URL endpoint or if the UR ends with slash pose, it is then we want this tool to send this data. Make sure this is 200 okay and click on Create Mock server. To make sure it is working, I'm going to copy this. Let me enlarge it for you. I'm going to copy this URL, paste it here, pose, and we're able to see the response we need. Let's continue from next lecture. 18. 0117 Fetching Data From Service: In this lecture, we're going to take a look at how we can get the data from this server so that we can do something with it. So first of all, let us go ahead and create a service, and the command for that is NG generate service. It will ask us to give a name for the service. I'm going to call it as pose. So Angler has created these two files. Let me open this up. I'm going to create a variable that's going to hold that URL. Private, let's call it as API URL equals, and I'm going to copy this URL. Next, I'm going to use the constructor to inject the STTP client dependency. Let me show you what I mean. We already have the constructor created. And if you're wondering what is a constructor, it is basically a special method that is automatically called when an instance of the class is created. So when the instance of post service is created, Angler will automatically call the constructor. Typically we use constructor to inject the dependencies. Let me show you what I mean. I'm going to say private STTPE TDP client. STDP client is essentially a typescript file, and it will have some code to send the request to the server and retrieve the data. So we basically use this to make HDP request to the server. And by specifying it in the constructor, angular dependence injection system automatically injects an instance of TDP client whenever it is created. With this, we don't have to manually create an instance of astrotypic lit. We can ask Angular to inject the instance for us. But in order to actually create the instance of astrotypic client, we need to let angular know about it with the help of provider. Let me show you what I mean. I'm going to open app config dot Ts, and here we already have some providers. In addition to these, I'm going to specify provide ATT client. Like so. So what this is going to do, simply put, we're saying, Hey, angular, whenever a component or a service needs stodypic line, please make sure it gets provided. That's what this means. Now, we're going to delve deep into understanding what is dependency injection, singleton pattern, et cetera in the main angular course. But for now, I hope you got an idea. By specifying provider, we're asking Angular to create an instance of stodypic line, and by specifying it as part of the constructor, we're asking Angular to inject the instance of next, I'm going to create a method that will actually do the job of fetching the data from the server. I'm going to call it as fetch pose, like so. I'm going to say observable A So this method basically returns observable that emits an array of any type of elements. Again, we're going to delve deep into these concepts later on. But for now, think of this as something that's going to generate data for us. And here I'm going to return this STP dot G A. We're going to specify the API URL like so. The G is essentially the method of tradipic client that performs an STDPGt request to the specified URL, and we're expecting an array of any type in written. Let's save the file. Let's save this file as well. We'll continue from next lecture. 19. 0118 Subscribing to Data and Populating: Okay, let us go ahead and populate the data on the UI. For that, I'm going to open up the post component dot Ts file. Currently, we're getting the data from the parent component with two way binding. So since we're no longer going to get the data from the parent component, I'll get rid of this, and that should give an error in the parent component. So let us quickly address it. I'm going to remove this from here. And we no longer need this data in the parent component because we're getting it from the server. Save the file. Let's go back to post component. And here, at the moment, we don't have a constructor. Let me create one because we want to inject the service into this component. Constructor private post service post service. This has also automatically imported the post service for us. Save the file. With this, we're asking Angler to inject the instance of post service. Then I'm going to use one of the angler methods called NG on in so Gate is one of the anglers lifecycle hook. Basically, it gets called once after angler has initialized all the components data bound properties. Typically, this is a place where we initialize components data or even to perform tasks like fetching data from the server. In this case, we're going to use this method to get the data using the angular service. So here I'm going to say this post service, and we're going to call the method that we've just created fetch post dot subscribe. I'll explain to you what we're doing here in just a bit. And then I'm going to say pose. This dot user pose, going to populate the property equals pose. Save the file. When you call the subscribe method, I'll do all Shift F to format the code. When you call the subscribe method, you're telling Angeler to execute the SDDPRquest and give you the results when it's ready. If I go back, you can think of observable as a data stream that sends the data over time. Imagine it as a pipe that can send multiple values like numbers or objects, or any other data one after another. And these values don't arrive all at once. They come whenever they're ready, either immediately or later. And to actually receive the data from an observable, you need to subscribe to it. Think of subscribing as attaching a listener that waits and reacts whenever new data arrives in the stream. And when you subscribe, you'll decide what to do with each piece of data, the absorbablele sense. Now you may be having a question. Why can't we just retrieve the data without this concept of observable and subscribe? Well, data can take some time to arrive. In the meantime, we want our application to be running as well. You're basically allowing the application to continue executing while we wait for the response. And once the data is ready, the subscription handles it without blocking the user interface. Let me save the file and see if our application still works. Okay. At the moment, I guess our application is not running. Let's go back and do NG Sv. Let's go back to the browser. And it has worked. Hope it makes sense. I'll see you next. 20. 0119 Angular Custom Directives Strucutal and Attibute Directives: To understand direct use and angular, it's really important that you understand what is a dome or document object model. The dome is like a map that represents all the content on a web page in a structured way. Well, what does this mean? Imagine that this is your HTML. When the browser loads this HTML, it reads the TML file line by line and constructs a dome that looks something like this. Has a similar structure as with the HTML itself with document being the parent node, and it has the STML as a child node, whose child nodes are head and body. It follows that tree structure, and generally browsers create dome so that JavaScript can actually access and manipulate it. JavaScript can select, modify, add or remove the nodes in the dome. JavaScript doesn't pass Raw HTML directly. They actually manipulate the dome to get the desired results or to get the desired view. Now let's understand what is a directive in angular. Take a look at this code. In this code, we're trying to loop through all the list of items and displaying them in list format. Assuming that this is the list, we're essentially displaying all these items in unordered list format. Now, browsers do not understand this directive NG four, it is Anglo specific directive. Browser only understands HTML and can only execute JavaScript. So when we actually build a project that has this code, Angular compiles this file and generates equivalent JavaScript for browsers to understand. This JavaScript essentially doing the same task of looping through all the items and making a list of items with Ai tag and then finally creating an unordered list element and appending all the list items to that element. When this JavaScript gets executed on the browser, the resulting dome structure might look something like this, which is equivalent to this STML. Now, since this directive NG four is manipulating with the dome structure, this comes under the category of structural directive. So NG four is termed as a structural directive because it manipulates with the dome structure. And typically, structural directives always start with an asterix, like in case of G four. Now let's talk about attribute directives. Attribute directives are used to modify the appearance or behavior of the elements. They do not alter the dome structure, but affect how the element look or behave. In this case, we are using NG style. This is an angular directive that applies inline CSS style dynamically to an element. It expects an object where's or CSS properties and values or the styles to apply. In this case, we're having a condition where we're checking to see if es red property in the component is set to true or false, and based on that, we're choosing either red or blue. If Es red is set to true, then we would choose the value as red. If it is false, then we would choose the value as blue. Building the project and after compiling this file, the resulting JavaScript might look something like this. We're just calling the method called update style, inside which we're checking to see whether the ese red property is set to true or false, and based on that, we're populating the color value with either red or blue. And this method would be executed whenever there is a change in the ese red property. Now, this is a rough JavaScript code. This is not the exact code. But the fact that we're not actually manipulating or adding or removing elements in the dome structure, G style is an example of attribute directive. Now there might be cases where angulars built in directors may not suffice. We need a different functionality. In which case, angular allows us to create our own directives. Let's take a look at an example of the same. In this case, I have a custom directive for which I have written my own code. I'm going to show you that code in just a bit. But what we're trying to do here is we have the DIV tag, and we want to render its content only if the user is logged in user or only after user is authenticated. As you can see, the directive is starting with Asterix. That means this is a structural directive. It is going to manipulate the dome structure. Now, assuming that is logged in user property is set to true in the component, we're going to render this particular text welcome back valued user. Now let's take a look at the code of this directive, App show if logged in, and this is how it might look. We can just create another typescript file with this code or run a quick command, and Angler will actually create this file with some skeleton code. So initially, we have the directive decorator, which tells Angular that this is a custom directive, whose name is Appshow if logged in. And inside here, we have this section of code. Now, this code is combination of two different things. One, we have the property called app show if logged in with input decorator, and secondly, it is also a setter method for that property. So the input decorator marks Appshow I logged in as an input property of the directive, which will allow it to accept a value from the component template where the directive is used. In this case, it is going to accept whatever the value that we assign to is logged in bullying value, true or false. Then we said, set app show if logged in as if we are defining a method, and this defines a set of method for the app show if logged in property. This means that whenever a new value is assigned to the directive with either true or false, this method runs with that value as the argument. We're also asking angular to inject a couple of dependencies. View container f and template ref. Basically, whenever you apply a directory to a specific Stem element, like DIV in this case, the view container ref is created for that specific element, and we use that object to insert the content. In this case, we're going to use view container f to insert some content in this div tag. And template turf actually holds the content structure of the div tag, including any nested STML. The template troof is a reference to the content of the div that has this directive. In this case, the template turf essentially holds all the content inside this div tag. And as you can see, inside this method, after checking the flag is logged in, and if it is true, then we're essentially using view container to sort of populate the content inside the Dv tag, and we're populating it with the content in the template ref. And if it is not true, we're just saying, clear out everything that means don't show anything. I'm pretty sure that this might actually sound very confusing. When we take a look at an example of custom directive in upcoming lectures, you'll definitely have a better idea. Now let's take a look at an example of custom attribute directive. And here we have this custom directive called app Highlight. And as the name suggests, we're just simply going to highlight the text in this P element. And this is how the custom directive code would look like. So we have host listeners, which listens for the events on the host element. In this case, it listens for mouse enter and leave events to apply or remove the highlight. And to actually apply the style, we're asking Angler to inject couple of dependencies element ref and renderer two. Element f will actually provide a direct reference to the dom element, in this case, the P tag, and renderer two allows you to safely manipulate the dom. So inside this highlight method, we're essentially using renderer to set this style. It has two arguments. The first is the element reference, and second is the style that we wanted to apply. Next, we're going to enhance our Facebook post application, introducing a custom directive. That way you'll understand better. But as an assignment, I want you to experiment with any of the existing built in anglo directives, at least three of them. I hope you will do it. I'll see you next. 22. 0121 Pipes In Angular Builtin Pipes Custom Pipes: Pipes in Anglo transform the input data into desired output format. Basically, they take data as input and return a transformed version of it. The best way to understand this is by taking a look at an example. Here are some of the built in pipes in Anglo. Here we're using the uppercase and lowercase pipes. The uppercase pipe is used to convert the string into uppercase and lowercase pipe is used to convert the string into lowercase. Have the JSON pipe, which displays an object or an array in JSON format so that it can be readable by the user. Typically, we use this pipe for testing purposes. Next, we have the slice pipe, which will extract a portion of an array or a string. Slice pipe is also an example of a parameterized pipe, which means the pipe takes additional arguments to modify its behavior. The slice is used with two parameters. Zero is the start index and seven is the end index. Similarly, we can also display a portion of an array using slice pipe. We can also combine multiple pipes in a single expression like you're seeing here. In this case, we are trying to combine both uppercase as well as slice pipes, and the resulting output is combination of both. Angular also allows us to create custom pipes. In this case, we are creating a custom pipe which will reverse the string. We can run an angular command to create the skeleton code, and this class here is implementing pipe transform, which will allow us to provide the behavior for the transform method. This transform method is accepting one parameter which is of type string. And inside this method, we're using some logic to basically reverse the string. And this is how you're going to use that pipe in the template. Basically, the text angular would be displayed reverse. To create this pipe, this is the command we need to run. Engine generate pipe reverse, and this will create the skeleton code, after which we can provide the implementation. Since this is very straightforward, I want you to take this as an assignment to create this custom pipe and somehow get it working. In the main course, we'll be discussing some of the other concepts related to pipes, like pure and impure pipes, asynchronous pipes, multi parameter pipes, et cetera. But for now, I hope you got an idea on what pipes are in anglo. I'll see you next. 23. 0122 Routing in Angular and Lazy Loading: In this lecture, we'll understand what are routes in anglo. Routes would define how the application navigates between different views or components based on the URL. Let us understand it by actually implementing routes in our application. At the moment, this is how our application is rendering. We're displaying a welcome message, and we're displaying the pose. I'm going to do now is I'm going to introduce a new component called Navigation and we're going to move out the code pertaining to this message into the navigation component. In addition, we're also going to have a couple of links in that component. The first link says pose, which one clicked? We're going to basically render these post, and the second link says my profile. Which one clicked? We're basically displaying the user profile. You'll understand better once we implement this. I'm going to go back to our project, and this is our parent component, right now, we're just displaying the pose. Inside the post component, we're having this code we've introduced earlier. Let me copy this section of the code because we want to now make it part of a new component called Navigation. This component is now dedicated only for post. Let me open a new terminal and create a new component called NG Generate Navigation. We have to tell Angler what we want to generate. It's a component. So Angler has created a new folder with component specific files. In addition to that, I'm also going to generate another component called Profile. Inside this navigation component, we're going to move the code that I've just copied. And in its typescript file, we have to also introduce this direct. Save the file. In the parent component, we're no longer going to display the post, we'll get rid of this, but rather display this navigation component. I'm going to copy this selector. I hope you're able to follow along with me. In the app component typescript file, we have to import this component We no longer need to have this post component. We're going to replace it with navigation component. Save the file. As part of navigation component, we're also going to introduce a couple of links. The first one says pose and the second one says My profile. Let's go back to the browser and see how the application is rendering. So right now, this is how it is rendering, which, of course, isn't making a lot of sense. Everything would make sense once after we introduce routing. Locate this file called app routes dot Ts file. If you don't have this file, you have to manually create this file by yourself. And once you do that, we're going to introduce so called routes in the form of an array. Let's add one item. I'm going to say path as pose, and we're going to associate it with a component. In this case, whenever somebody visits a URL with pose as the path, we want to render pose component. And similarly, we're also going to introduce another route for profile, and this is going to render profile component. Save the file. And just to let you know, inside the main dot Ts file, we are actually bootstrapping the application. This is the starting point for our application. Anglo uses this bootstrap application to initialize the app and render the app component, which is the root component or the parent component that renders our application. So this corresponds to the app component dot HTML, which is currently displaying this component that we've just created Navigation. And we're also providing some config to angular, which would have the providers or any global configurations. Let's take a look at what's inside this. So provider router is a helper function provided by Angular to configure the router for the application. And it accepts an array of routes. Basically, your routing configuration and sets up all the dependencies required for routing in the app. This is all taken care automatically. I have never created these myself manually, right? When we are creating the project itself, I've asked Angular to configure routes as well, and it has done it for me. In case if you're configuring routes manually, then in addition to creating the routes file, you also need to specify this. So we have configured out routes, and that's exactly the path we want to use in the links as well. Here I'm going to say router link. This is going to be, guess what? Pose, this one, and this one is going to be profile. Whenever we enter a URL, with this path, angle would try to render the profile component. And if it is with this path, then it would try to render the post component. Let me save the file. But since we're using Router ink here, we need to import router module in this component. So in the navigation typescript file, let us also introduce outer module, save the file. And in our parent component, we're going to introduce something called Router Outlet. Router outlet acts as a placeholder in your application where the content of the routed components is dynamically loaded. So this is where Angler would try to render the routed components. And since we're using this, we need to input to module in the app component typescript file. Save the file. We should be able to see this component called navigation and this component is displaying the welcome message, as well as render these two links for which we have configured routes. By the way, we haven't populated anything in the profile component. Let's quickly do that. I think the default one works for now. Let's save the file and go back and see how the application is rendering. So this is how our application is rendering. If I click on pose, it has rendered the pose component and if I click on my profile, it rendered the profile component. So that's how routing actually works. We're going to delve deep into these concepts later on when we enter the main course. And of course, our application is not really looking visually appealing at the moment. That's because we haven't added this styling yet. Let me do just that and revert back to you. Okay, I have introduced styling for our application. Some of the styling went into the root component and some of it went into the navigation component. And ultimately, this is how our application is rendering. Do take a note that when I click one of these links, for example, if I click on my profile, the resulting URL has the profile as the path, and hence Angler is able to render the profile component. Also, Angler supports something called lazy loading, which means it doesn't download all the components that ever existed. It would download the components that are absolutely needed for the current view, which means as we interact with the application, new components would be downloaded on demand. This will improve the performance and improve the initial load time and so the customer experience as well. So components would only be loaded when the route is navigated too.