Question 1

New features of html5

Accepted Answer

HTML5 is the fifth revision of the Hypertext Markup Language (HTML), which is the standard markup language for creating webpages and applications on the World Wide Web. It was developed by the World Wide Web Consortium (W3C) and the Web Hypertext Application Technology Working Group (WHATWG) as an evolution of its predecessor, HTML4.

Following are the new features in HTML5 :

1. Semantics: HTML5 introduced several new elements that provide better semantic meaning to web content. These include `

`, `

Description of the image — `. These elements make it easier for search engines and assistive technologies to understand the structure and purpose of the content. Semantic elements in HTML are tags that provide meaning and context to the content within a web page. They help describe the purpose or role of different sections of the document, making it more accessible to both humans and machines. Here are some commonly used semantic elements in HTML: **1. `**
`: Represents the introductory content or a container for the site's heading, logo, navigation, etc. Example:

`My Website Home About Contact`

**2. `**
`: Defines a section containing navigation links. Example:

`Home About Contact`

**3. `**
`: Represents the main content of the document. Example:

`Article Title Article content goes here.`

**4. `**
`: Defines a self-contained composition within a document, such as a blog post, news article, or comment. Example:

`Blog Post Title Blog post content goes here. Published on June 1, 2023`

**5. `**
`: Represents a standalone section within a document, which could have its own heading. Example:

`About Us Information about our company.`

**6. `**
`: Defines a section that contains content related to the main content but can be considered separate from it. Example:

`Related Links Link 1 Link 2`

**7. `**
`: Represents the footer of a document or a section. Example:

`© 2023 My Website. All rights reserved.`

