DEV Community: Deepa Chaurasia

Angular Interview Coding Question

Deepa Chaurasia — Fri, 24 Nov 2023 09:29:29 +0000

How to share data between sibling components in Angular?

Let's say you have a component called First. Inside first component you have a button named increment.

There's another component second , inside this you have a variable named count=0 .

Now what interviewer wants if you click on increment button in first component , the count variable must increment in second component and reflect the same.

How you will achieve it???

import 'zone.js/dist/zone';
import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { bootstrapApplication } from '@angular/platform-browser';
import { AppService } from './app.service'

@Component({
  selector: 'my-first',
  template: `
    <h1>First</h1>
    <button>Increment</button>
  `,
  standalone: true,
  imports: [CommonModule],
})
export class First {
  name = 'Angular';
}

@Component({
  selector: 'my-second',
  template: `
    <h1>Second</h1>
    <h2>{{count}}</h2>
  `,
  standalone: true,
  imports: [CommonModule],
})
export class Second {
  count: number = 0;
  name = 'Angular';
}



@Component({
  selector: 'my-app',
  standalone: true,
  imports: [First, Second, CommonModule],
  providers: [AppService],
  template: `
    <h1>Hello from {{ name }}!</h1>
    <a target="_blank" href="https://angular.io/start">
      Learn more about Angular
    </a>
    <my-first></my-first>
    <my-second></my-second>
  `,
})
export class App {
  name = 'Angular';

  constructor(private appService: AppService) {
      console.log(this.appService.getData())
  }
}


bootstrapApplication(App);

Here's the code .
Link to Question -https://stackblitz.com/edit/stackblitz-starters-bxdzcr?file=src%2Fmain.ts

Answer :

There could be multiple approaches to achieve the same . But what i find easiest is through services.

Services in angular is used to establish a communication between the components who don't have parent child relationship and are completely different.

Here in above interview question first and second both are sibling components. Therefore you will use service here.

First you will create a service (i.e app.service.ts) here.
Second you will create two methods inside it, one is to get updated data (i.e getData()) , then the increment the count number that will be shared between two sibling component. We will create incrementData() method for this.
Now you will have to create a subject count , that you are going to subscribe to get updated value every time increment button is clicked.

Subjects are the kind of observable that gives you updated value consistently after every change. You can call next method to get updated value.

_That's how your code should look like _

import { Injectable } from '@angular/core';
import { Subject } from 'rxjs';

@Injectable()
export class AppService {
  constructor() {}

  count = new Subject<number>();

  incrementData(count: number) {
    this.count.next(count);
  }

  getData() {
    return this.count;
  }
}

Now in first component you have to create a method that will call on every click of increment button.

Remember first step is initialise service inside constructor and then use it later to access service method

@Component({
  selector: 'my-first',
  template: `
    <h1>First</h1>
    <button (click)="incrementData()">Increment</button>
  `,
  standalone: true,
  imports: [CommonModule],
})
export class First {
  name = 'Angular';
  count: number = 0;

  constructor(private appService: AppService) {}

  incrementData() {
    this.appService.incrementData(this.count++);
  }
}

Now in Second Component you have subscribe to the subject created in service and update value

@Component({
  selector: 'my-second',
  template: `
    <h1>Second</h1>
    <h2>{{count}}</h2>
  `,
  standalone: true,
  imports: [CommonModule],
})
export class Second {
  constructor(private appService: AppService) {
    this.appService.getData().subscribe((data) => {
      console.log(data);
      this.count = data;
    });
  }
  count: number = 0;

  name = 'Angular';
}

That's how you will do it .

Full code for answer is here :https://stackblitz.com/edit/stackblitz-starters-gv2eui?file=src%2Fmain.ts

Let me know if you have more ways to do it in comments.

Thanks for reading, do share if it helps you

How child component communicate with parent in React???

Deepa Chaurasia — Wed, 22 Nov 2023 08:50:06 +0000

In that case we used reference to method as props to child component

Let's create a Parent component first

Here you have to notice few points

First you will create a parent component with constructor
Within the constructor you set a state called parentName with value Parent
Next define a method greetParent() which alert hello with the parentName initialized.
In the constructor you will assign this.greetParent to this.greetparent.bind(this)

Now you will create child.component.ts

We are not using state here therefore we can use a simpler component here.

Here you will just add a button "Greet Parent"

Back in parent component , you will include child component in render method .Make sure to import component at top.

You will render parent component in app.js

After running you will see

But nothing will happen if you click the button.

