DEV Community: Ankit Kumar Sharma

Hoisting in Java Script

Ankit Kumar Sharma — Mon, 11 Jul 2022 18:11:35 +0000

Nowadays, Java script is the most popular language in the world. If you are a fresher or experienced, then you should know, what is Java Script Hoisting?

In mostly technical interviews, that question frequently asked by interviewer but lack of knowledge, mostly guys don’t explain correctly. So, today I am explaining in very sufficient way.

Before hoisting, I am talking about, what is Global Execution Context?

Global Execution Context —

It is a process that run and contain the whole code and create a global scope for variables and functions in two phase

Memory Creation — This is a part of hoisting behaviour in java script, where global execution allocate memory to each variable and function
Code Execution — This is the part of execute that code will execute and allocate provided value to variables & functions if required, also this part can have inner sub execution context part for functions.

What is Hoisting ?

Hoisting is a process that access variables and functions before you have initialized or declared. It is a java script’s default behaviour of moving all declaration to the of the global execution scope.

Java Script create a global execution space for declare variable and function to allocate memory.

Variable hoisting

we can use a variable in code before it is declared or initialized. if we have not declared any value before use of that variable, it allocates undefined to that particular variable.

If we talking about variables and constants, keyword var is hoisted and let and const does not allow hoisting.

console.log(x) // undefined
console.log(y) // undefined
var x = 7;
var y;

Function hoisting

It lets you use a function before you declare it in your code, it works as function will defined as you have initialized it or whatever code will execute in that inner function.

xyz();  // output - xyz is calling...
console.log(xyz)  // output - function xyz(){...} 
function xyz(){
console.log("xyz is calling...");
}
console.log(xyz); // output - function xyz(){...}

What we learned above, about hoisting that works in global execution scope in two way that is variable and function. We know that each program has two parts variable & functions, that hoisting also work for both as same we explained above.

Let’s take one example for both part

We can see, hoisting works for both part in above example,

GitHub Source Code

Finally, today we learn about Java Script Hoisting, if you have any query for hoisting part, please comment on below section and I’ll try to resolve your query.

If you want to learn with me, please follow me on social accounts and also go through my website

https://www.ankitkumarsharma.com/

Also please follow me on GitHub , Twitter , Medium, and Dev for more updates on articles with hands on code queries.

Thanks, Happy coding life !

Angular Standalone Component — Future of Angular

Ankit Kumar Sharma — Thu, 07 Jul 2022 20:28:30 +0000

Today, we will discuss about the future of Angular, that is --standalone. It refers to components, directives, or pipes that can be used independently of NgModule.
Let’s create an application without NgModule.
First we need to install/update our angular-cli, then check version via cli ng version, then create your first project without NgModule.

You can create below components without NgModule part
Standalone Components
Standalone Directives
Standalone Pipes
You can also use lazy load standalone component

What is standalone component ?

Before Angular 14, each component is declared in any of module part, whatever it is appModule or any other module, but without creating module or declared in any other module, we couldn’t use of any component.
So after release v14, new feature added on this version that is we can use component as without declare in any module, that is called standalone component.
A component based arictecture with game changer for development as in NgModule part.

Creating standalone component

After create new project, you can create new standalone component by using cli command ng g c <componentName> –-standalone, after run this command, standalone component will be added on your project.
I am creating one component ng g c home --standalone.

import { Component, OnInit } from '@angular/core';
 import { CommonModule } from '@angular/common';
@Component({
   selector: 'app-home',
   standalone: true,
   imports: [CommonModule],
   templateUrl: './home.component.html',
   styleUrls: ['./home.component.scss']
 })
 export class HomeComponent implements OnInit {
constructor() { }
}

Import other useful dependencies as per your requirement

After create your component, you can use and add more things like pipe or any other directives/modules and use of it.
Like, I just import shared module and will use header component on this component.

import { SharedModule } from './../shared/shared.module';
 import { Component, OnInit } from '@angular/core';
 import { CommonModule } from '@angular/common';
@Component({
   selector: 'app-home',
   standalone: true,
   imports: [CommonModule, SharedModule],
   templateUrl: './home.component.html',
   styleUrls: ['./home.component.scss']
 })