These are just a few examples of semantic elements in HTML. Using semantic tags helps improve the accessibility, maintainability, and search engine optimization of web pages by providing clearer structural meaning to the content. **2. Multimedia Support:** HTML5 added native support for multimedia elements, eliminating the need for plugins like Adobe Flash. The `

Question 2

What are the data types in JavaScript

Accepted Answer

In JavaScript, data types can be categorized into two main groups: primitive and non-primitive (also known as reference types) data types. Here's an explanation of each: 1. Primitive Data Types: These are immutable data types that store a single value. a. Boolean: Represents a logical value, either true or false. It is commonly used for conditions and branching in JavaScript.


let isTrue = true;
let isFalse = false;
console.log(isTrue);   // Output: true
console.log(isFalse);  // Output: false

b. Number: Represents numeric values, including integers and floating-point numbers.


let count = 10;
let price = 4.99;
console.log(count);  // Output: 10
console.log(price);  // Output: 4.99

c. String: Represents a sequence of characters enclosed in single or double quotes. Strings are used to represent textual data.


let message = "Hello, world!";
console.log(message);  // Output: Hello, world!

d. Null: Represents the intentional absence of any object value. It is often assigned to a variable to indicate that it has no value or that the value is unknown.


let value = null;
console.log(value);  // Output: null

e. Undefined: Represents an uninitialized or undeclared variable. If a variable is declared but not assigned a value, it will have the value of undefined.


let variable;
console.log(variable);  // Output: undefined

f. Symbol: Represents a unique identifier. Symbols are typically used as keys in objects to avoid naming conflicts.


let id = Symbol("unique");
console.log(id);  // Output: Symbol(unique)

2. Non-Primitive (Reference) Data Types: These are mutable data types that store references to memory locations rather than the actual values. a. Object: Represents a collection of key-value pairs and provides a way to group related data and functionality together. Objects can be created using object literals {}, constructor functions, or the class syntax introduced in ECMAScript 2015.


let person = {
  name: "John",
  age: 30,
  isAdmin: false
};
console.log(person);  // Output: { name: 'John', age: 30, isAdmin: false }

b. Array: Represents an ordered list of values. Arrays can hold values of any type, and their elements are accessed using numeric indices starting from 0.


let numbers = [1, 2, 3, 4, 5];
console.log(numbers);  // Output: [1, 2, 3, 4, 5]

c. Function: Represents executable code that can be invoked and performs a specific task. Functions are one of the fundamental building blocks in JavaScript and can be defined using function declarations or function expressions.


function greet(name) {
  console.log("Hello, " + name + "!");
}

greet("Alice");  // Output: Hello, Alice!

Non-primitive data types, such as objects, arrays, and functions, are passed by reference, meaning that when you assign them to a variable or pass them as arguments to functions, you are working with a reference to the original value stored in memory. Primitive data types, on the other hand, are passed by value, meaning that when you assign them to a variable or pass them as arguments, a copy of the value is created.

Question 3

Difference between ng add and npm install

Accepted Answer

The main difference between `ng add` and `npm install` lies in their purpose and functionality within the Angular ecosystem. 1. `ng add`: This is a command specific to the Angular CLI (Command Line Interface). It is used to add new packages, libraries, or schematics to an Angular project. When you run `ng add`, it performs several tasks automatically, such as installing the necessary packages, configuring the project, and making any required changes to the project's files. The `ng add` command is often used to quickly integrate third-party libraries or extensions into an Angular project with minimal effort. Suppose you want to add the Angular Material library to your Angular project. Instead of manually configuring and installing Angular Material, you can use the `ng add` command to simplify the process. Here's how you would do it:


   ng add @angular/material

When you run this command, the Angular CLI will perform the following tasks: - Install the `@angular/material` package and its dependencies using `npm install`. - Configure the project to use Angular Material by updating the `angular.json` file. - Import and configure the necessary modules and styles in the project's files (e.g., `app.module.ts` and `styles.scss`). `ng add` is a convenient way to add Angular-specific packages or schematics to your project while automating the necessary setup steps. 2. `npm install`: This is a general command provided by npm (Node Package Manager) for installing packages from the npm registry. It is not specific to Angular but is used across various JavaScript and Node.js projects. When you run `npm install `, it installs the specified package and its dependencies into the project. It typically updates the `package.json` file to include the installed package as a dependency. However, `npm install` does not perform any specific configuration or modification of the project's files. Let's say you want to install the `lodash` library, which is a popular utility library for JavaScript. In this case, you would use the `npm install` command directly, as follows:


   npm install lodash

Running this command will: - Fetch the `lodash` package and its dependencies from the npm registry. - Install the package locally within your project's `node_modules` directory. - Update the `package.json` file to include `lodash` as a dependency. `npm install` is a general-purpose command used to install any package from the npm registry into your project, regardless of the specific framework or library being used. In summary, `ng add` is a specialized command within the Angular CLI that automates the installation and configuration of packages specifically designed for Angular projects. On the other hand, `npm install` is a general command provided by npm to install packages from the npm registry into any JavaScript or Node.js project, including Angular projects.

Question 4

what are custom directives in Angular and how to create them

Accepted Answer

Custom directives are a feature in Angular that allow developers to extend the functionality of HTML by creating their own custom HTML elements or attributes. With custom directives, developers can define their own behavior, such as adding event listeners, modifying the DOM, or manipulating data. To create a custom directive in Angular, follow these steps: 1) Create a new directive using the @Directive decorator. The decorator specifies the selector for the directive and any inputs, outputs, and other options. 2) Define the directive class, which contains the logic for the directive. The class should implement the OnInit and OnDestroy interfaces to handle the initialization and destruction of the directive. 3) Add the directive to the declarations array in the module that will use it. This tells Angular that the directive should be available for use in that module. Here is an example of a simple custom directive that changes the background color of an element:


import { Directive, ElementRef, Renderer2 } from '@angular/core';

@Directive({
  selector: '[appHighlight]'
})
export class HighlightDirective {
  constructor(private el: ElementRef, private renderer: Renderer2) { }

  ngOnInit() {
    this.renderer.setStyle(this.el.nativeElement, 'background-color', 'yellow');
  }

  ngOnDestroy() {
    this.renderer.removeStyle(this.el.nativeElement, 'background-color');
  }
}

In this example, the HighlightDirective sets the background color of an element to yellow when it is initialized, and removes the background color when it is destroyed. The ElementRef and Renderer2 classes are used to access and manipulate the element in the DOM. To use this directive in a template, simply add the appHighlight attribute to an element:


  
  This text will have a new yellow background.

When the template is rendered, the HighlightDirective will be applied to the element, changing its background color to yellow.

Question 5

Difference between get and post methods

Accepted Answer

The main differences between the HTTP `GET` and `POST` methods are their intended purposes and the way they handle data: 1. Purpose: - `GET`: The `GET` method is used to retrieve data from a server. It is meant for reading or fetching a resource without modifying it on the server. - `POST`: The `POST` method is used to send data to the server to create or update a resource. It is meant for submitting data, such as form submissions, to be processed by the server. 2. Data Handling: - `GET`: Data is appended to the URL as query parameters. For example, `https://example.com/api/users?id=123`. This makes the data visible in the URL and is limited in size due to URL length restrictions. It is suitable for passing small amounts of data, but it's not recommended for sensitive or large data. - `POST`: Data is sent in the body of the HTTP request, which is not visible in the URL. This allows for sending larger amounts of data, and there are no URL length restrictions. It is suitable for sensitive or large data, such as JSON payloads. 3. Caching: - `GET`: `GET` requests can be cached by the browser or intermediate proxies since they are considered safe and idempotent. The same `GET` request can be repeated multiple times without any side effects. - `POST`: By default, `POST` requests are not cached because they may have side effects on the server, such as creating or updating resources. However, caching can be explicitly enabled for `POST` requests using appropriate cache headers. 4. Idempotence: - `GET`: `GET` requests are idempotent, meaning that making the same `GET` request multiple times should have the same result. It should not modify any data on the server. - `POST`: `POST` requests are not idempotent since they typically result in the creation or modification of a resource on the server. Making the same `POST` request multiple times may create multiple resources or have different outcomes. 5. Security: - `GET`: Since `GET` requests append data to the URL, the data becomes visible in browser history, server logs, and can be bookmarked. It is not recommended to send sensitive data via `GET` requests as it can be easily exposed. - `POST`: Data sent via `POST` requests is included in the body and is not directly visible in browser history or server logs, offering better security for sensitive information. Example : Here are examples that demonstrate the difference between the `GET` and `POST` methods: 1. `GET` Method Example: Let's say you have a RESTful API that provides information about users. To retrieve the details of a specific user with the ID "123", you would use a `GET` request. Here's an example using JavaScript's `fetch` API:


   fetch('https://example.com/api/users/123', {
     method: 'GET'
   })
     .then(response => response.json())
     .then(data => {
       console.log(data);
     })
     .catch(error => {
       console.error('Error:', error);
     });