In ParentComponent render method you are going to add child attribute named greetHandler. And to this we assign greetParent().

In child component on click of button we call props.greetHandler.

When you click button you will see alert like this

Now we will see _how to pass a parameter when calling a parent method from child component and this is where an arrow function in the return statement is really useful_

Array function syntax is the simplest way to pass parameters from child component to parent component.

This is how you will change your child component to achieve this

In parent component you will receive props like this and change alert method

After this you will see the message like this while clicking on send button.

What is Change Detection in Angular?

Deepa Chaurasia — Sat, 27 May 2023 13:28:54 +0000

Change detection is *detecting changes in any component * of your app and re-render view, so it displays updated value to end users.

Different events on which change occurs:

Data received from network requests or component events.
Mouse clicks,scrolling,mouseover,keyboard navigation
AJAX Calls
Use of timer function such as setTimeout() or setInterval().

How does Change detection work??

Whenever something triggers a change.
To detect and update DOM with changed data,the framework provides its own change detection detector for each component.
The change detector make sure data model and DOM are in sync.
When Angular change detection detects the triggered change and run change detection to all component tree from top to bottom.

Angular Change Detection strategies

There are two strategies basically in angular:-

Default Change Detection Strategy
OnPush Change Detection Strategy

Default Change Detection Strategy

If Angular Change Detector is set to default then for any change in any model property, Angular will run change detection traversing component tree to update DOM.

Change Detector Ref class provides few built in methods , we can use to manipulate change detection tree.

markForCheck() - marks that it changed.
detach() - exclude view from change detection tree
detect Changes() - check view and its child component
checkNoChanges() -check view and it's child ,throw error if changes detected.
reattach() - reattach a view that was previously detached

Angular OnPush Change Detection Strategy

If angular change detector is set to onPush then Angular will run change detector only when new reference is being passed to component.

If observable is passed to onPush, then changeDetector must be called manually to update DOM

Benefits

Unnecessary check in child not performed if parent element updating values which are not passed @Input

Here we have changed strategy to OnPush

Hope it help you guys :)

Please like share and subscribe if you like it

Request and Response Interceptors in JS

Deepa Chaurasia — Sat, 27 May 2023 13:27:12 +0000

Interceptors work as a wall between client and server.

Whenever a request is sent from client to server we can do all kind of processing like changing header,or any operation that can be done in interceptor.

After that interceptor will carry forward the request to the server

Similarly in response interceptor we can check whether the server is sending right response,will check status code if user is authorized or not and then we can do different type of actions as per our requirement and return back those response to client

Directive Composition API

Deepa Chaurasia — Mon, 15 May 2023 13:02:17 +0000

The directive composition API lets you apply directives to a component's host element from within the component TypeScript class.

Adding directives to a component

You apply directives to a component by adding a hostDirectives property to a component's decorator. We call such directives host directives.

In this example, we apply the directive MenuBehavior to the host element of AdminMenu. This works similarly to applying the** MenuBehavior** to the element in a template.

@Component({ selector: 'admin-menu', template: 'admin-menu.html', hostDirectives: [MenuBehavior], }) export class AdminMenu { }

When the framework renders a component, Angular also creates an instance of each host directive. The directives' host bindings apply to the component's host element. By default, host directive inputs and outputs are not exposed as part of the component's public API. See Including inputs and outputs below for more information.
Angular applies host directives statically at compile time. You cannot dynamically add directives at runtime.
Directives used in hostDirectives must be standalone: true.
Angular ignores the selector of directives applied in the hostDirectives property.

Including inputs and outputs

When you apply hostDirectives to your component, the inputs and outputs from the host directives are not included in your component's API by default. You can explicitly include inputs and outputs in your component's API by expanding the entry in hostDirectives:

@Component({ selector: 'admin-menu', template: 'admin-menu.html', hostDirectives: [{ directive: MenuBehavior, inputs: ['menuId'], outputs: ['menuClosed'], }], }) export class AdminMenu { }

By explicitly specifying the inputs and outputs, consumers of the component with hostDirective can bind them in a template:

<admin-menu menuId="top-menu" (menuClosed)="logMenuClosed()">

you can alias inputs and outputs from hostDirective to customize the API of your component:

@Component({ selector: 'admin-menu', template: 'admin-menu.html', hostDirectives: [{ directive: MenuBehavior, inputs: ['menuId: id'], outputs: ['menuClosed: closed'], }], }) export class AdminMenu { }

<admin-menu id="top-menu" (closed)="logMenuClosed()">

