Angular Development

Third Rock Techkno, an Angular development company, caters to your requirement for developing interactive apps and web applications. Our professional experts with strong Angular web development experience ensure that the top notch-innovative features and design are implemented in your product. Being a leading Angular development company, we provide you with only the best-in-class Angular development services. Our tailored Angular development services can not only meet each of your criteria, but help your product secure its position amidst the tough competition.

Starting from ecommerce to healthcare - our extensive Angular development services can bring out the best through our enterprise-grade web development approach. If you are looking for an Angular development company with highly skilled professionals and cost-friendly packages, then our diverse industry-grade Angular development services should be your pick.

Our AngularJS Services

  • 1. Dynamic Web Application Development
  • 2. AngularJS App Upgrade and Maintenance
  • 3. Enterprise App Interface and Development
  • 4. Single Page Application using AngularJS
  • 5. Application Migration Services
  • 6. User Interactive Module Development
  • 7. Custom Widgets Development
  • 8. Custom AngularJS Development

Our Existing Clients

We cater to a diverse clientele spanning across various industries.

Why Choose Us as Your AngularJS Development Company

Experienced Developers

Our skilled Angular developers have rich experience in Angular web design and development. We build customized, creative, and highly-interactive Angular applications that meet the requirements of startups and SMEs alike.

Trusted Delivery Methods

Our AngularJS web development services are an optimum combination of quality and timely delivery. We employ the agile methodology to keep you in the loop. Throughout Angular web development and mobile development, we focus on delivering solutions that meet your business goals, timeline, and budget.

Competitive Rates

Our AngularJS website development services offer you the most competitive rates in the market. Our personalized services meet different budget needs of our clients from across the globe.

Transparent Work Approach

We are an ethical Angular development services company that is strongly guided by transparency, honesty and integrity. We ensure complete project visibility right from the time you approach us with your needs. We use email, phone, Skype, Slack, and other mediums for regular communication with our clients.

Customer Satisfaction

As an Angular JS development company , we thrive on the dedication of our developers, quality analysts, and project managers towards customer satisfaction. We deliver Angular web development and mobile development solutions that align with our clients’ needs.

Client Testimonials

Our WORK speaks louder than our WORD. Find out how we helped clients overcome challenges and succeed.

NINS

Third Rock Techkno's solution forms the heart of the research library and receives great reviews from scholars and experts. Their work integrates complex frameworks and features to offer everything researchers need. They are open-minded and worked smoothly with the academic subject matter.

Dr Daniel T. Michaels

RentalQ

Many thanks for your wonderful for help on this project. They took over the project from a different company that promised the world and couldn’t deliver. Since hiring Tapan, His team have communicated and worked above and beyond to help release the first version of RentalQ. We are now working on Version 2 and can see a long standing relationship in the works. There are no doubts that this is the team for any projects you are working on or starting.

Russell

Main Features of Angular Development

Simple & Expressive

Angular is a very popular web framework because of its simple and component-based architecture. It perfect for managing heavy web applications that contain a number of components and complex requirements.

Speed & Performance

Angular executes various web techniques like bundling, compression etc. These techniques decrease the load time of web pages. This improves navigation and enhances UX.

Flexible Development

Angular uses component-based architecture. This allows Angular web development professionals to easily build a fully extensible architecture of the web app. The developed components can be reused easily.

Simplified MVC Pattern

MVC is quite popular as it isolates the application logic from the user interface layer and supports a separation of concerns.

Cross Platform

Angular can be used for any platform from web applications, in Electron for desktop apps and in Ionic for mobile apps.

Significant Experience

As an established AngularJS web development company, we have rolled out 50 live web applications using AngularJS.

Recent Angular Development Blogs

27 Jan 2023 | 4 Min Read
Managing state in Angular, Which one is better: RxJS or NgRx Store

