Code Handbook

In JavaScript we have two types of data types, primitive types and objects. Whenever you define a variable in JavaScript, the JavaScript engine allocates a memory to it. Depending on whether the variable is an object or a primitive value such as string, number etc., it will be stored either in Stack or a Heap Data structure. let name = "Samson"; // this is stored on stack let obj = { "name" : "Roy", "age" : 35} // stored on Heap Any data type value which is immutable is stored on a Stack data structure since it’s size is known during compilation phase. [Read More]

How to Create Angular Component in a Specific Folder?

For creating an Angular component you can use the Angular CLI command,

ng g component component-name

For creating a component inside a particular folder, you need to specify it along with the component name.

ng g component folder-name/component-name

Note : If folder-name is not present, it will be created by Angular CLI inside the src folder.

Technology evolves at a breakneck pace over time, as do the issues that organizations, particularly those in the digital realm, face. A modern website design that can attract users’ interest will be one of the main problems in 2021. Users give you only 5 seconds for this, and if your website does not inspire them, they will instantly leave. How can I know whether my website has been updated? Are you able to increase lead generation and maintain a low bounce rate? [Read More]

How to Show Oval Profile Pic?

All you need to do is set the height, width and border-radius to the image.

Check our author page for demo.

How to Refresh Child Component in Angular? In one of our previous tutorials, you saw how to use Child components in Angular Material Tabs. We’ll use the same source code to see how to refresh child component. In the app we had developed it had two tabs, one for listing employees All Employees and another for adding New Employee. Once the user had added a new employee, it didn’t refreshed the employee list in the All Employees tab. [Read More]

How to Test Angular Application With Cypress? In this tutorial, we’ll see how to test Angular application using Cypress, a JavaScript End to End Testing Framework. It’s browser based testing framework which actually mimics the way a user tests an application. So, let’s get started. Getting Started For testing we’ll be needing an Angular application. For the sake of this tutorial, I’ll clone one Angular app from our previous tutorial on Angular Material Tabs. [Read More]

The revocation function was unable to check revocation because the revocation server was offline. I got the above error while trying to clone the repository from GitHub. I was trying to clone GitHub repository using GitHub desktop. The solution was to turn revocation checking off using git shell. git config --global http.schannelCheckRevoke false You can also modify the .gitconfig file from C:\Users\user-name to set schannelCheckRevoke to false. [user] email = your-email@gmail. [Read More]

What is Variable Hoisting in JavaScript ? Let’s try to understand Variable Hoisting in JavaScript with the help of an example. var a = 100; When the JavaScript engine begins to execute the above code, during the compilation phase it allocates a memory to the variable a. Not just variable a but to every variable in the JavaScript code a memory is assigned. During the execution phase it executes the code where it’s assigned a value of 100. [Read More]

mat-form-field must contain a MatFormFieldControl. I got an error while I was trying to add Angular material mat-form-field control. Here is how the template file looked: <mat-form-field appearance="fill"> <input matInput placeholder="Placeholder"> </mat-form-field> Here is the imports I had in the app.module.ts file. import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component'; import { HttpClientModule } from '@angular/common/http' import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { MatFormFieldModule } from '@angular/material/form-field'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, AppRoutingModule, BrowserAnimationsModule, HttpClientModule, MatFormFieldModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { } Solution The issue was due to not importing the MatInputModule in the app. [Read More]

Using Child Components in Angular Material Tabs. Let’s see how to work with different Angular child components inside mat-tab. What you’ll create Our app will have two tabs, New Employee and All Employees. We’ll create a form to add new employees in one tab and in the other tab we’ll list all the existing employees. Setting it up If new to Angular material tabs, first go through the following introductory Material Tabs tutorials. [Read More]