Bootstrapping Standalone Component

After release Angular 14, it allow you that you can play to whole application with standalone component by bootstraping that component.
First, you have to go main.ts file
Replace your standalone component by appModule like this

platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.error(err));

replace this code with below code

bootstrapApplication(HomeComponent).catch(err => console.error(err));

After changed in main.ts, now you have to change in index.html file

<body>
   <app-root></app-root>
 </body>

replace this code with below code

<body>
   <app-home></app-home>  <!--your standalone component-->
 </body>

Github Source Code

So, Finally we learn about standalone component , how we can use and bootstrap in our application.

For more about it, will learn on next blog .

If you want to learn with me, please follow me on social accounts and also go through my website

https://www.ankitkumarsharma.com/

Also please follow me on GitHub , Twitter , Medium, and Dev for more updates on articles with hands on code queries.

Thanks, Happy coding life !

Conducted a free webinar on Angular Essentials for Corporate Folks

Ankit Kumar Sharma — Thu, 26 May 2022 17:45:54 +0000

I give a free webinar on Angular Essentials, that covered all basic topics from angular, and by this they learned angular and cleared about these below questions

what is Angular?
How we can start work on Angular?
How is career path in Angular?
Jobs in Angular.

In this webinar, folks learned about the following things:

What is Angular
Angular/NodeJS/ VS Code Installation
What is an API
What is a package.json
What is npm
What is git
Installing Angular CLI
Creating the first Angular application
Modules & Component in Angular
Data Binding in Angular
Directives (like *ngFor, *ngIf) in Angular
Pipes in Angular
Basic Routing
Creating basic service
API Integration for GET/POST Operations

All folks learned and enjoyed with totally coding part.

If you want to learn with me, please follow me on social accounts and also go through my website

https://www.ankitkumarsharma.com/

Also please follow me on GitHub , Twitter , Medium, and Dev for more updates on articles with hands on code queries.

Thank you

How to use multiple Environment Variables in Angular

Ankit Kumar Sharma — Sat, 07 May 2022 15:35:30 +0000

In this article, we will learn about different Environment Variables in different files.

First, when we create any angular application, so by default it have two environment files, which one is for dev, and another one is for prod.
But if we need to create more multiple environment files like QA, UAT, PROD, DEV etc and all files, we have different constant variables for API and other values.

Add more custom environment files with different values

For our different requirement, we have to create different files under environment folder like qa, uat, xyz etc.
we can add values as per our requirement.

I have created 3 environment files as per different requirement (dummy). You can create as per your requirement

environment.qa.ts // for QA Testing Part
environment.uat.ts // for UAT Testing Part
environment.xyz.ts // for client demo part

// we generated this file for UAT Testing Part
export const environment = {
  production: true,
  environmentName: 'UAT',
  apiUrl: 'uat.abc.com',
  paginationSize:'20',
};

Update Config Part on anjular.json file

In each angular project, there is a file angular.json that have config part and setup of project related information, so we have to add new environment files for use in our project
We can add new part under projects/architect/build/configurations

"uat": {
   "fileReplacements": [
  {
    "replace": "src/environments/environment.ts",
    "with": "src/environments/environment.uat.ts"
  }
   ],
   "outputHashing": "all"
 },
 "qa": {
   "fileReplacements": [
  {
    "replace": "src/environments/environment.ts",
    "with": "src/environments/environment.qa.ts"
  }
   ],
   "outputHashing": "all"
 },
 "xyz": {
   "fileReplacements": [
  {
    "replace": "src/environments/environment.ts",
    "with": "src/environments/environment.xyz.ts"
  }
   ],
   "outputHashing": "all"
 },

Ready Build for a custom environment

when your configuration part is ready, then you can create build for your respective environment as per your requirement by a flag — configuration run with ng build command.
for example.

ng build --configuration uat

GitHub Source Code

when build is ready, then you can publish your files as per respective environment.

Please give your respectve feedback, that will be helpfull for improve my article quality.

https://www.ankitkumarsharma.com/

Also please follow me on GitHub , Twitter , Medium, and Dev for more updates on articles with hands on code queries.

Thanks

Component Interaction in Angular

Ankit Kumar Sharma — Fri, 15 Apr 2022 14:04:14 +0000