Hoisting in JavaScript

Deepa Chaurasia — Thu, 16 Mar 2023 18:39:29 +0000

Hoisting simple gives higher specificity to javascript declarations. Thus, it makes the computer read and process declarations first before analyzing other code in program.

Note: Hosting does not mean JavaScript rearranges or move code above one anothers.

E.g.

console.log(name); 
// Uncaught ReferenceError: name is not defined
let name = 'Deepa';

variables declared with let and const are hoisted but not initialized with a default value.
Accessing let or const before it's declared will give: Uncaught ReferenceError: can't access before initialization
Remember the error message tells variable is initialized somewhere.

Variable hoisting with var

When interpreter hoists a variable declared with var, it initialized its value to undefined, unlike let or const.
E.g.

console.log(name); // undefined
var name = 'deepa';
console.log(name); // deepa

Now let's analyze this behaviour:

var name;
console.log(name); // undefined
name = 'partha';
console.log(name); // partha

Remember, the first console.log(name) outputs undefined because name is hoisted, and given a default value (not because variable is never declared).

Using undefined variable will throw ReferenceError

console.log(name); // Uncaught ReferenceError: name is not defined

Now let's see if we don't declare var what happens.

console.log(name); // partha name = 'partha';

name = assigning a variable that's not declared is valid.

JavaScript let us access variable before they're declared. This behaviour is an unusual part of javascript and can lead to errors.

Using variable before it's declaration is not desirable.

The temporal Dead Zone

The reason why we get reference error when we try to access let or const before its declaration is Temperal Dead Zone

The TDZ starts at beginning of the variables enclosing scope and ends when it is declared.
Accessing variable in TDZ gives ReferenceError

E.g.

{
    // start of foo's TDZ
    let bar = 'bar';
    console.log(bar); // bar
    console.log(foo); // ReferenceError: Because we're in TDZ
    let foo = 'foo';
    // end of foo's TDZ
}

type of TDZ for let or const: ReferenceError
type of TDZ for var: undefined

Functional Hoisting

Function declarations are hoisted too. Function hoisting allows us to call function before it is declared or defined.


foo(); 
function foo() {
    console.log('foo'); // foo
}

Note: only function declaration are hoisted not function expressions.

E.g.

foo(); // Uncaught TypeError: foo is not a function
var foo = function() {

}

bar(); // Uncaught ReferenceError
let bar = function() {

}

Uncaught ReferenceError: can't access 'bar' before initialization similarly for const.

For function that is never declared:

foo(); // Uncaught ReferenceError: foo is not defined

My Devfest Experince as Speaker

Deepa Chaurasia — Sun, 11 Dec 2022 18:29:01 +0000

Hello everyone , I generally post about angular and tech related stuff only . However what i want to share today is also pretty much about tech event only.

Today I had my first ever Event of DevFest as Speaker . What made me write this blog is to share my experience and motivate other tech enthusiast to come forward and become speaker at such events.

Let me count you the reasons why you must be at such events:

All the attendes present there are genuinely attentive and are willing to learn something new.
You get great vibes from everywhere around
It's the platform to give back to your community.
It gives you the recognition in the industry as well.

I have attended the devfest Noida where most of the attendes were student. These students were not just immensly talented but the great audience as well.

I really liked the respect they have for speakers and will to gain more and more knowledge .What i have realised is these students realise importance of knowledge and that's why they are valued everywhere.

What have become pretty common these days is not respecting your teacher.I was pretty impressed with my audience out there

Apart from that I got the chance to meet amazing tech leaders from big companies. Their insights will be life long lesson for me . Meeting such great personaties and sharing stage with them is a blessing for me .

From my childhood ,I have felt the most confident on stage .You will be shocked to know I am an under confident person in real life . But an over confident person on stage

THIS IS ME ,CONFIDENT ON STAGE :)

I don't know something's really wrong here but that's how it is.

Apart from this the level of efforts volunteers give to make these events a success is just incredible . People were comparing #devfestNoida with international events.Their team work was pretty awesome. We can see what team work can do after these success events

And let me tell you these volunteers were the college students.The organizers were also young but pretty wise at taking decisions and executing the event.

One must always participate at such events as a volunteer,attendee,speaker or Organizer itself because it actually pushes you to develop the qualities you were not aware you had.

Why Typescript not JS?

Deepa Chaurasia — Thu, 01 Dec 2022 16:53:22 +0000

As a Frontend Developer,this question comes often in our mind whether one should go for typescript or javascript.

