Sreya Johnson

So this is Shreya. I've been working as a front-end developer for the past 6 years, so I have a very good experience with Angular. I started with Backbone JS, and then I switched to Angular. I've pretty much worked with all the versions of Angular starting from Angular 2. And, also, I have a pretty good experience with MuleSoft. So it is a middleware where we developed some middleware APIs. So unlike traditional languages like Java and the other languages, such as Python or.NET. So here, we just use components and build a UI API. MuleSoft is like a tool. It's similar to a tool, so I also have experience with that. I'm also looking to learn DSA, data structures and algorithms to ensure my code is well-versed. And, you know, it has a proper time complexity and space complexity so that it would help my project have great optimization instead of using optimized code. It would be a great opportunity for every developer to learn DSA and algorithms to use the best algorithms, so that it would be helpful in our project. So, that's all from my side. And, yes, my hobbies are reading books, watching TV shows, and dance. I also like organizing things. I organize events in my church. In my college, I used to organize events. So, that's how it is. Thank you. I also love Dan's a lot. Thank you.

Yeah. HTTP, Angular's HTTP client module, we are supposed to import the Angular HTTP client module from @angular/common/http and then inject it in our constructor by using a private keyword and then use the consume the APIs by using the alias name. For example, if you have, like, many REST API methods like the get method, put method, post method, and we are supposed to use the alias name this by just like this, http. Just consider HTTP as alias name. So we are supposed to give this.http.get and that URL. Or if it's a post, we are supposed to give the body request body, and similarly for put and delete. So that is about it.

So semantics in HTML. Semantics is in HTML and nothing, but, like, you know, the code, when we write, instead of using a div for everything, so if we use semantics will help us to know what we are using that div for. It would give the meaning of the div. For example, we have nav tag. We have section tag. We have nav tag. So all the navigation bar, the whole navigation bar is written in the nav tag. We have header, footer. Header information would be written in the header tag, and footer information would be written in the footer tag. The body, the body of the whole page, would be written in the body tag. So, articles, if you have some paragraphs or if you have some specific articles, that would be written in the article tag. So semantics will help. Semantics will, in the web, allow us to clearly describe the meaning of why we are using them. Yeah. We also have aside. Aside is like we put it, to one side of it.

So for structuring a large-angle project, we may want to make sure that we put all the services in a different folder, directives in a different folder, custom directives in a different folder, pipes in a different folder, and all the reusable components. For example, we have a home navigation bar. All these are like very common components. Right? So all these things should be written outside of the structure. So all are common things. For example, if you're considering a bank app, a banking application, we have payments. All the information related to the customer should be in a customer profile. We can create a folder called customer profile, and all the profile-related information should be inside it. And for example, if you have payments information, the customer payments information should be in another folder. So, based on the purpose of each component, the components should be structured, and we should also make sure that the global error handling is separate. For example, all the common components, like home and navigation and footer, would be outside, right, like header and footer. In the same way, the global navigation should be on the top, and all the common services which are used should be on the top side. And that would be the first side. And inside that, we have the components and

Things. Okay. So consider an angle snippet. Explain why this might not work as expected and how you would fix it. This code might not work as expected because we are using this Android input decorator for a parent and child relationship components. So it's in a parent component. So whatever, if for example this input is coming from the chain. So in for if we are getting something from the child, in order the parent component detect the changes, it should be put in the NG on changes life cycle hook. Here, it is written in the NG on its life cycle hook, so it may not detect it because the parent and child variables should have value changes detected only in NG on changes. So NG on changes will do the right life cycle hook to detect the change.

To ensure our designs are responsive on mobile first in CSS 3, it's all very important for us to make sure that the applications are mobile first rather than desktop first. Because if we code for mobile first, we don't have to change many things. Right? So to ensure that, we should use REM. We are using REM for using relative parameters. We are using percentages, pixels, and for font size and all, we may give not fixed font sizes. Yes. For a few of them, we are supposed to give REMs for margins and paddings, so that they would be dependent on relative parameters. And for fixed things, we are supposed to use pixels. We should also use media queries. Flexbox should be used. Flexbox will automatically arrange many responsive elements. For example, if you're using display flex or display grid, that would be great for using responsive designs.

So we are using an API, specifically the Git API, to get information by calling its GET method. One potential risk is that if we subscribe to the data but cannot unsubscribe, we may face a memory leak. To avoid this memory leak, we need to unsubscribe from the observable when we're done using the data. This is because an observable is designed to continuously emit data as a stream, and if we don't unsubscribe, this stream will continue to run indefinitely, consuming memory. Here is the corrected transcript text: So we're using an API, specifically the Git API, to get information by calling its GET method. One potential risk is that if we subscribe to the data but cannot unsubscribe, we may face a memory leak. To avoid this memory leak, we need to unsubscribe from the observable when we're done using the data. This is because an observable is designed to continuously emit data as a stream, and if we don't unsubscribe, this stream will continue to run indefinitely, consuming memory.

Explain the output of this code snippet and what does it signify, say, what the use of the. So the output of this string is equal to days of 1. The output of is, day name, it would be Sunday. So here, it is nothing, but here, they name is accessing the 1st element of days. So unlike the arrays, here we are, Here, we are giving the is like, one of the data types. So here, we are giving In TypeScript, it's one of the data types. So here, Sunday would be the first element, 1st element. So we are trying to get the 1st element from the day's. So that would be Sunday. So it's very easily written. So we Can we are also giving the value of the first, the Sunday as e equal to 1. So it would be 2 or 3 or 4. So we are starting it from 1. So the output of it would be Sunday. That's all.

So handling null and undefined in TypeScript. See, null is nothing, but we have values declared, and variables are declared, and it's given a value. So it's defined. It's all it's declared and also defined. But we are defining it, its value to null. We are not giving any 0, 1, or we are not giving any string value. We are not giving any integer value. Rather, we are giving a null value. So it has a value, but it's null. So unlike undefined, so if you go and see what undefined is. The value, the variable is declared, but it's not defined yet. It doesn't have a value at all. So that is called undefined. So it's not yet defined. So for example, in if you see the JavaScript hoisting, If you try to get a value, if you try to log a value of a variable even before it's initialized, Then what do you get? You get undefined rather than an error because hoisting in JavaScript would hoist all the elements in the JavaScript, all the variables, all the functions in the JavaScript. So we are getting an undefined. So it's not yet defined. So all the variables and all the functions, in the JavaScript code are picked up and allocated a space. They are allocated a space, but they are not yet defined, I mean, initialized. So that is called undefined. So null is they are defined, but there is no value. They are defined with the value null. Here, we see that is the difference between null and undefined.

So how do you ensure the secure communication between front end and APIs in Angular? So we ensure secure communication between the front end and APIs in Angular by using the HTTP client module in Angular. This is one of the live packages which we import from our node modules. We import it in our file, and we make sure that we import it in our services, and we call all the rest APIs of different methods with get and post and delete and put. This is how we ensure the secure communication between front end and APIs in Angular. So if we want to see the most secure connection, the better way to secure it is by using HTTPS, send SSL certificates, like secure socket layers and hypertext transfer protocol, so that's secure. It would be better if you use HTTPS and SSLs. And it would also be good to secure by implementing authentication and authorization. It would be great if we validate and sanitize the inputs and outputs. With Content Security Policy and HTTP Strict Transport Security, that would be great. Yeah. This is all how we secure our communication between front end and APIs in Angular.