Hello guys, I am writing my first blog on Angular. As we know, Angular is a module-component based frontend-end framework.

By this tutorial, you can learn, how we can share data between component in Angular in different way. I am providing those way then you can understand easily.

Communication through Parent Component to Child Component (Input Decorator)
Communication through Child Component to Parent Component (ViewChild Decorator)
Communication through Child Component to Parent Component (Output/EventEmitter Decorator)
Communication through Sibling Components (As a service)

Communication through Parent Component to Child Component (Input Decorator)

**
Most common way to introduce data share via Input decorator that allow data to passed via template with data binding. Here, data list sharing via parent component to child component. I am showing a data list via this way.

parent.component.ts

@Component({
  selector: 'app-parent',
  template: `<app-child [data]="dataList"></app-child>`,
  styleUrls: ['./parent.component.scss']
})
export class ParentComponent implements OnInit {
  public dataList: ParentDataList[] = PARENT_DATA_LIST;
  constructor() { }
  ngOnInit(): void {
  }
}

child.component.ts

@Component({
  selector: 'app-child',
  template: `<div class="table-responsive">
  <table class="table">
    <tr>
      <th>Id</th>
      <th>User ID</th>
      <th>Title</th>
      <th>Body</th>
    </tr>
    <tr *ngFor="let item of data">
      <td>{{item.id}}</td>
      <td>{{item.userId}}</td>
      <td>{{item.title}}</td>
      <td>{{item.body}}</td>
    </tr>
  </table>
</div>`,
  styleUrls: ['./child.component.scss']
})
export class ChildComponent implements OnInit {
  @Input() data!: ParentDataList[];
  constructor() { }
  ngOnInit(): void {
  }
}

Communication through Child Component to Parent Component (ViewChild Decorator)

**
ViewChild decorator , we can passed data via child component to parent component. When we inject ViewChild into parent component, then it give access to parent with it’s variables and functions, then we can use as per our requirement. I am trying to add list via this way.

parent.component.ts

@Component({
  selector: 'app-parent',
  template: `<button class="primary-btn" (click)="addList()">Add List</button>
<app-child></app-child>`,
  styleUrls: ['./parent.component.scss']
})
export class ParentComponent implements OnInit, AfterViewInit {
  @ViewChild(ChildComponent) child!: ChildComponent;
  constructor() { }
  ngOnInit(): void {
  }
  addList(){
     let obj = {
        id: 1,
        userId: 123,
        title: 'ankit',
        body:'every thing mcm complrter'
      }
     this.child.arrList = [...this.child.arrList, obj];
  }
  ngAfterViewInit(){
    this.child.showList(true);
  }
}

child.component.ts

@Component({
  selector: 'app-child',
  template: `<table *ngIf="collapseList" class="table">
  <tr *ngFor="let item of arrList;let i=index;">
    <td>{{item.id}}{{i}}</td>
    <td>{{item.userId}}{{i}}</td>
    <td>{{item.title}}{{i}}</td>
    <td>{{item.body}}{{i}}</td>
  </tr>
</table>`,
  styleUrls: ['./child.component.scss']
})
export class ChildComponent implements OnInit {
  public collapseList!: boolean
  public arrList:DataList[] = [];
  constructor() { }
  ngOnInit(): void {}
  showList(value:any){
    this.collapseList = value;
  }
}

Communication through Child Component to Parent Component (Output/EventEmitter Decorator)

Output decorator, This is the another way to share data from child component to parent component via event emitter, as in emit data from the child component to parent component. It works like a event binding in angular. We can share data on any type of event occur via this way like on change, on click etc. I create a small addition/multiply/subtraction/divide functionality by this way.

parent.component.ts

