With json package, it becomes easy to manage the project dependencies. We can mention details like the version, language etc… in package.json. For example, if typescript is used in our project, we can mention typescript and its version in package.json. Examples are metadata.json, tsconfig.json etc…
Posted Date:- 2021-09-09 04:53:45
Class decorators appear just before class definition, whereas class field decorators appear just before a field in the class definition. Examples of class decorators are @Component, @NgModule etc… Examples of a class field decorator are @Input, @Output etc…
Posted Date:- 2021-09-09 04:53:00
DOM (Document Object Model) treats an XML or HTML document as a tree structure in which each node is an object representing a part of the document.
Angular uses the regular DOM. This updates the entire tree structure of HTML tags until it reaches the data to be updated. However, to ensure that the speed and performance are not affected, Angular implements Change Detection.
With this, you have reached the end of the article. We highly recommend brushing up on the core concepts for an interview. It’s always an added advantage to write the code in places necessary.
Posted Date:- 2021-09-09 04:52:14
Eager loading is the default module-loading strategy. Feature modules under Eager loading are loaded before the application starts. This is typically used for small size applications.
Lazy loading dynamically loads the feature modules when there's a demand. This makes the application faster. It is used for bigger applications where all the modules are not required at the start of the application.
Posted Date:- 2021-09-09 04:51:32
Bootstrap is a powerful toolkit. It is a collection of HTML, CSS, and JavaScript tools for creating and building responsive web pages and web applications.
There are two ways to embed the bootstrap library into your application.
1. Angular Bootstrap via CDN - Bootstrap CDN is a public Content Delivery Network. It enables you to load the CSS and JavaScript files remotely from its servers.
2. Angular Bootstrap via NPM - Another way to add Bootstrap to your Angular project is to install it into your project folder by using NPM (Node Package Manager).
npm install bootstrap
npm install jquery
Posted Date:- 2021-09-09 04:50:53
The ngFor directive is used to build lists and tables in the HTML templates. In simple terms, this directive is used to iterate over an array or an object and create a template for each element.
<ul>
<li *ngFor = "let items in itemlist"> {{ item }} </li>
</ul>
1. “Let item†creates a local variable that will be available in the template
2. “Of items†indicates that we are iterating over the items iterable.
3. The * before ngFor creates a parent template.
Posted Date:- 2021-09-09 04:50:07
To disable all the animations, place the @.disabled host binding on the topmost Angular component.
Explain the steps to create a reusable animation.
To create an animation that can be reused, use the animation() method and define the animation in a separate .ts file. Declare this animation as a const export variable. This can be then imported and reused in any app components that use the useAnimation() API.
Posted Date:- 2021-09-09 04:49:05
Wildcard route has the path that consists of two asterisks (**) that can match any URL. It is helpful when a URL doesn’t match any of the predefined routes. Instead of throwing error, we can use a wildcard route and defining a component for the same.
Posted Date:- 2021-09-09 04:48:33
No, routing module can be totally skipped if there are simple configurations.
Posted Date:- 2021-09-09 04:47:59
Angular router interprets a browser URL as commands to navigate to a client-generated view. The router is bound to the links on a page. This way Angular knows to navigate the application view to the required page when a user clicks on it.
Posted Date:- 2021-09-09 04:47:25
HttpClient is a simplified Http API for Angular applications. It gives better observable APIs, better error handling mechanisms, testability, request and response interception, typed request and response objects. The HttpClientAPI rests on the XMLHttpRequest interface exposed by the browsers.
Posted Date:- 2021-09-09 04:46:43
Async pipe subscribes to a promise or an observable, and returns the latest value. If a new value is emitted, the pipe marks the component that needs to be checked for any changes.
<code>observable|async</code>
Posted Date:- 2021-09-09 04:46:08
Digest cycle is the process of monitoring watchlist to track the changes in the value of the watch variable. The digest cycle is implicitly triggered, but we can also trigger it manually using $apply() function.
Posted Date:- 2021-09-09 04:45:28
The latest version is Angular 8. Some features are –
1. Support for TypeScript 3.4.
2. Dynamic import for lazy routes.
3. Web workers.
4. Differential loading for application code.
5. Introduction of Angular Ivy – improved payload size, backward compatibility, faster re-build time, easier debugging etc…
Posted Date:- 2021-09-09 04:44:48
While both the concepts deal with Asynchronous events in Angular, Promises handle one such event at a time while observables handle a sequence of events over some time.
Promises - They emit a single value at a time. They execute immediately after creation and are not cancellable. They are Push errors to the child promises.
Observables - They are only executed when subscribed to them using the subscribe() method. They emit multiple values over a period of time. They help perform operations like forEach, filter, and retry, among others. They deliver errors to the subscribers. When the unsubscribe() method is called, the listener stops receiving further values.
Posted Date:- 2021-09-09 04:43:31
Angular Services perform tasks that are used by multiple components. These tasks could be data and image fetching, network connections, and database management among others. They perform all the operational tasks for the components and avoid rewriting of code. A service can be written once and injected into all the components that use that service.
Posted Date:- 2021-09-09 04:42:57
Ahead of Time (AOT) compilation converts your code during the build time before the browser downloads and runs that code. This ensures faster rendering to the browser. To specify AOT compilation, include the --aot option with the ng build or ng serve command.
The Just-in-Time (JIT) compilation process is a way of compiling computer code to machine code during execution or run time. It is also known as dynamic compilation. JIT compilation is the default when you run the ng build or ng serve CLI commands.
Posted Date:- 2021-09-09 04:42:22
In Angular, every component has a lifecycle. Angular creates and renders these components and also destroys them before removing them from the DOM. This is achieved with the help of lifecycle hooks. Here's the list of them -
1. ngOnChanges() - Responds when Angular sets/resets data-bound input properties.
2. ngOnInit() - Initialize the directive/component after Angular first displays the data-bound properties and sets the directive/component's input properties/
3. ngDoCheck() - Detect and act upon changes that Angular can't or won't detect on its own.
4. ngAfterContentInit() - Responds after Angular projects external content into the component's view.
5. ngAfterContentChecked() - Respond after Angular checks the content projected into the component.
6. ngAfterViewInit() - Respond after Angular initializes the component's views and child views.
7. ngAfterViewChecked() - Respond after Angular checks the component's views and child views.
8. ngOnDestroy - Cleanup just before Angular destroys the directive/component.
Posted Date:- 2021-09-09 04:41:49
The scope in Angular binds the HTML, i.e., the view, and the JavaScript, i.e., the controller. It as expected is an object with the available methods and properties. The scope is available for both the view and the controller. When you make a controller in Angular, you pass the $scope object as an argument.
Posted Date:- 2021-09-09 04:40:32
Angular is based on TypeScript and HTML. HTML is used for the template, and TypeScript (a superset of JavaScript) is used for components.
Posted Date:- 2021-09-09 04:39:55
TypeScript classes has a default method called constructor which is normally used for the initialization purpose. Whereas ngOnInit method is specific to Angular, especially used to define Angular bindings. Even though constructor getting called first, it is preferred to move all of your Angular bindings to ngOnInit method. In order to use ngOnInit, you need to implement OnInit interface as below,
export class App implements OnInit{
constructor(){
//called first time before the ngOnInit()
}
ngOnInit(){
//called after the constructor and called after the first ngOnChanges()
}
}
Posted Date:- 2021-09-09 04:38:50
The full form of DOM is Document Object Model, and it is responsible for representing the content of a web page and changes in the architecture of an application. Here, all the objects are organized in the form of a tree, and the document can easily be modified, manipulated, and accessed only with the help of APIs.
Posted Date:- 2021-09-09 04:37:59
In Angular, decorators are design patterns that help in the modification or decoration of the respective classes without making changes in the actual source code.
Annotations, on the other hand, are used in Angular to build an annotation array. They use the Reflective Metadata library and are a metadata set of the given class.
Posted Date:- 2021-09-09 04:37:19
String interpolation in Angular, also known as the mustache syntax, only allows one-way data binding. It is a special syntax that makes use of double curly braces {{}} so that it can display the component data. Inside the braces are the JavaScript expressions that Angular needs to execute to retrieve the result, which can further be inserted into the HTML code. Moreover, as part of the digest cycle, these expressions are regularly updated and stored.
Posted Date:- 2021-09-09 04:36:23
View encapsulation defines whether the template and styles defined within the component can affect the whole application or vice versa. Angular provides three encapsulation strategies:
1. Emulated - styles from the main HTML propagate to the component.
2. Native - styles from the main HTML do not propagate to the component.
3. None - styles from the component propagate back to the main HTML and therefore are visible to all components on the page.
Posted Date:- 2021-09-09 04:35:52
Filters are used to format an expression and present it to the user. They can be used in view templates, controllers, or services. Some inbuilt filters are as follows.
1. date - Format a date to a specified format.
2. filter - Select a subset of items from an array.
3. Json - Format an object to a JSON string.
4. limitTo - Limits an array/string, into a specified number of elements/characters.
5. lowercase - Format a string to lowercase.
Posted Date:- 2021-09-09 04:35:03
NgModules are containers that reserve a block of code to an application domain or a workflow. @NgModule takes a metadata object that generally describes the way to compile the template of a component and to generate an injector at runtime. In addition, it identifies the module's components, directives, and pipes, making some of them public, through the export property so that external components can use them.
Posted Date:- 2021-09-09 04:34:05
For every change detection cycle in Angular, an impure pipe is called regardless of the change in the input fields. Multiple pipe instances are created for these pipes. Inputs passed to these pipes can be mutable.
By default, all pipes are pure. However, you can specify impure pipes using the pure property, as shown below.
@Pipe({
name: 'demopipe',
pure : true/false
})
export class DemopipePipe implements PipeTransform {
Posted Date:- 2021-09-09 04:33:40
These pipes are pipes that use pure functions. As a result of this, a pure pipe doesn't use any internal state, and the output remains the same as long as the parameters passed stay the same. Angular calls the pipe only when it detects a change in the parameters being passed. A single instance of the pure pipe is used throughout all components.
Posted Date:- 2021-09-09 04:33:11
As the name suggests, the interface receives an input value and transforms it into the desired format with a transform() method. It is typically used to implement custom pipes.
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'demopipe'
})
export class DemopipePipe implements PipeTransform {
transform(value: unknown, ...args: unknown[]): unknown {
return null;
}
}
Posted Date:- 2021-09-09 04:32:29
We use Angular ngFor directive in the template to display each item in the list. For example, here we iterate over list of users,
<li *ngFor="let user of users">
{{ user }}
</li>
Posted Date:- 2021-09-09 04:31:17
You can store your component’s template in one of two places. You can define it inline using the template property, or you can define the template in a separate HTML file and link to it in the component metadata using the @Component decorator’s templateUrl property. The choice between inline and separate HTML is a matter of taste, circumstances, and organization policy. But normally we use inline template for small portion of code and external template file for bigger views. By default, the Angular CLI generates components with a template file. But you can override that with the below command,
ng generate component hero -it
Posted Date:- 2021-09-09 04:30:48
The Ahead-of-time (AOT) compiler converts the Angular HTML and TypeScript code into JavaScript code during the build phase, i.e., before the browser downloads and runs the code.
Some of its advantages are as follows.
1. Faster rendering
2. Fewer asynchronous requests
3. Smaller Angular framework download size
4. Quick detection of template errors
5. Better security
Posted Date:- 2021-09-09 04:29:56
Annotations in Angular are used for creating an annotation array. They are the metadata set on the class that is used to reflect the Metadata library.
Posted Date:- 2021-09-09 04:28:53
Decorators are a design pattern or functions that define how Angular features work. They are used to make prior modifications to a class, service, or filter. Angular supports four types of decorators, they are:
1. Class Decorators
2. Property Decorators
3. Method Decorators
4. Parameter Decorators
Posted Date:- 2021-09-09 04:28:29
Single-page applications are web applications that load once with new features just being mere additions to the user interface. It does not load new HTML pages to display the new page's content, instead generated dynamically. This is made possible through JavaScript's ability to manipulate the DOM elements on the existing page itself. A SPA approach is faster, thus providing a seamless user experience.
Posted Date:- 2021-09-09 04:27:43
Data binding is among the most important and powerful features that help in establishing communication between DOM and the component. It makes the defining process of interactive applications simple as you no longer need to panic about data pushing or pulling between the component and the template.
Listed below are the four types of data binding in Angular:
1. Event binding
2. Property binding
3. String interpolation
4. Two-way data binding
Posted Date:- 2021-09-09 04:27:04
Singleton objects in Angular that get instantiated only once during the lifetime of an application are called services. An Angular service contains methods that maintain the data throughout the life of an application.
The primary intent of an Angular service is to organize as well as share business logic, models, or data and functions with various components of an Angular application.
The functions offered by an Angular service can be invoked from any Angular component, such as a controller or directive.
Posted Date:- 2021-09-09 04:26:22
MVVM architecture removes tight coupling between each component. The MVVM architecture comprises of three parts:
Model
View
ViewModel
Posted Date:- 2021-09-09 04:23:49
Dependency injection is an application design pattern that is implemented by Angular and forms the core concepts of Angular.
Let us understand in a detailed manner. Dependencies in Angular are services which have a functionality. Various components and directives in an application can need these functionalities of the service. Angular provides a smooth mechanism by which these dependencies are injected into components and directives.
Posted Date:- 2021-09-09 04:23:26
Yes, we can, with Angular Universal, a technology provided by Angular capable of rendering applications on the server-side.
The benefits of using Angular Universal are:
<> Better User Experience: Allows users to see the view of the application instantly.
<> Better SEO: Universal ensures that the content is available on every search engine leading to better SEO.
<> Loads Faster: Render pages are available to the browsers sooner, so the server-side application loads faster.
Posted Date:- 2021-09-09 04:22:39
Conventional HTML elements have some content between the tags. For instance:
<p>Put your paragraph here</p>
Now consider the following example of having custom text between angular tags:
<app-work>This won’t work like HTML until you use ng-content Directive</app-work>
However, doing so won’t work the way it worked for HTML elements. In order to make it work just like the HTML example mentioned above, we need to use the ng-content Directive. Moreover, it is helpful in building reusable components.
Posted Date:- 2021-09-09 04:21:20
Traditionally, VanillaJS and jQuery were used by developers to develop dynamic websites. As the websites became more complex with added features and functionality, it was hard for the developers to maintain the code. Moreover, there was no provision of data handling facilities across the views by jQuery. So, Angular was built to address these issues, thus, making it easier for the developers by dividing code into smaller bits of information that are known as Components in Angular.
Posted Date:- 2021-09-09 04:20:28
TypeScript is a typed superset of JavaScript created by Microsoft that adds optional types, classes, async/await, and many other features, and compiles to plain JavaScript. Angular built entirely in TypeScript and used as a primary language. You can install it globally as
npm install -g typescript
Let's see a simple example of TypeScript usage,
function greeter(person: string) {
return "Hello, " + person;
}
let user = "Sudheer";
document.body.innerHTML = greeter(user);
The greeter method allows only string type as argument.
Posted Date:- 2021-09-09 04:19:39
Using Angular has several advantages, which are listed below:
1. Angular is built using TypeScript, which allows developers to write strongly typed code that will get transpiled into JavaScript. The benefits of strongly typed code are that it is easy to read, maintainable, and less prone to errors. Also, it provides better tooling with type hints and code completion.
2. Angular allows us to separate our code into modules, which can be used to wrap functionalities related to a specific task such as HTTP communication, data validation, routing, etc.
3. Angular has a large ecosystem of tools, libraries, frameworks, plugins, etc. that make the whole development experience much faster and enjoyable. These tools and libraries include Angular CLI, RxJS, NgRx, etc.
Posted Date:- 2021-09-09 04:18:46
Angular has the below key components,
1. Component: These are the basic building blocks of angular application to control HTML views.
2. Modules: An angular module is set of angular basic building blocks like component, directives, services etc. An application is divided into logical pieces and each piece of code is called as “module†which perform a single task.
3. Templates: This represent the views of an Angular application.
4. Services: It is used to create components which can be shared across the entire application.
5. Metadata: This can be used to add more data to an Angular class.
Posted Date:- 2021-09-09 04:15:46
Before JavaScript-based client-side frameworks, the way dynamic websites worked was by taking a template that is nothing but HTML code with spaces left empty for feeding data and content into those templates. This data was usually fetched from a database. After combining the template and data, we would serve the generated HTML content back to the user. As you can see, it was a bit complicated, and in some cases, it took a lot of processing.
To overcome these issues, people came up with another approach in which they send the necessary data to render a page from their web servers to the web browsers and let JavaScript combine this data with a predefined template. Since now, even mobile phones are powerful enough to do this kind of processing, the servers can now just send the data to a client over the internet in a recognizable format, i.e., JSON, XML, etc. This drastically reduces the processing done on the servers and improves performance.
Posted Date:- 2021-09-09 04:14:14
Angular is a modern frontend JavaScript framework developed by Google. Angular itself makes use of several technologies for several reasons to accomplish certain tasks easily as well as to allow developers to have a better experience while developing applications with it. Angular uses TypeScript, which is a superscript of JavaScript. So, any valid JavaScript is a valid TypeScript. However, TypeScript allows us to write JavaScript as a strongly typed language, and we can define our own types as well, which makes catching bugs much easier. It also uses RxJS, which allows developers to better deal with asynchronous operations.
Posted Date:- 2021-09-09 04:13:54
Angular is an open-source web application development framework created by Google. It is used to build frontend, single-page applications that run on JavaScript. It is a full-fledged framework, i.e., it takes care of many aspects of frontend web applications such as HTTP requests, routing, layout, forms, reactivity, validation, etc.
Posted Date:- 2021-09-09 04:13:28
Angular is a TypeScript-based open-source front-end platform that makes it easy to build applications with in web/mobile/desktop. The major features of this framework such as declarative templates, dependency injection, end to end tooling, and many more other features are used to ease the development.
Posted Date:- 2021-09-09 04:12:13