While building a large-scale application, state management helps to modularize applications, making code more feasible and readable. There are multiple libraries in angular for state management like NgRx, Akita, or NgXs. Still, RxJs provides simple state management techniques using RxJs. RxJs Observables * Observables are the core of RxJs which helps in implementing state management in simpler Angular Applications * Using observables it is easy to inform components about the updated states * Components can easily subscribe to the last state that the observable holds * Observables emit a new value each time it is subscribed by the component Let's have a look at the RxJS-based state management techniques, which are as below * Subject * BehaviorSubject Subject * Here first we are assigning value “1” to mySubject using mySubject.next(1). That will call both the subscribers and print consoles a and b. * Then we updated the value to be emitted to “2” using mySubject.next(2). That will again call both the subscribers and print consoles a and b. * Then we emitted one more value “3” to all the subscribers using the same mySubject.next(3). Which will again call all three subscribers and print consoles a, b and c BehaviorSubject * In the above example, we have a behaviorSubject with two subscribers and we are assigning three values to them. * Irrespective of the time when they are subscribed each subscriber gets the latest value of the behaviorSubject. * The output will look like this Here is the basic difference between the both of them. BehaviorSubject vs Subject The major difference between BehaviorSubject and Subject is that the former holds an initial value that can be subscribed to immediately whereas the latter does not. Let's have a look at the programmatic difference between both of them What is NgRx Store? It is basically Redux inspired state management technique for angular applications. Have a look at the below diagram which explains the detailed flow. State Management using NgRx store is basically a combination of the below techniques: * Store: The application’s latest state is maintained in the store and it is immutable * Selectors: Selectors help the components to get updates from the store * Reducers: Reducers are responsible for handling the transition from one state to another * Actions: Actions update the state of the store with the help of reducers * Effects:  Effects are the results of Actions. They are helpful to listen to particular action types and execute as soon as the action happens Use NgRx store in Angular Creating a store: * As the first step, you need to create a model of the book which will look like below. The file can be named book.model.ts * Then we will create one excel file to define the actions of the store. The file can be named book.actions.ts. The actions files will be under the Actions folder. * In the above example, we have defined one enum for the action constant. * Then we implemented the AddBookAction method using the NgRx Action class, which accepts two parameters: a type and an optional payload. * Now its time to create a reducer that will help with state transitions, so inside the reducers folder we can create series.reducer.ts file: * In the above reducer, we have created an initial state for the Book interface and a reducer function named BookReducer Which accepts a state and an action as input parameters. * If the action type is ADD_ITEM, it will return the state and the payload. Otherwise, it will only return the state. * For the last step, we need to create one model which will help to store the state of the whole application in a single space * That main state model will be named state.model.ts Registering store: The next step will be registering the store in the module file which will be the main app.module.ts file Using NgRx Store: After registration, you will be able to access the store in the app component as below * The above code shows the app.component.ts file of our example. * There, we have set book$ to a type of observable and subscribed to the store to get the books. * The addBook() function is responsible for dispatching new books to the store. Conclusion This article concludes that state management techniques should be decided based on the requirements and the scale of the application. For larger and more complex applications NgRx store is more suitable because it helps to provide a single store for global applications wide state whereas RxJS observables and services are for smaller tasks and applications managing local level states. Blog ref: https://dev.to/angular/simple-yet-powerful-state-management-in-angular-with-rxjs-4f8g https://dev.to/revanth_oleti/difference-between-subject-and-behaviorsubject-9g6 https://www.syncfusion.com/blogs/post/angular-state-management-with-ngrx.aspx

16 Jan 2023 | 3 Min Read
How to read local JSON files in Angular

