Is this you? As a journalist, you can create a free Muck Rack account to customize your profile, list your contact preferences, and upload a portfolio of your best work.
Claim your profile
Articles by Coding Indian
What is Tree Shaking? π³
Remove the Dead Code & Reduce the Bundle Size. Tree shaking is a process of eliminating the unused code that helps to reduce the bundle size. When the codebase grows, there is a huge chance that we may have ended up adding some extra code that is in the bundle but not used by the application itself. Such code is also known as Dead Code. Therefore, Tree shaking helps us to eliminate the Dead Code from our bundle. Tree shaking is performed when the bundle is created.
What’s new in Angular 15 (so far) ?
When you call your framework Angular.js, and than rename it to Angular, you can be sure, that some people will be confused. Angular had some raught path lately with the news that Angular.js is deprecated and dead. People understandably believed it, but Angular is actually far from being dead. The fourteenth version of the most framework-ish framework scores some major improvements. But today we will focus on the version fifteen that’s just around the corner.
Angular 14’s new inject function
Estimated reading time: 8 minutes What is the inject() function The inject() function takes an InjectionToken as a parameter and returns the value for that InjectionToken from the currently active injector. Basically, it’s another way to get a hold of a dependency other than using constructor injection. Here’s an example. Might seem like “it’s different, but the same”, but bear with me. You will see how powerfull this new mechanism really is.
Angular v14.2 – `src` to `rawSrc` | Coding Indian
In Angular v14.2 introduced a developer preview of an image directive optimized for performance! The best thing is that the Angular’s templating syntax and dynamic scoping allows you to take advantage of it just by *importing it in an NgModule/standalone component* and updating `src` to `rawSrc` Once you do that, we’ll start seeing improvements in Core Web Vitals plus suggestions for more optimal usage patterns 🔥 Finally, most of the code of the directive disappears at build-time since the...
Handle multiple API requests in Angular using mergeMap and forkJoin to avoid nested subscriptions
A guide on how to use mergeMap and forkJoin to avoid nested subscriptions when calling multiple APIs In this article, I will introduce two techniques to handle multiple requests in Angular by using mergeMap and forkJoin. Contents: Problem subscribe mergeMap forkJoin Combine mergeMap and forkJoin Performance comparison of subscribe vs mergeMap and forkJoin In the real world, we frequently call more than one API in our web applications.
How Caching Data in Angular with Rxjs
When we build an app, some data like the menu and options don’t change with frequency. The best approach is to cache it because when the user moves around the app, the data to the server again impacts the speed and user experience. Rxjs provide us with an easy way to build a cache and store it. Two operators make the magic happen, share and shareReplay, to avoid getting the data every time and avoid calculation. Example I have a simple app with two routes, home and about.
How to start a project on Angular the right way
How do you start a new project? ng new app and that’s it! Not anymore. If you want to make maintenance and development easier you should be sure to follow these steps. Create the project This one is straightforward. We need to create our app (where else would we be working, huh) ng new app . Install Husky We will need Husky for configuring our git hooks. We need them because they allow us to make automatic code modifications, linting, run tests etc.
Angular 13 Firebase Storage: Upload/Retrieve/Download/Delete File
In this tutorial, I will show you how to make Angular 13 with Firebase Storage Application: File Upload, Retrieve, Download, Delete using @angular/fire & AngularFireStorage. Files’ info will be stored in Firebase Realtime Database for Display/Delete operations.
How to upgrade the Angular version to the latest (version 13)
Angular is infamous for frequent version releases. The angular team tries to deliver at least two major versions in a year. If you are a web developer working with Angular since its version 2, then you must have suffered from the pain of version upgrade. Thanks to the Angular team, the version upgrade is smooth now (or is it?) if you keep upgrading your Angular project on regular basis. In this story, I will share a few important links, and tips on how to keep projects up-to-date.
LinkedIn Angular Assessment - Solution
Angular Q1. What is the purpose of the ViewChild decorator in this component class? @Component({ ... template: '<p #bio></p>' }) export class UserDetailsComponent { @ViewChild('bio') bio; } [x] It provides access from within the component class to the ElementRef object for the <p> tag that has the bio template reference variable in the component’s template view. [ ] It indicates that the <p> tag be rendered as a child of the parent view that uses this component.
Angular Form Validation With Reactive and Template-Driven Forms
In this tutorial, we’ll explore reactive and template driven-forms in Angular. You’ll see how to create each kind and how to perform validation in Angular 6. Reactive and Template-Driven Forms What Are Angular Reactive Forms? Reactive forms are also known as model-driven forms. This means that the HTML content changes depending on the code in the component. What Are Angular Template-Driven Forms? Template-driven forms are driven by derivatives in the template.
Angular 12 Ag-Grid Integration
https://www.youtube.com/watch?v=5YwFyHXQMIQ https://www.youtube.com/watch?v=-pMjvMtVNzk https://www.youtube.com/watch?v=RJhn86PK_kM
Hackerrank Angular Coding Interview – Stock Data | Coding Indian
API to hit JSON API URL : https://jsonmock.hackerrank.com/api/stocks?date=<date> Expected Outputs when result found Open: {open} Close: {close} High: {high} Low: {low} Expected Output when NO results found In case of no results render below div <div data-test-id="no-result">No Results Found</div> Environment Angular CLI Version: 10.0.4 Angular Core Version: 10.0.4 Node Version: v12(LTS) Default Port: 8000 Application Demo: Functionality Requirements The component must have the following...
Hackerrank Angular Coding Interview - Customer Records
Environment Angular CLI Version: 10.0.4 Angular Core Version: 10.0.4 Node Version: v12 (LTS) Default Port: 8000 Application Demo: Functionality Requirements The application has 2 components: The CustomerTable component, which displays the list of customers in a tabular form. The CustomerDetails component, which presents the full details of selected customer. The application has the following functionalities: Initially, the CustomerTable displays entire list of customers is a tabular format.
Building an Angular Application Structure
When building web applications from scratch there is always a simple question in mind: How can I structure my application? It’s often hard to find a suitable directory structure for a complete project from the beginning. Often there are company standards, one is inspired by other projects or just tries to figure it out by himself.
Conditionally Load a Module Using Angular Router
In most cases, a feature flag is used when creating a new version of an existing page rather than adding multiple conditions to our code. When this is the case, we usually prefer to use the same URL for both versions. Let’s examine how Angular Router can be used to get this done.
Multi-Step Forms in Angular 12
Forms with multiple steps are common in web applications, but they can be difficult to organize and manage the data. Using reactive forms in Angular, however, can be less painful. In this article, we’ll take a look at one way to manage multi-step forms in your Angular app. For this article, we’ll use an example form with multiple steps. This sample will have just two steps, but the principles here can be applied to forms with more steps as well.
Create PDF Viewer in Angular 12 with NG2 PDF Viewer
A comprehensive guide on implementing PDF viewer in Angular 12 application using the third party npm package ng2-pdf-viewer. The ng2-pdf-viewer is an excellent package exclusively built for creating PDF viewer components in angular applications. It supports angular greater than 5 versions, it a popular module for handling PDF-related tasks in angular; this plugin offers innumerable features for pdf implementation in angular.
Angular 12 Firebase CRUD Application
In this Angular tutorial, we are going to build a simple Angular 12 CRUD (Create, Read, Update and Delete) web app with Angular Material and Firebase real-time NoSQL database (version 6.0.2). We’ll take the help of Angular Material for creating beautiful UI components. We’ll be storing data on the cloud with the help of the Firebase NoSQL database. We’ll learn how to connect Firebase with the Angular web app. For the demo purpose, I will be creating a book store inventory CRUD web application.
Template Driven Form: Angular
Objective Add a Form with the following Inputs (and Validators) 1) Mail address (should not be empty and should be an email address) 2) A Dropdown which allows the user to select from three different Subscriptions (“Basic”, “Advanced”, “Pro”) Set “Advanced” as Default 3) A Password field (should not be empty) 4) A Submit Button Display a warning message if the Form is invalid AND was touched. Display a warning message below each input if it’s invalid.
Angular NgIf, Else, Then Explained
Using the *ngIf the directive allows us to simply toggle content based on a conditional. But is it as simple as we think? Not quite, the directive has a heap of helpful syntaxes that can help us deal with conditionals far better. Let’s explore the ins and outs of, and how we can utilize (the right way) in our Angular applications. Placing the *ngIf directive on a component, or element, will in fact hide or show that element based on the expression you pass it to be evaluated.
How to integrate data tables in Angular 12
In this post, let’s see, how to integrate data tables in Angular 12 application DataTables is a plug-in for the jQuery Javascript library. It is a highly flexible tool, build upon the foundations of progressive enhancement, that adds all of these advanced features to any HTML table. Create Project: Create a new project using angular CLI generator. using the following command to create new project. ng new angularDatatable Install Dependencies: Install the following dependencies using npm.
Show More
loading
Actions
Is this you?
As a journalist, you can create a free Muck Rack account to customize your profile, list your contact preferences, and upload a portfolio of your best work.Get in touch with Coding
Contact Coding, search articles and posts on X, monitor coverage, and track replies from one place.
Learn more about Muck Rack