In this example, the `GET` request is made to the URL `https://example.com/api/users/123`, indicating that you want to retrieve user information for the user with the ID "123". The server will respond with the requested user data. 2. `POST` Method Example: Suppose you have a contact form on a website, and you want to send the form data to a server for processing. In this case, you would use a `POST` request to submit the data. Here's an example using JavaScript's `fetch` API:


   const formData = {
     name: 'John Doe',
     email: 'john@example.com',
     message: 'Hello, World!'
   };

   fetch('https://example.com/api/contact', {
     method: 'POST',
     headers: {
       'Content-Type': 'application/json'
     },
     body: JSON.stringify(formData)
   })
     .then(response => response.json())
     .then(data => {
       console.log(data);
     })
     .catch(error => {
       console.error('Error:', error);
     });

In this example, the `POST` request is made to the URL `https://example.com/api/contact` with the form data serialized as JSON in the request body. The server will process the submitted data, such as storing it in a database or sending an email. In summary, the `GET` method is used for retrieving data without modifying it, while the `POST` method is used for sending data to create or update a resource. `GET` requests append data to the URL, have caching advantages, and are idempotent. `POST` requests send data in the request body, are not cached by default, and are not idempotent.

Question 6

Difference between post and put methods

Accepted Answer

The main differences between the HTTP `POST` and `PUT` methods are their intended purposes and the way they handle data: 1. Purpose: - `POST`: The `POST` method is used to send data to the server to create a new resource. It is often used when submitting forms or sending data that needs to be processed and stored on the server. Each `POST` request typically creates a new resource on the server, and the server assigns a unique identifier to it. - `PUT`: The `PUT` method is used to send data to the server to update an existing resource or create a resource at a specific URL. It is used when you know the exact location of the resource you want to update or create. A `PUT` request can either update an existing resource or create a new one if it doesn't already exist at the specified URL. 2. Idempotence: - `POST`: `POST` requests are not idempotent. Sending the same `POST` request multiple times may result in the creation of multiple resources with different identifiers or cause repeated side effects on the server. - `PUT`: `PUT` requests are idempotent. Making the same `PUT` request multiple times will have the same outcome, ensuring that the resource on the server is updated or created consistently. 3. Data Handling: - `POST`: Data is sent in the body of the HTTP request, typically as form data or serialized JSON/XML. The server processes this data and performs the necessary actions to create a new resource. - `PUT`: Data is sent in the body of the HTTP request, similar to the `POST` method. However, in a `PUT` request, the data represents the complete updated representation of the resource. The server uses this data to replace the existing resource or create a new one. 4. URL Convention: - `POST`: The URL for a `POST` request typically points to a collection endpoint or a general resource endpoint. For example, `https://example.com/api/users` to create a new user. - `PUT`: The URL for a `PUT` request usually points to a specific resource or a unique identifier for that resource. For example, `https://example.com/api/users/123` to update the user with the ID "123". 5. Safe Operations: - `POST`: `POST` requests are not considered safe operations as they can result in the creation of new resources or have side effects on the server. - `PUT`: `PUT` requests are not considered safe operations either, as they can update or create resources on the server. Example: Here are examples that demonstrate the difference between the `POST` and `PUT` methods: 1. `POST` Method Example: Let's say you have an API that handles blog posts. To create a new blog post, you would use a `POST` request. Here's an example using JavaScript's `fetch` API:


   const newPost = {
     title: 'My New Blog Post',
     content: 'This is the content of my new blog post.'
   };

   fetch('https://example.com/api/posts', {
     method: 'POST',
     headers: {
       'Content-Type': 'application/json'
     },
     body: JSON.stringify(newPost)
   })
     .then(response => response.json())
     .then(data => {
       console.log(data);
     })
     .catch(error => {
       console.error('Error:', error);
     });