@Component({
  selector: 'app-parent',
  template: `<div class="row">
  <div class="col-md-2">
    <input #text1 (change)="text1Data(text1.value)" type="number" value="0" class="form-control">
  </div>
  <div class="col-1">
    <h2 class="ak-title-lg">{{optSymbal}}</h2>
  </div>
  <div class="col-md-2">
    <input #text2 (change)="text2Data(text2.value)" type="number" value="0" class="form-control">
  </div>
  <div class="col-md-1">
    <p class="ak-title">=</p>
  </div>
  <div class="col-md-3">
    <input type="text" class="form-control" [value]="result" disabled>
  </div>
</div>
<app-child (btnClick)="operationClick($event)"></app-child>`,
  styleUrls: ['./parent.component.scss']
})
export class ParentComponent implements OnInit {
  public inputValue1: number = 0;
  public inputValue2: number = 0;
  public result: number = 0;
  public optSymbal:any;
  constructor() {}
  text2Data(value: number) {
    this.inputValue2 = value;
  }
  text1Data(value: number) {
    this.inputValue1 = value;
  }
  ngOnInit(): void {}
  operationClick($event: any) {
    this.optSymbal = $event;
    switch ($event) {
      case OPERATION.addition:
        this.result = this.inputValue1 + this.inputValue2;
        break;
      case OPERATION.subtract:
        this.result = this.inputValue1 - this.inputValue2;
        break;
      case OPERATION.multiply:
        this.result = this.inputValue1 * this.inputValue2;
        break;
      case OPERATION.division:
        this.result = this.inputValue1 / this.inputValue2;
        break;
      default:
        break;
    }
  }
}

child.component.ts

@Component({
  selector: 'app-child',
  template: `<table class="table">
  <tr class="row">
    <td class="col-md-3 col-6" *ngFor="let item of btnArr;let i=index;">
      <button class="primary-btn" (click)="changeData(item.opt)">{{item.title}}</button>
    </td>
  </tr>
</table>`,
  styleUrls: ['./child.component.scss']
})
export class ChildComponent implements OnInit {
  @Output() btnClick:EventEmitter<any> = new EventEmitter();
  btnArr = BTN_OPERATION_ARR;
  constructor() { }
  ngOnInit(): void {
  }
  changeData(value:string){
    this.btnClick.emit(value);
  }
}

Communication through Sibling Components (As a service)

In this way, we can use multiple scenario like via RxJS, get/set methods and more ways. I am explaining here via getter/setter methods, with RxJS BehaviorSubject will discuss in next blog. So I am trying to show and hide a data via service method.

sibling1.component.ts

@Component({
  selector: 'app-sibling1',
  template: `<p>sibling1 works!</p>
<h2 class="ak-title">This is a <span [ngClass]="{'true': show_flag, 'false': !show_flag}">{{show_flag ? 'True':'False'}}</span> condition</h2>
<a class="primary-btn" routerLink="child">Go to child >>></a>`,
  styleUrls: ['./sibling1.component.scss']
})
export class Sibling1Component implements OnInit {
  show_flag:any;
  constructor(private dataService: DataService) { }
  ngOnInit() {
    this.getData()
  }
  getData(){
    this.show_flag = this.dataService.getData();
  }
}

sibling2.component.ts

@Component({
  selector: 'app-sibling2',
  template: `<button class="primary-btn" routerLink="/">Back</button>
<app-contact [data]="contactData"></app-contact>
<p>child works!</p>
<button class="secondary-btn" (click)="changeCondition()">Change Condition</button><br><br>
<a class="primary-btn" routerLink="/service-based"> <<< Go to Parent</a>`,
  styleUrls: ['./sibling2.component.scss']
})
export class Sibling2Component implements OnInit {
  contactData = CONTACT_HEADER;
  constructor(private dataService: DataService) { }
  changeValue:any;
  ngOnInit() {
    this.changeValue = this.dataService.getData();
  }
  changeCondition(){
    this.changeValue = !this.changeValue;
    this.dataService.setData(this.changeValue);
    alert('Done, Now click on Go to Parent');
  }
}

data.service.ts

@Injectable({
  providedIn: 'root'
})
export class DataService {
  public isEnable: boolean = false;
  constructor() { }
  // we are communication data between two component via service -- getter/setter method
  //-----------------------------------------------------------
  // setter method
  setData(data:any){
    this.isEnable = data;
  }
  // getter method
  getData(){
    return this.isEnable;
  }
}

If you have any query or doubts, please quick add comment, will try to resolve your query.

GitHub Source Code
Demo

https://www.ankitkumarsharma.com/

Also please follow me on GitHub , Twitter , Medium, and Dev for more updates on articles with hands on code queries.