Sreya Johnson

Sure. Um, 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 the backbone JS, and then I switched to Angular. I pretty much worked with all the versions of Angular starting from Angular 2. And, also, I have a pretty good experience with, um, um, with MuleSoft. So it is, uh, it is like a middleware, uh, where we, uh, developed some middleware APIs. So unlike the traditional languages like, uh, Java and the other, uh, Python or .net. So here, we just use the, uh, components and build a UI API. So MuleSoft is like a tool. It's similar to a tool, so I also have experience with that. So I'm also looking, uh, to well, I'm also I'm also learning DSA, uh, data structures and algorithms to make sure my code is well versed. Uh, and, You know, it has a proper time complexity and the space complexity so that it would help my project to have a great optimization instead of using on optimized code. It would be a great, uh, opportunity for every developer to learn, um, learn, uh, DSA and algorithms to use the best algorithms, uh, so that it, uh, it would be helpful in our project. So, yeah, that's all from my side. And, yes, uh, my hobbies are reading books, uh, watching TV shows and dance, and I also like organizing things. Um, I'm in, uh, organizing events. Yeah. I do organize events in my church. Uh, in my in my college, I used to, um, organize events. So, yeah, that is how it is. Thank you. And also Dan. I love Dan's a lot. Thank you.

Yeah. HTTP, uh, Angular's HTTP client module, we are supposed to import the Angular HTTP client module from Angular, um, from the node modules and then inject it in our constructor, uh, by using a private keyword and then, uh, use the consume the APIs, um, uh, by using the alias name. By, uh, for example, if you have, like, uh, we have many, um, REST API methods like, get method, put method, post method, and we are supposed to, uh, use the alias, name this by, um, just like this, like this dot h t t p. Just, uh, consider HTTP as Alia's name. So we are supposed to give this dot h t t p dot get um, and, uh, that URL. Or if it's a post, we are supposed to give the body request body, and similarly put and delete. So that is about it.

Okay. Semantics in HTML. So semantic is in HTML and nothing, but, like, you know, the code, uh, when we write, uh, instead of using a dev and p for everything, so if we use semantics, semantics will help us, um, help the person, uh, to know what, uh, for what we are using that div. So it would give the meaning of the div. For example, we have nav tag. We have section tag. Uh, we have, um, nav tag. Uh, so all the navigation bar the whole navigation bar is written in the nav tag. We have head there. We have footer. A header, the footer the, uh, footer information would be written in the footer tag, and header information would be written in the header tag. The body the body of the whole I mean, the the a whole page, the body of the whole page would be written in a body tag. So, uh, articles, if you have some paragraphs or if you have some specific articles, that would be written in the article text. So semantics will help. Semantic will, um, in the web, they allow us. Okay? They clearly describes the meaning, uh, of why we are using them. Yeah. We also have a side. Side is like we put it, uh, it, uh, it do some you know, to one side of it. Yeah. That's about the semantic

Uh, so for structuring a lot large angle project, we are may we should, uh, make sure that we are, uh, we should 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, uh, reusable components. So for example, we we have home, uh, navigation, uh, bar. All these are, like, um, footer. So all these are, like, very common, uh, components. Right? So all these things are should be, uh, written, like, outside of the structure. So all are common things. For example, um, if if you are considering a bank app, So banking application, we have the payments. So all the information related to the customer should be, Uh, customer should be in a customer profile. We can create a folder called customer profile, and all the profile related, Info information should be inside it. And, for example, if you have the payments information, the payments information should be all the customer payments information should be in other um, folder. So basic, uh, based on the based on the, um, based on the purpose of each Purpose of the components, the components should be, uh, structured, and we should also make sure that the global error handling should be out. For ex 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, uh, top top, and all the common services which are used should be on the top side. And the, um, that would be the 1st side. And inside that, we have the, um, we have the, uh, components and

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

What approach would you use in CSS 3 to ensure your designs are responsive on mobile first? So it is all always, uh, very important for us to make sure that the, uh, applications are mobile first, uh, rather than the desktop first. Because if in the mobile first, uh, we, uh, code for the mobile, so we don't have to change many things. Right? Uh, so for that, we should ensure that, uh, we are using REM. We are using REM, um, for we we are using the relative parameters. So we are using percentages, uh, pixels, uh, for For font size and all, uh, we may give, uh, not font sizes. Yeah. Uh, for few of them, we are supposed to for margins and paddings, supposed to give REMS so that they would be dependent, um, that that they're good at, um, like, relative parameters, uh, are used. And for fixed things, we are use we are supposed to use pixels. We should also use media queries. Flexbox should be used. Flexbox will, um, according to the You know, Flexbox will automatically arrange many, uh, responsive base. Uh, for example, like, flex, uh, flex, first. If you're using display flex or display grid, that would be great for, uh, using the response

Please explain what this code is doing and an effort and a potential problem. So this code is basically, um, uh, basically, uh, here we are using an API. So we are trying to get the information, uh, by calling an API of a Git API. Get API or REST API, like, uh, get method by using a get method, we are supposed to we are getting some information from the back end. So here, the potential risk is that if you are subscribing to the data so after, uh, getting the API, we are subscribing to the data but cannot unsubscribing it. So here we may, uh, face a memory leak. So in order to not, uh, face this kind of memory leak, we are supposed to unsubscribe whatever we are getting. So until we can use it, we can u we can get the data from the API. We can use and we can modify it and modify it, and we can use it for all our purposes which we need. But at the end of the day, we are supposed to, describe because we're here, it's an observable. So when we are subscribing to the observable, there would be continuous emission of data in because it's a stream of data is present in the observable, then stream of data would be continuously emitted from the observable. So in order to stop this continuous emission of the data from the observable, we are supposed to unsubscribe the observable to prevent the 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 is, uh, day name, it would be Sunday. So here, it is nothing, but here, uh, they name is accessing the 1st element of days. So unlike the arrays, here we are, Here, we are giving the is like, uh, 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 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, uh, 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 handling undefined in TypeScript. See, um, null is nothing, but, uh, we have the values defined, values declared, and variable is 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, uh, its value to null. We are not giving any 0, 1, or we are not giving any string value. We are not giving any, uh, integer value. Uh, rather, we are giving a null value. So it has a value, but it's null. So un unlike undefined so if you go and see what undefined is. The value, uh, the variable is declared, but it's not defined yet. It doesn't have a value at. So that is called undefined. So it's not yet defined. So for example, in, um, if you see the Java JavaScript hoisting, If you try to get a value, if you try to log a value of a variable even before it's it got, uh, 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 the JavaScript code are picked up and allocated a space. They are allocated a space, but they are not yet defined, uh, I mean, initialized. So that is called undefined. So null is they are defined, but there is no the value is null. They are defined with the value null. Here, we so that is difference between null and undefined.

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