LEAD ENGINEER
BROADCOM(HCL PAYROLL)Kongsberg Digital
Development EngineerLead Engineer
HCL TechnologiesTECHNOLOGY ANALYST
INFOSYSAngular
Azure DevOps
GitHub
PostgreSQL
Trello
Slack
AWS
Google Cloud
Docker
VS Code
Kubernetes
Git
Jasmine
Karma
Thymeleaf
ExpressJs
Representational State Transfer (REST)
HTML
Webpack
Responsive Web Design
Bootstrap
Azure DevOps
Slickgrid
Angular 14
Continuous Integration and Continuous Delivery (CI/CD)
Cascading Style Sheets (CSS)
JavaScript
REST APIs
INT
SQL
HTML5
NgRx
XMPP
TypeScript
Front-end Engineering
Angular 16
Hello. So yeah. Hi. I'm Davosish Sahoo. I, uh, I have around 8 years of experience final. I started, um, doing as a Java developer in Infosys. So after a year in Java development, I have moved to front end development. So I have experience in Python JS and Angular JS and Angular 2 plus. I have worked in version 15 of Angular. The organization currently I'm working in is my 3rd organization, and here I'm working on on a all in just domain project. So here I'm working, uh, in Angular 15. The back end is in dot print. I have very, uh, slight touch into the back end also. I have done few things in dotnet. So, uh, we are using Azure DevOps. I have I am also maintaining the c three d pipeline. Uh, yep. The this is all about, uh, the current, uh, project of my and my
Okay. So, uh, my preferred method to man managing state in a Angular application would be NGRX Because, uh, with NGRX, what we can do is we can execute the immutable, uh, accents. Like, whatever accent we are executing, we can make sure that it is executed. Like, uh, for example, in the current project, we, uh, receive high amount of data, uh, from the back end. And with the data, we are plotting different kinds of graphs. Uh, also, we in the front end, we have a provision to change or modify the data, uh, accordingly. So, uh, let's say if we are, uh, doing some action which does a bulk change, let's say it adds a risk to all the data. So before we execute some other action, we need to make sure that this action is completed so that we are, uh, doing some action on a, um, on a data which is stable. So, uh, for that, we are using NGRX, uh, so that we don't get any conflict.
Okay. In Angular, uh, to ensure components communicate efficiently, there are multiple ways. Like, uh, if, uh, let's say there is, uh, the components have some relation, like, parent to child or child to parent. So with parent to child, if we want to pass some data, we can pass it with pass it from parent and we can receive it in the pet, uh, child with pet input decorator. Same way if we we want to pass some data from child to parent, uh, we can pass it with, uh, at output decorator to any 2 data event emitter. And we can omit that with get output decorator in the child. We'll use it back in the file. Uh, also, from, uh, parent child, we, uh, have view child, uh, so at view child decorator. With that, we can, uh, access the data in the n g v unit, uh, life cycle book. Uh, also, if let's say there is no relation to no parent to child relation or child to parent relation, we can use the service to exchange the exchange the data or, uh, have the data in the service and both parent and both sibling components or the components which doesn't have any deletion among them. They can access the the data which are, uh, stored in the service, provided it's a singleton service in the in those components.
Okay. To, uh, to create a custom form that you did in in your application, application. We can use reactive forms. So in the reactive forms, uh, whenever we are creating the form control, In in our form loops, whenever we are creating the form control, there we can pass the, uh, validators. So in that, we can we can pass the custom validator. Uh, that's the same ways we are passing, like, predefined validators, like, required. Right? So the same way we can pass the custom value that to the form.
Okay. To integrate it as to API, we can move the back. We just need, uh, STP client. So let's say, for example, uh, if it's, uh, standard and component, so we just want to, uh, in the main of TS, we can, uh, we can mention provide its TTP, uh, model. And in the component, we can access to some API. Uh, the API calls will normally, uh, normally be in services, uh, or it can be a comp it can be in components. So, uh, we'll have the SCTP client access to, um, in the component end services. So from there, it's good then.
so in this question we need to see the response which has a structure the response whatever we have we need to make sure the rule in the response is a string because again we are not converting if it is not a string the rule needs to be a string you
So the catchError will is giving every option 1 of
Okay. To create a highly reusable component library, uh, first thing we need to do is the components should be, like, in modular structure, it should do a single unit of task. We shouldn't burden each component with multiple unit of task. Every component should have single unit of task So that, uh, like, we'll have small components. And, uh, yep, with that, we can create a library. Yep. Yeah. That would, uh, make it reusable. Uh, also, stand alone components, uh, now are, uh, also a plus point, uh, making it making the components usually reusable.
So it's to handle exceptions globally in modularity, we can have the component too. So, uh, we can pass the exceptions. And in the component, we can have some checks, like, for what kind of exception. If there is some particular kind of exception and we are showing we want to show some particular information for that exception, uh, we can have we can have that in that component and also with some default information. Like, let's say there is some exception, uh, which some unexpected exception we are getting. So for that, we should show some default info index.
Okay. Uh, to, like, uh, leverage, see, uh, flex and grip structure in in angular, be it in angular or some other, uh, actually. So flex and, uh, grid structure is actually, uh, will actually give us easily uh, I mean, it is easy to create responsive design also. Uh, I mean, the functionality of GEDL is also uh, of the flex and grid structure is also very clean. So, uh, yeah, so we just need to, uh, mention, uh, that display flex and the, uh, flex properties, like the flex direction and, uh, like, flex. We have flex direction in there. So we can, uh, accommodate components if there is multiple components in it. Uh, we are showing in a single plate. If in a component, we are showing multiple information, let's say, table. So all those we can, uh, easily, we can accumulate with flex and click structure.