In this tutorial, I am going to create a sample application to show how to use local JSON files in an Angular application. There are different ways to read local JSON files in Angular. we’ll see different ways to read local JSON files in Angular for example. It turns out there are at least a couple of ways to do it. I will mention the most common ones: 1. Using the import statement 2. Using Angular HttpClient Step 1: Create a new Angular Project Create an angular project using the CLI command: ng new json-read-example Step 2: Create a new JSON file under the assets folder We’ll create dummy JSON data files that will be containing a list of students. [ { "id": 1, "name": "Luca", "email": "luca@gmail.com", "gender": "male" }, { "id": 2, "name": "Lilly", "email": "lilly@gmail.com", "gender": "female" }, { "id": 3, "name": "Anna", "email": "anna@gmail.com", "gender": "female" }, { "id": 4, "name": "John", "email": "john@gmail.com", "gender": "male" }, { "id": 5, "name": "Mary", "email": "mary@gmail.com", "gender": "female" } ] Step 3: Methods for Reading Local JSON Files 1. Using the import statement One way to read a JSON file from the assets folder in Angular is to use the import statement in your component. import { Component, OnInit } from '@angular/core'; import * as studentData from '../assets/students.json'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.scss'] }) export class AppComponent implements OnInit { title = 'json-read-example'; data: any = studentData; ngOnInit() { console.log('Data', this.data); } } You need to add "resolveJsonModule": true in the compilerOptions of your tsconfig.json the file that is at the root of your Angular application. { "compileOnSave": false, "compilerOptions": { "baseUrl": "./", "resolveJsonModule": true }, "angularCompilerOptions": { } } 2. Using Angular HttpClient A second way to read a JSON file from the assets folder in Angular is to use the HttpClient Now let’s see an example of it. Import HttpClientModule in our root module. (app.module.ts) like below: import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { HttpClientModule } from '@angular/common/http'; import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, AppRoutingModule, HttpClientModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { } In this case, we simply subscribe to the Observable generated by Angular HttpClient and log the data in the console The HTTP protocol is utilized by the majority of front-end apps to connect with the server. When working with an application that uses Angular, we may make use of the HttpClient service available from the @angular/common/http package to read JSON files from an Angular application. import { Component, OnInit } from '@angular/core'; import { HttpClient } from '@angular/common/http'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.scss'] }) export class AppComponent implements OnInit { title = 'json-read-example'; studentData:any; url: string = '/assets/students.json'; constructor(private http: HttpClient) {} ngOnInit() { this.http.get(this.url).subscribe(res => { this.studentData = res; }); } } Display table view using the below file <p>Read Local JSON file student data using typescript HttpClient</p> <table id="student"> <tr> <th>Name</th> <th>Email</th> </tr> <tr *ngFor="let student of studentData"> <td>{{student.name}}</td> <td>{{student.email}}</td> </tr> </table> Some other way to read JSON file 1. use the fetch API 2. use angular jsonPipe Use the fetch API We use Javascript fetch API to retrieve our static JSON file. Which is available in all browsers. This is an example Angular 15 component that uses the Fetch API to read a JSON file: import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.scss'] }) export class AppComponent implements OnInit { title = 'json-read-example'; studentData:any; url: string = '/assets/students.json'; constructor() {} ngOnInit() { fetch(this.url).then(res => res.json()) .then(json => { this.studentData = json; }); } } Use angular jsonPipe This is good to know, even if it is not a way to read data from a JSON file. Angular JSON pipe is mostly useful for debugging and this pipe creates a JSON representation of a data value. The JSON pipe can be used as follows: <p>{{ data | json}}</p> Thank you everyone for reading the tutorial. I hope you enhanced your knowledge of Angular.

03 Jan 2023 | 4 Min Read
How to build Micro Frontend in Angular with Module Federation?

