Bharath Jayachandran

Yeah, myself Bharath and I am from Chennai. My total years of experience is 4.8 years in the IT industry and 4.5 plus years of experience as an Angular developer. I started my career in 2019 Jan in TCS as a front-end developer and after 3.6 years of experience, I just moved from TCS to X server technologies as a senior software developer in front-end in the same Angular technology. I am more looking for the projects like Angular which is fully front-end position and I am just wanted to work in the very unique projects and there is a start-up so I am just looking forward to work like a company called Aplus so it's my pleasure to be attending this interview and more than me like, I am just currently concentrating to build a good relationship with the team as well as the company so yeah thank you so much.

2-way data binding is nothing but in angular we are having data binding which is used to know used to know send the data from the component to the template so 2-way data binding is nothing but either you can able to update from either to 2-way from the view to template and template to the view I mean component we can achieve by it's by using ng model so by using that ng model we can able to achieve the 2-way data data binding

So, basically Angular's HTTP client module and which is used to know to have the interaction with the backend to get their data in the service. So these HTTP client module will having the, you know, some method called, you know, get method, put method, update, delete. So these are the some basic method with that HTTP client is having. In case if I want to get the data from the backend, like whether it is Java background or it is Node.js, something like that. So with this HTTP client I can able to use that method called get. So with that URL, whatever that endpoint I need to use through that I can able to access. So by this way I can able to easily consume the, you know, APIs, API call by using the HTTP client module in Angular and I need to import this HTTP client module in app.module and then the service which I am going to call that get method. So there I need to import and also by using the constructor I can able to inject this HTTP client by using that data, by using this I can able to easily call the API call.

Yeah, actually this code snippet is using HTTP client to make an HTTP call, yeah right. So on the top, we are imported that HTTP client from the node modules at angular slash common slash HTTP, from that location we are using that HTTP client. So in the constructor, we are injecting that HTTP client. So that to, so like you know, the private I will be having one variable HTTP and colon that imported thing HTTP client class we have imported. So this is called dependency injection actually. So we are dependent to the, we are dependent through the HTTP client, yeah. So in the on init is called this.http.get. So this.http.get is nothing but in HTTP client, we having the some method to call the API or update the API. So this method.get is nothing but to get the data from that api.example.com slash data from that URL, we are going to get the data, okay. And then it is subscribing that method. So this data is comes, I think this data will comes from that observable. So we are going to subscribe the data. So once it got subscribed, that data will be populated in the particular method called ngOnInit, okay. So after that, by using that arrow function, they are using console.log of data. So they are logging their data by using console.log. So it is nothing but you know, it is used to, this code will used to get the data from the, that particular URL using observable and printing in the console, that's it. A potential problem is like, I am not sure whether this will be a service or something like that. So here they are subscribing, right. So if it is an observable, if it is an observable that we have in our service, service means we can able to reuse this method of the get method throughout the component. But I think this is directly called ngOnInit. So the very first time of the load itself, this data get, getting loaded. So it have some problem. But by using the service, we can easily overcome this through anything because if you are using that HTTP client, if it is service means we can use that injectable decorator and all. So yeah, first I explained that what it is doing, next it will have some issues to make this call properly. Thank you.

Explain dry principles. I think this dry principle is nothing but you know, don't repeat yourself. So, if you are, you know, in CSS 3, dry principle is nothing but like we are using some classes to be performed, some styles, some colors to be performed in that application, right? So, in previous, you know, we can repeating the classes or that, you know, the colors, something like that, but while introducing CSS 3, we can use that by using a dry principle is nothing but we can have, we can have some common class or something like that. So, by creating any variables for some particular color. So, we don't want to call each and every time of the class will be called. So, these kind of things will be applied in CSS 3, like mixins and all that. So, we can use it at mixins, some common class. So, we can reuse that whatever the style implied to that mixin, we can able to reuse that. So, we don't want to, you know, we don't want to repeat ourselves. So, that's what.