What is Typescript??

TypeScript is JavaScript with syntax for types.

TypeScript is a strongly typed programming language that builds on JavaScript, giving you better tooling at any scale.

TypeScript code converts to JavaScript, which runs anywhere JavaScript runs: In a browser, on Node.js or Deno and in your apps.

Conclusion-->Typescript is superscript of Javascript with extra features.

How to show or hide component on basis of url in Angular.

Deepa Chaurasia — Wed, 30 Nov 2022 07:56:58 +0000

As a Frontend developer,You come across a situation where you have to show a component only if you navigate to dashboard,or your login component.For rest you must hide.

How are you going to manage all of this in angular??

Well Angular provides you a various events and properties of router that you can use to track on which router user is currently at.

We will be discussing NavigationEnd event of Angular route

What is Navigation End??

An event triggered when a navigation ends successfully.

How to Use??

Inside constructor you subscribe to router events.
Then you will check subscribed val is an instance of Navigation End or not .
If yes then you will use that subscribed value and use value.url to find the url where user has navigated currently and put logic inside.
At last you will write your logic according to value.url

In the example above I have wrote logic to not show header on login , else on all other components whether dashboard,or any other headers will be visible.

My app.component.html looks like this

*Here you can see I am showing header only if "showHeader" property is true
*

My app.component.ts looks like this

Now If i click on submit button it will route to 'dashboard'
and shows dashboard component.

*Therefore header component becomes visible *

The working respository for reference
https://stackblitz.com/edit/angular-ivy-atods7?file=src/app/app.component.ts

Github Link
https://github.com/deepa314/angular-ivy-atods7.git

I hope it help you guys :)
If you like please like ,share and subscribe

Closures in Javascript

Deepa Chaurasia — Thu, 24 Nov 2022 18:57:07 +0000

A closure is a function combined with references to variables define outside of it.

They enclose the function and variable in its environment.

Let's say you're having a function greet

There's two interesting points to notice here.

The retured function from greet can access the word parameter.
The returned function maintain the value of word when greetings is called outside scope of word.

The first point can be explained by lexical Scope

Lexical Scope- The returned function can access word before it exists in its outer scope.

The second point because of closures

Closure maintains the variable references ,which allows function to access variables outside of their scope.

Examples of Closures in Javascript

Example 1:

In the example above, the function numberGenerator creates a local “free” variable num (a number) and checkNumber (a function which prints num to the console).

The function checkNumber doesn’t have any local variables of its own — however, it does have access to the variables within the outer function, numberGenerator, because of a closure.

Therefore, it can use the variable num declared in numberGenerator to successfully log it to the console even after numberGenerator has returned.

Example 2:
In this example we’ll demonstrate that a closure contains any and all local variables that were declared inside the outer enclosing function.