Micro Frontends are a way to build and deliver a large application as a composition of small, independent applications. This approach enables teams to work on their own codebases and deliver new features faster, while also making it easier to scale development. Module Federation is a way to implement Micro Frontends in the Angular ecosystem. It allows multiple Angular applications to share a common set of libraries and enables them to communicate with each other using a shared API. The benefits of this include: 1. Improved scalability: By breaking the frontend application into smaller units, it becomes easier to scale individual parts of the application independently. This can be particularly useful if different parts of the application have different scaling needs. 2. Enhanced maintainability: Decomposing the frontend application into smaller, self-contained units make it easier to understand and maintain the codebase. This can be especially useful in large organizations where multiple teams are working on the same codebase. 3. Faster deployment: Because microfrontends and module federation allows for independent deployment of different parts of the frontend application, it becomes possible to deploy changes to production more quickly. 4. Improved code reuse: Decomposing the frontend application into smaller units makes it easier to reuse code across different parts of the application. 5. Better team autonomy: By allowing teams to work on self-contained units of the frontend application, microfrontends and module federation can improve team autonomy and reduce dependencies between teams. Let's get started and create a small microfrontend. Before starting please make sure you have the following prerequisites * Have some basic knowledge of Angular and Angular CLI. * A system with NodeJs and Angular CLI already installed * Angular and Angular CLI needs to be atleast 14 or higher Angular's Module Federation team has conveniently provided a starter kit for this. So let's first clone their repo and download the dependencies with the following commands git clone https://github.com/manfredsteyer/module-federation-plugin-example.git --branch starter cd module-federation-plugin-example npm i In the project, if you have already noticed there are 2 folders in the project folder. One is shell and the other is mfe1. In this example, the 'shell' will be the host while mfe1 will be the microfrontend Inside mfe1 there is a flights module at projects/mfe1/src/app/flights that we will be going to load through the shell. You can individually serve them using ng serve shell -o and ng serve mfe1 -o to serve the application individually. Now, let's activate and configure module federation: Install @angular-architects/module-federation into them: ng add @angular-architects/module-federation --project shell --type host --port 4200 ng add @angular-architects/module-federation --project mfe1 --type remote --port 4201 This activates module federation, assigns a port for ng serve and generates the skeleton of a module federation configuration. Now, let's start configuring the microfrontend. Open the file projects\mfe1\webpack.config.js. This is where it is defined what you are exposing to the host. By default, you will be exposing the app.component.ts file. Instead, let's expose the Flights module. So replace the entire exposes object with exposes: { './Module': './projects/mfe1/src/app/flights/flights.module.ts', }, This is basically saying to expose the flights module to any hosts that use mfe1. Similarly, if you open the shell’s config file ‘projects\shell\webpack.config.js’ you will notice instead of exposes there is a remotes object. This basically says to the Host that there is a remote mfe1 which can be referenced in its router. Make sure that mfe1’s port is 4201 instead of 4200 remotes: { mfe1: 'http://localhost:4201/remoteEntry.js', }, This references the separately compiled and deployed mfe1 project. Now let's load reference the microfrontend in the shell’s router. Open projects\shell\src\app\app.routes.ts and add a route to the Micro Frontend { path: 'flights', loadChildren: () => import('mfe1/Module').then(m => m.FlightsModule) }, Please note that the imported URL consists of the names defined in the configuration files above. So depending on what you assign in expose object the import URL changes import('mfe1/Module'). You will notice a red squiggly line under 'mfe1/Module'. That is because the URL does not exist at the time of compilation. So to stop the Typescript compiler from complaining about it declare the module in the projects\shell\src\decl.d.ts file. declare module 'mfe1/Module'; Now everything is configured so now it's time to try it out. Serve both the shell and mfe1 in separate terminals ng serve shell -o ng serve mfe1 -o After a browser window with shell opened (http://localhost:4200), click on Flights. This should load the Micro Frontend into the shell. Also, ensure that the Micro Frontend also runs in standalone mode at http://localhost:4201. Congratulations! You've implemented your first Module Federation project with Angular! Now time for some tips and tricks You can dynamically load remotes directly in app.routes.ts rather than in the webpack.config.js So first, comment the remote mfe1 property in projects\shell\webpack.config.js. remotes: { // Comment this line: // "mfe1": "http://localhost:4201/remoteEntry.js", }, Then in the app.routes.ts use the function loadRemoteModule instead of the dynamic import statement: import { loadRemoteModule } from '@angular-architects/module-federation'; const routes: Routes = [ [...] { path: 'flights', loadChildren: () => loadRemoteModule({ type: 'module', remoteEntry: 'http://localhost:4201/remoteEntry.js', exposedModule: './Module' }).then(m => m.FlightsModule) }, [...] ] Restart both, the shell and the micro frontend (mfe1). The shell should still be able to load the microfrontend. However, now it's loaded dynamically. Conclusion Microfrontends are not for every application as it requires considerable time and effort not just to create and introduce it into your codebase but also to maintain it. It gets a bit more complicated when you want to have shared states and bidirectional data passing. In most small to medium size projects, the benefits do not outweigh the cost, but in most large-scale projects where you want to have independent teams managing parts of the project, it is highly recommended to implement Module Federation. This situation may change in the future as the Angular Module Federation team is working hard to make it much more accessible and easy to use. Additional Resources More examples for Module Federation https://github.com/module-federation/module-federation-examples More Advance Features https://github.com/angular-architects/module-federation-plugin/blob/main/libs/mf/README.md#example-️

Get in Touch

Is your mind buzzing with ideas?
Let us know about them!

Contact Us