In this example, the `POST` request is made to the URL `https://example.com/api/posts`, indicating that you want to create a new blog post. The server will process the request, create a new blog post with the provided data (`newPost`), and respond with the created post details. 2. `PUT` Method Example: Suppose you have an API that manages user profiles, and you want to update an existing user's information. To achieve that, you would use a `PUT` request. Here's an example using JavaScript's `fetch` API:


   const updatedUser = {
     name: 'Jane Doe',
     email: 'jane@example.com'
   };

   fetch('https://example.com/api/users/123', {
     method: 'PUT',
     headers: {
       'Content-Type': 'application/json'
     },
     body: JSON.stringify(updatedUser)
   })
     .then(response => response.json())
     .then(data => {
       console.log(data);
     })
     .catch(error => {
       console.error('Error:', error);
     });

In this example, the `PUT` request is made to the URL `https://example.com/api/users/123`, indicating that you want to update the user with the ID "123". The server will process the request, replace the existing user's information with the provided data (`updatedUser`), and respond with the updated user details. Conclusion: In summary, the `POST` method is used to send data to create a new resource, while the `PUT` method is used to send data to update an existing resource or create a new one at a specific URL. `POST` requests create new resources, are not idempotent, and send data representing the resource to be created. `PUT` requests update or create resources, are idempotent, and send data representing the complete updated representation of the resource.

