Front-end framework Angular interview Questions with Answers for 2 yrs

Angular is a TypeScript-based, free and open-source single-page web application framework run on Node.js. It is led by the Angular Team at Google and by a community of individuals and corporations. Angular is a complete rewrite from the same team that built AngularJS.

How does an Angular application work?

Every Angular app consists of a file named angular.json. This file will contain all the configurations angular custom filter example of the app. While building the app, the builder looks at this file to find the entry point of the application. Inside the build section, the main property of the options object defines the entry point of the application which in this case is main.ts.

The main.ts file creates a browser environment for the application to run, and, along with this, it also calls a function called bootstrapModule, which bootstraps the application.

Each component is declared with three properties:

• Selector — used for accessing the component
• Template/TemplateURL — contains HTML of the component
• StylesURL — contains component-specific stylesheets

What are Single Page Applications (SPA)?

Single page applications are web based applications that only need to be loaded once, with new functionality consisting of only minor changes to the user interface. It does not load new HTML pages to display the content of the new page, but rather generates it dynamically. This is made feasible by JavaScript’s ability to alter DOM components on the current page. A Single Page Application method is speedier, resulting in a more consistent user experience.

What are templates in Angular?

A template is a kind of HTML that instructs Angular about how to display a component. An Angular HTML template, like conventional HTML, produces a view, or user interface, in the browser, but with far more capabilities. Angular API evaluates an HTML template of a component, creates HTML, and renders it.

There are two ways to create a template in an Angular component:

• Inline Template
• Linked Template

Inline Template: The component decorator’s template config is used to specify an inline HTML template for a component. The Template will be wrapped inside the single or double quotes.

Example:

@Component({
selector: “app-greet”,
template: `<div>
<h1> Hello {{name}} how are you ? </h1>
<h2> Welcome to interviewbit ! </h2>
</div>`
})

Linked Template: A component may include an HTML template in a separate HTML file. As illustrated below, the templateUrl option is used to indicate the path of the HTML template file.

Example:

@Component({
selector: “app-greet”,
templateUrl: “./component.html”
})

What is the scope?

In Angular, a scope is an object that refers to the application model. It is a context in which expressions can be executed. These scopes are grouped hierarchically, comparable to the DOM structure of the application. A scope aids in the propagation of various events and the monitoring of expressions.

What is data binding in Angular?

Data binding is one of the most significant and effective elements for creating communication angular custom directive example between the DOM and the component. It makes designing interactive apps easier by reducing the need to worry about data pushing and pulling between the component and the template.

There are Four types of Data binding in Angular:

• Property Binding
• Event Binding
• String Interpolation
• Two way data binding

What are annotations in Angular?

These are language features that are hard-coded. Annotations are merely metadata that is set on a class to reflect the metadata library. When a user annotates a class, the compiler adds an annotations property to the class, saves an annotation array in it, and then attempts to instantiate an object with the same name as the annotation, providing the metadata into the constructor. Annotations in AngularJs are not predefined, therefore we can name them ourselves.

What are pure Pipes?

These are pipelines that only employ pure functions. As a result, a pure pipe does not employ any internal state, and the output remains constant as long as the parameters provided remain constant. Angular calls the pipe only when the parameters being provided change. A single instance of the pure pipe is utilized in all components.

What is ngOnInit?

ngOnInit is a lifecycle hook and callback function used by Angular to mark the creation of a component. It accepts no arguments and returns a void type.

Example:

export class MyComponent implements OnInit {
constructor() { }
ngOnInit(): void {
//….
}
}

What is transpiling in Angular?

Transpiling is the process of transforming the source code of one programming language into the source code of another. Typically, in Angular, this implies translating TypeScript to JavaScript. TypeScript (or another language like as Dart) can be used to develop code for your Angular application, which is subsequently transpiled to JavaScript. This occurs naturally and internally.
What are HTTP interceptors?

Using the HttpClient, interceptors allow us to intercept incoming and outgoing HTTP requests. They are capable of handling both HttpRequest and HttpResponse. We can edit or update the value of the request by intercepting the HTTP request, and we can perform some specified actions on a specific status code or message by intercepting the answer.