Talk us through the process of how would handle an error page in Angular, what are the things you can say? Okay. So there are many things in Angular applications will handle, like we need to check the routing, we need to check the data, whether it is coming from API, the right format or not, right? So for all the things we need to handle in the common way, right? So we are having something called HTTP interceptors. So this HTTP interceptors by using some CLI command we can able to create this interceptor, okay? So in that interceptor we are having some method called intercept. In the intercept we can able to check whether all the API response or updation will happen properly or not. If that is not happening properly by using this, you know, by using this intercept method we can do some logic perform, we can able to show that error is in the console or alert somewhere itself. So we can able to use the error, we can able to handle this error by using this HTTP interceptor concept for that API console. If you want to use this, we need to intercept by in the app.module, in the app routing, we need to use the providers, use class, some stuff we need to import in that app module, these things we need to do. So generally HTTP interceptors will be helpful for that handling the error.

Consider an angular application with that following codes input in the computed file. So, actually this code will performing at input decorator first name by using same at input decorator last name which is basically generally used in angular application to communicate the data from the parent to child. So here in ngOnInit they will be providing void using void and this.fullname. So this.fullname equal to they are using template literals using dollar this.firstname and this.lastname. By using the template it will be can able to know can able to data bind very easily and it will be you know we cannot able to use any operators and all and why this code might not work. First I think know this.fullname this.fullname is not declared anywhere ok. So if you want to use this means so this will see the window so in that window whether it is full name will be declared or not I hope so this.fullname is not declared. So and this.firstname this.lastname it will not assign to that.fullname since it is not declared yet right and also it is using ngOnInit is void. So first we need to declare the full name and we need to check whether in the child class we are passing the first name and last name no we are using that first name last name in the child component that we need to check. So these are the things we need to basically check this full name we need to declare properly and then we can able to use if you want to console we can easily console.log by this.fullname we can see what is the first name and last name. I think basically it will be that know it will be the input. So in that parent thing we are having some input box that ngModel will be this first name or last name and while typing here this should display but we need to know we need to we need to initialize that variable called full name that is a matter and I do not think ngOnInit we need to use void I do not need to can use any or something like that because since it is just an on typing some input that data is coming from the parent. So no we do not need to voice no need to use void and all so yeah that's it.

I will explain the output of this code strip and what it signifies about the size of the The significant like, you know, enum is a convenient feature offered by the TypeScript actually, so which allows you to specify some possible property, you know, some property value as a predefined set. So here you know, here enum days Sunday equal to 1. So we are going to know predefined something in that object, right? So we can predefine some set of values using some proper names or some useful or meaningful names in TypeScript. So, you know, like instead of having or using some numeric constant, so we can use this kind of objects in TypeScript. So days of 1 the day name will be no string e.txt days will be days since it is an object, we need to call it by days dot. If it is a days dot, Sunday means it will print 1, days of 1, it will throw an error or something like that.

Like the process of handling null and undefined in TypeScript. See in case I just want to you know like if I want to define a value to null for some variable which is at initially it will be null ok. Undefined is nothing but I am just define that no I am just initialize the value, but I am not defined to some value let us say if I using let A equal to null mean that A will be defined as a null, the A will be defined as a null. In case if I just using let A I am not using I am not initialize any value means then it will be comes under that undefined ok. So, if you want if you want to specify something will be comes under the null. So, we can directly by equal to we can we can we can we can tell that null ok. In let us say if I am getting some value from the back end if I if I am doing some condition based check. So, if condition equal to equal to null. So, at the time it will be very you know can able to easily handle whether the data will be there or it is comes under the null. So, for both both the thing we can able to handle in the TypeScript and also in the undefined whether it got defined or not. Generally, if it if it if it is not defined it will comes under that undefined. So, when compared to JavaScript in TypeScript we can easily handle these these null and undefined.

Actually, in RxJS, you know, I mostly used RxJS in services, so to get the data by using the observable for the continuous data transformation to subscript the method. So for that, I will use RxJS and, you know, if I can able to use the some operators to be performed like map, filter, reduce, everything I can able to do in that services which comes under that RxJS operator itself. So to manage state between different components, like in case if I want to send that, share the data between two unrelated components or something like that. So first I will use that subject, like we are having many subject like behavioral subject, replace subject, these kind of subjects we are having in RxJS, ok. So I can able to initialize some value in the behavioral subject at the beginning, whereas in the subject we cannot able to initialize that value. So by using the next method in the RxJS subject, I can easily transform the data to the unrelated component as well as to the different components as well as. So these kind, so these things are happening in that RxJS. So yeah, I think I covered most of the things in RxJS concepts also. So which is helpful in the…