Question 7

Explain the canActivateChild route guard

Accepted Answer

The canActivateChild route guard in Angular allows you to check if a user is allowed to activate child routes. It is used to protect child routes of a particular route from being activated if certain conditions are not met. When a user navigates to a child route, Angular checks if there is an associated canActivateChild guard in the parent route's route configuration. If there is, Angular executes the guard before activating the child route. The canActivateChild guard is implemented as a service that implements the CanActivateChild interface. This interface has a single method, canActivateChild(), which returns a boolean or a promise that resolves to a boolean. If the method returns true, the child route is activated. If it returns false or a promise that resolves to false, the child route is not activated, and the user is redirected to a different route, or a custom error page is displayed. Here is an example of how to use the canActivateChild route guard:


import { Injectable } from '@angular/core';
import { CanActivateChild, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class AuthGuard implements CanActivateChild {

  canActivateChild(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): Observable | Promise | boolean {
    // Check if the user is authenticated
    if (this.authService.isAuthenticated()) {
      return true;
    } else {
      // If the user is not authenticated, redirect to the login page
      this.router.navigate(['/login']);
      return false;
    }
  }
}

In this example, we have an AuthGuard service that implements the CanActivateChild interface. The canActivateChild() method checks if the user is authenticated using a method isAuthenticated() provided by an AuthService. If the user is authenticated, the method returns true, allowing the child route to be activated. If the user is not authenticated, the method navigates to the login page and returns false, preventing the child route from being activated. To use the AuthGuard service, you can add it to the canActivateChild property in the route configuration for the parent route that guards its child routes:


import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { AuthGuard } from './auth.guard';
import { ParentComponent } from './parent.component';
import { ChildComponent } from './child.component';

const routes: Routes = [
  {
    path: 'parent',
    component: ParentComponent,
    canActivateChild: [AuthGuard],
    children: [
      {
        path: 'child',
        component: ChildComponent
      }
    ]
  }
];

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

In this example, the canActivateChild property is set to an array containing the AuthGuard service. This guards the child route with the AuthGuard. Still confused? if yes, check link canActivateChild - tektutorialshub for explanation

Question 8

How to create custom events in JavaScript

Accepted Answer

Custom events are events that are created by developers to handle specific scenarios or to extend the capabilities of the built-in events. Custom events allow you to define and trigger events that are not natively available in the browser or the DOM. The ability to create custom events gives you more flexibility in designing event-driven systems and enables you to build modular, reusable components that communicate with each other using custom events. Custom events can be useful in various scenarios, such as: 1. Communication between components: Custom events provide a way for different components of an application to communicate and exchange information. Components can listen for custom events and respond accordingly. 2. Application-level events: You can create custom events to represent application-level events, such as "applicationInitialized" or "userLoggedOut." These events can be triggered at specific points in your application and can be used to trigger actions or update the UI. 3. Event-driven architecture: Custom events facilitate an event-driven architecture, where different parts of your application can be decoupled and communicate through events. This promotes loose coupling and improves the modularity and maintainability of your codebase. To work with custom events, you can use the `CustomEvent` constructor and the `dispatchEvent()` method to create and trigger custom events. Additionally, you can use the `addEventListener()` method to listen for and handle custom events. Here's a step-by-step guide on how to create custom events: 1. Create an event using the `CustomEvent` constructor:


   const myEvent = new CustomEvent('myEvent', {
     detail: { key: 'value' },
     bubbles: true, // Specifies whether the event should bubble up through the DOM tree (optional)
     cancelable: true // Specifies whether the event can be canceled with preventDefault() (optional)
   });

In the example above, we create a custom event named `'myEvent'`. The event can carry additional data in the `detail` property, which is an optional object. The `bubbles` and `cancelable` properties determine the behavior of the event during event propagation and allow for event cancellation if desired. 2. Dispatch the custom event on an element:


   const element = document.getElementById('myElement');
   element.dispatchEvent(myEvent);

In this step, we select the desired HTML element on which the event should be dispatched. Here, we use `document.getElementById('myElement')` to obtain the element with the ID `'myElement'`. Then, we call the `dispatchEvent()` method on the element, passing in the custom event `myEvent` as the argument. 3. Listen for the custom event:


   const element = document.getElementById('myElement');
   element.addEventListener('myEvent', event => {
     console.log('Custom event triggered!', event.detail);
   });

Finally, we register an event listener on the element to capture and handle the custom event. In this example, when the `'myEvent'` event is triggered, the provided callback function will execute. You can access the additional data passed in the event's `detail` property using `event.detail`. You have created a custom event, dispatched it on an element, and set up an event listener to respond to the event. You can adapt this approach to meet your specific use cases and define custom behavior for your events in JavaScript.

Question 9

Difference between ng serve and npm start

Accepted Answer

`ng serve` and `npm start` are both commands used in web development, but they serve different purposes depending on the context. Let's look at the differences between `ng serve` and `npm start` with some examples: 1. `ng serve` Example: Let's say you're working on an Angular project and want to run it locally for development purposes. You would navigate to your project directory in the command line and run the following command:


   ng serve

This command would compile your Angular application, bundle the assets, start a development server, and watch for changes. It will then provide you with a local URL (usually http://localhost:4200) where you can access and test your application in the browser. The development server will also automatically reload the application whenever you make changes to the code. 2. `npm start` Example: Suppose you're working on a Node.js project that has a `start` script defined in the `package.json` file. The `start` script is set to execute the main application file, `index.js`. To start your application, you would navigate to the project directory and run the following command:


   npm start

This command will execute the command specified in the `start` script of the `package.json` file, which in this case is running `index.js`. It could be any command you specify. For example, you might use `npm start` to launch a web server, initiate a build process, or perform any other necessary actions to start your application in a production or deployment environment. In summary, `ng serve` is used specifically for running an Angular project locally during development, providing a development server and automatic reloading. On the other hand, `npm start` is a more generic command used in Node.js projects to execute a command specified in the `start` script, often used for starting an application in a production environment.

Question 10

Difference between 'dependencies' and 'dev-dependencies' properties in package.json

Accepted Answer

The `dependencies` and `devDependencies` properties in the `package.json` file are used to manage different types of dependencies in a Node.js project. Here's the difference between them: 1. `dependencies`: - The `dependencies` property is used to list the packages that are required for the project to run in a production or deployment environment. - These packages are necessary for the application's core functionality and are typically required at runtime. - When you install the project dependencies using `npm install`, the packages listed in the `dependencies` section are installed. Example:


   "dependencies": {
     "express": "^4.17.1",
     "lodash": "^4.17.21"
   }

2. `devDependencies`: - The `devDependencies` property is used to list the packages that are only required during development, such as testing frameworks, build tools, and development-specific utilities. - These packages are not necessary for the application to run in a production environment but are helpful during development and testing phases. - When you install the project dependencies along with dev dependencies using `npm install`, the packages listed in both the `dependencies` and `devDependencies` sections are installed. Example:

   "devDependencies": {
     "mocha": "^9.0.3",
     "nodemon": "^2.0.13"
   }

By separating dependencies into `dependencies` and `devDependencies`, you can distinguish between packages required for production and those required for development. This separation helps reduce the size of the production deployment by excluding unnecessary development-related packages. Conclusion To summarize, `dependencies` includes packages needed for the application to run in a production environment, while `devDependencies` includes packages required during development and testing but are not necessary for the production deployment.

Frontend Interview Questions