function sayHello() {

Notice how the variable hello is defined after the anonymous function — but can still access the hello variable. This is because the hello variable has already been defined in the function “scope” at the time of creation, making it available when the anonymous function is finally executed.

Possible ways to send data through Routing in angular

Deepa Chaurasia — Fri, 18 Nov 2022 18:55:01 +0000

While developing the large-scale applications,You may often came up with the scenarios where you want to send data through routing parameters. I will discuss all possible ways to do the same.

NAVIGATION AND ROUTE PARAMS

We can send data through navigation, and most often we use this method .

How to use it??

Step 1: In your routing module, set up your routes with the params you wanna send.

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { RoleUserMapComponent } from './role-user-map.component';

const routes: Routes = [
  { path: '', component: RoleUserComponent },
  { path: 'add',component:RoleUserAddComponent },
  { path: 'edit/:userId',component:RoleUserEditComponent },
  { path: 'detail/:userId', component:RoleUserDetailComponent 
];

@NgModule({
 imports: [RouterModule.forRoot(routes, { useHash: true })],
 exports: [RouterModule],
 providers: []
})
export class AppRoutingModule { }

Here in my path, i have attached 'userId' as param ,which will subscribe later from detail and edit component

Step 2:Now you will set the navigation either through navigator method or directly through routerLink

Using routerLink
< a [routerLink]=”['/edit',userId]”>Edit</a>

Using navigator
this.router.navigate(['edit', userId]);

Step 3:It's time to subscribe the params we have passed inside our edit/details component

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';


@Component({
  selector: 'app-role-user-map-edit',
  templateUrl: './role-user-map-edit.component.html',
  styleUrls: ['./role-user-map-edit.component.scss']
})
export class RoleUserMapEditComponent implements OnInit {
private sub: Subscription; 
id:string;

constructor(
    private route: ActivatedRoute
  ) { }

ngOnInit(): void {
     this.sub = this.route.params.subscribe(params => {
      this.id = params['userId'];
});

 ngOnDestroy(): void {
    this.sub.unsubscribe();
  }

First you will get activatedRoute by instantiating service inside constructor.
Next you will create a private subscription,Remember you have to unsubscribe it in ngOnDestroy to avoid memory leakage.
Then you subscribe to your activatedRoute and use it .

Using Query Parameters

Let's say you don't wanna send only userId,You wanna send name and mobileNo as well.While sending multiple parameters you use query parameters.

How to use it

You can simply pass queryParams like this Using Navigator this.router.navigate( ['edit'], { queryParams: { userId: '1101',mobileNo:931065465}});

Using routerLink
< a [routerLink]=”['/edit']” [queryParams]="{userId: '1101',mobileNo:931065465 }" >Edit</a>

Here you will simply send your data through queryParams and it will show like

http://localhost:4200/userId?userId=1101&mobileNo=9310476536

After that you can simply subscribe it like above except the fact you will use queryParams instead of params this time

this.sub = this.route.queryParams.subscribe(params => { this.id = params['userId']; this.mobileNo=params['mobileNo']; });

One thing if you are routing to another element further and you want queryParams to be preserved ,queryParamHandling will be used for this

How to use it
this.router.navigate( ['details'], { queryParamsHandling:'preserve'});

What it will do,let say you need userId in details component, queryParam will be preserved and you can subscribe

http://localhost:4200/details?userId=1101&mobileNO=931065465

Using Fragments

How to use it

You can simply pass fragments just like queryParams

Using Navigator
this.router.navigate( ['edit'], {fragment: { userId: '1101',mobileNo:931065465}});

Using routerLink
< a [routerLink]=”['/edit']” [fragment]="{userId: '1101',mobileNo:931065465 }" >Edit</a>

Static Data

{ path: 'userId', component: StaticComponent, data :{ userId:'1101', mobileNO:931065465}},

Simply subscribe data in your component just like above

  this.route.data.subscribe(data => {
          this.userInfo=data;
      })

Dynamic Data

Using routerLink
<a [routerLink]="['/edit']" [state]="{ userId:'1101', mobileNO:931065465}">Dynamic Data</a>

Using Navigation
this.router.navigate( ['edit'], {state: { userId: '1101',mobileNo:931065465}});

How to subscribe?

It's little different from rest,here you have to subscribe in constructor only .It won't work elsewhere

constructor(private router: Router, private activatedRoute: ActivatedRoute)
 {
console.log(this.router.getCurrentNavigation().extras.state);
  }

You can store the state in your local variable and use it anywhere in your program.

I hope it was helpful for you guys .If you liked please share ,like and let me know in comments if any improvement needed. :)

LIFE CYCLE OF ANGULAR COMPONENTS

Deepa Chaurasia — Wed, 31 Aug 2022 13:12:40 +0000

Let's discuss one by one

Constructor()

It is called on component/directive Instantiation.
It also allows centralizing the dependency injections.

YOU MUST AVOID SUBSCRIPTIONS IN CONSTRUCTOR

ngOnChanges

It allows to set or reset data-bound input properties.
You use it if you are using @input decorator in your component.

ngOnInIt

It is called once after the first ngOnChanges()
It allows initializing the component/directive

Here you can do subscriptions

ngDoCheck

Detect and act upon changes that Angular can't or won't detect on its own.
It is called after every ngOnChanges and just after ngOnInit() first run.

ngAfterContentInit

Respond after Angular projects external content into the component's view, or into the view that a directive is in.
It's called once after ngDoCheck()
If you use @contentChild to get contentchild ,they are initialized here.

AfterContentCheckedMethod

Respond after Angular checks the content projected into the directive or component.
It is same as ngDoCheck but for contentChild properties

AfterViewInItMethod

Respond after Angular initializes the component's views and child views, or the view that contains the directive.
It is called only once after first ngAfterContentChecked

AfterViewCheckedMethod

Respond after Angular checks the component's views and child views, or the view that contains the directive.
It is called after the ngAfterViewInit() and every subsequent ngAfterContentChecked()

OnDestroyMethod

Cleanup just before Angular destroys the directive or component. Unsubscribe Observables and detach event handlers to avoid memory leaks.
It is called immediately before Angular destroys the component/directives