Interview Questions Angular

Define the ng-content Directive?

The ng-content is (a built-in directive in Angular) for projecting content.

Explain Angular Authentication and Authorization.

The user login credentials are passed to an authenticator API, which is present on the server. Post-server-side validation of the credentials, a JWT (JSON Web Token) is returned. The JWT has information or attributes regarding the current user. The user is then identified with the given JWT. This is called authentication. Post logging in successfully, different users have a different levels of access. While some may access everything, access for others might be restricted to only some resources. The level of access is an authorization.

Refer to a template variable anywhere in the component's template. Here, a <button> further down the template refers to the phone variable.

<input #phone placeholder="phone number" /> <!-- lots of other elements --> <!-- phone refers to the input element; pass its `value` to an event handler --> <button type="button" (click)="callPhone(phone.value)">Call</button>

1. Component

1. Components - Control one or more views.

@component decorator has metadata that tells Angular how to process the class>

1. Selector: name of HTML element 2. Template or templateURL - tie component 3. logic to the view. 3. Styles - styles array for our component 4. Directives: other component directives we want to use in our component. 5. Providers - services we want to use.

Template Reference Variables?

A template reference variable (#var) is a reference to a DOM element within a template. The # is used to declare a reference variable in the template.

Please explain the various features of Angular. Answer: There are several features of Angular that makes it an ideal front end JavaScript framework. Most important of them are described as follows:

Angular CLI Angular provides support for command-line interface tools. These tools can be used for adding components, testing, instant deploying, etc.

What is new in Angular 6?

Angular Elements - allows converting Angular components into web components and embeds the same in some non-angular apps.

Angular Interview Questions: From: https://hackr.io/blog/angular-interview-questions What is Angular?

Angular is a typescript based open-source web application framework, developed and maintained by Google. Angular offers fast and powerful way to build front-end web-based applications.

Angular 7 - they split the angular core because not every module is needed by the developer. Thus, each slit has no more than 418 modules.

Angular-7 comes with a new enhanced version of the ng-compiler.

Question: How do Observables differ from Promises?

Answer: As soon as a promise is made, the execution takes place. However, this is not the case with observables because they are lazy. This means that nothing happens until a subscription is made. While promises handle a single event, observable is a stream that allows passing of more than one event. A callback is made for each event in an observable.

Question: Discuss the advantages and disadvantages of using Angular?

Answer: Following are the various advantages of using Angular: Ability to add a custom directive Exceptional community support Facilitates client and server communication Features strong features, such as Animation and Event Handlers Follows the MVC pattern architecture Offers support for static template and Angular template Support for two-way data-binding Supports dependency injection, RESTful services, and validations

Question: Explain the difference between an Annotation and a Decorator in Angular?

Answer: In Angular, annotations are used for creating an annotation array. They are only metadata set of the class using the Reflect Metadata library. Decorators in Angular are design patterns used for separating decoration or modification of some class without changing the original source code.

Service

Class with a very well defined purpose. Injectable. Avoids Repeating yourself.

What is compilation?

Conversation to executable JavaScript.

Answer: There are several features of Angular that makes it an ideal front end JavaScript framework. Most important of them are described as follows:

Cross-Platform App Development Angular can be used for building an efficient and powerful desktop, native, and progressive web apps. Angular provides support for building native mobile applications using Cordova, Ionic, or NativeScript. Angular allows creating high performance, offline, and zero-step installation progressive web apps using modern web platform capabilities. The popular JS framework can also be used for building desktop apps for Linux, macOS, and Windows.

Data Binding - The mechanism by which parts of a template coordinates with parts of a component is known as data binding. In order to let Angular know how to connect both sides (template and its component), the binding markup is added to the template HTML.

Dependency Injection (DI) - Angular makes use of DI to provide required dependencies to new components. Typically, dependencies required by a component are services. A component's constructor parameters tell Angular about the services that a component requires. So, a dependency injection offers a way to supply fully-formed dependencies required by a new instance of a class.

What is a Directive in Angular ?

Directives allow us to add metadata to a class that determines how the directive should be processed. Some metadata properties of a directive are - 1. selector - name of component in a template 2. providers - list of providers available to component and its children. 3. exportAs - name which comp. instance is exported in a template.

Question: What are directives in Angular? Answer: Directives are one of the core features of Angular. They allow an Angular developer to write new, application-specific HTML syntax.

Directives are functions that are executed by the Angular compiler when the compiler finds them in the DOM. Directives are of three types: Attribute Directives, ngStyle, ngClass Component Directives: directives with a template. Structural Directives: change the DOM layout by adding and removing DOM elements. *ngIf, *inFor, *ngSwitch

What is AOT ? (Ahead of time) Compilation

Each Angular app gets compiled internally. Angular compiler takes the code compiles it, and then produces some JS code. This happens only once per occasion per user. It is known as AOT compilation. To modify, you need go into the angular webpack and configure the angularCompilerPlugIn

ng g class myclass[ options ]

How do you generate a class in Angular 7?

What are events in Angular? Events in Angular are specific directives that help in customizing the behavior of various DOM events. Few of the events supported by Angular are listed below: ng-keyup ng-mousedown ng-mouseenter ng-mouseleave ng-mousemove ng-mouseover ng-mouseup ng-blur

How to create a service in Angular? In Angular, a service is a substitutable object that is wired together using dependency injection. A service is created by registering it in the module it is going to be executed within. There are basically three ways in which you can create an angular service. They are basically three ways in which a service can be created in Angular: Factory Service Provider

What is ngOnInit?

Is a life cycle hook that is called after Angular has finished initializing all data-bound properties of a directive.

Modules

NgModules - all Angular apps have at least one module, the app.module.ts where all components, services, imports meet.

A component is a directive with a template. We use the Component whenever we want reusable set of DOM elements with behaviors of UI.

Services are specific set of logic that is inject-able and reusable.

What do you understand by dirty checking in Angular? In Angular, the digest process is known as dirty checking. It is called so as it scans the entire scope for changes. In other words, it compares all the new scope model values with the previous scope values.

Since all the watched variables are contained in a single loop, any change/update in any of the variable leads to reassigning of rest of the watched variables present inside the DOM. A watched variable is in a single loop(digest cycle), any value change of any variable forces to reassign values of other watched variables in DOM

Question: How to generate a class in Angular 7 using CLI? ng generate class Dummy [options]

This generates a class called Dummy.

3. Dependency Injection

provide required dependencies to new components.

In Angular, describe how will you set, get and clear cookies? For using cookies in Angular, you need to include a module called ngCookies angular-cookies.js. To set Cookies - For setting the cookies in a key-value format 'put' method is used. cookie.set('nameOfCookie',"cookieValue"); To get Cookies - For retrieving the cookies 'get' method is used. cookie.get('nameOfCookie'); To clear Cookies - For removing cookies 'remove' method is used. cookie.delete('nameOfCookie');

xplain ng-app directive in Angular. ng-app directive is used to define Angular applications which let us use the auto-bootstrap in an Angular application. It represents the root element of an Angular application and is generally declared near <html> or <body> tag. Any number of ng-app directives can be defined within an HTML document but just a single Angular application can be officially bootstrapped implicitly. Rest of the applications must be manually bootstrapped.

What is string interpolation in Angular?

Also referred to as mustache syntax, string interpolation in Angular refers to a special type of syntax that makes use of template expressions in order to display the component data. These template expressions are enclosed within double curly braces i.e. {{ }}. The JavaScript expressions that are to be executed by Angular are added within the curly braces and the corresponding output is embedded into the HTML code. Typically, these expressions are updated and registered like watches as a part of the digest cycle.

Question: Could you explain the difference between Angular expressions and JavaScript expressions? Answer: Although both Angular expressions and JavaScript expressions can contain literals, operators, and variables, there are some notable dissimilarities between the two. Important differences between Angular expressions and JavaScript expressions are enlisted below:

Angular expressions support filters while JavaScript expressions do not. It is possible to write Angular expressions inside the HTML tags. JavaScript expressions, contrarily, can't be written inside the HTML tags JavaScript expressions support conditionals, exceptions, and loops, Angular expressions don't.

Directives are perhaps the most important bit of an Angular application, and if we think about it, the most-used Angular unit, the component, is actually a directive. As we saw earlier, components are just directives with templates

Directives, the image represents the types of directives in Angular. Attribute: ngClass / ngStyle Structural: *ngIf / *ngFor / *ngSwitch Custom : Highliter / Dropdown

What are the building blocks of Angular? As we saw earlier, components are just directives with templates, these are the building blocks of Angular. There are 9 building blocks - What are they and what is the purpose of each?

Name the and define them...

Decorators provide metadata - how a component is processed & instantiated at run-time.

Decorators: @Input Decorator Pass Data from the parent to child @Output Decorator: Pass Data from child to parent To create a custom directive: ng g d myDirective: @Directive({ selector: '[ttClass]', }) export class ttClassDirective implements OnInit {}

Question: Enumerate some salient features of Angular 7.

Answer: Unlike the previous versions of Angular, the 7th major release comes with splitting in @angular/core. This is done in order to reduce the size of the same. Typically, not each and every module is required by an Angular developer. Therefore, in Angular 7 each split of the @angular/core will have no more than 418 modules. Also, Angular 7 brings drag-and-drop and virtual scrolling into play. The latter enables loading as well as unloading elements from the DOM. For virtual scrolling, the latest version of Angular comes with the package. Furthermore, Angular 7 comes with a new and enhanced version of the ng-compiler.

What is bootstrapping in Angular? Bootstrapping in Angular is nothing but initializing, or starting the Angular app. Angular supports automatic and manual bootstrapping.

Automatic Bootstrapping: this is done by adding the ng-app directive to the root of the application, typically on the tag or tag if you want angular to bootstrap your application automatically. When Angular finds ng-app directive, it loads the module associated with it and then compiles the DOM.

What is Dependency Injection in Angular? Dependency Injection (DI) is a software design pattern where the objects are passed as dependencies rather than hard-coding them within the component.

Differentiate between one-way binding and two-way data binding. In One-Way data binding, the View or the UI part does not update automatically whenever the data model changes. You need to manually write custom code in order to update it every time the view changes.

Answer: There are several features of Angular that makes it an ideal front end JavaScript framework. Most important of them are described as follows:

Code Generation Angular is able to convert templates into highly-optimized code for modern JavaScript virtual machines.

Answer: There are several features of Angular that makes it an ideal front end JavaScript framework. Most important of them are described as follows:

Code Splitting With the new Component Router, Angular apps load quickly. The Component Router offers automatic code-splitting so that only the code required to render the view that is requested by a user is loaded.

Disadvantages of using Angular are enumerated as follows:

Complex SPAs can be inconvenient and laggy to use due to their size Dynamic applications do not always perform well Learning Angular requires a decent effort and time

Answer: There are essentially 9 building blocks of an Angular application. These are:

Components - A component controls one or more views. Each view is some specific section of the screen. Every Angular application has at least one component, known as the root component. It is bootstrapped inside the main module, known as the root module. A component contains application logic defined inside a class. This class is responsible for interacting with the view via an API of properties and methods.

Template

Components View

What is data binding and how many ways can it be done ?

Connecting application data with the DOM - component & view. 1. Event-Binding - responds to user input 2. Property Binding - Interpolation of values 3. Two-way binding - ngModel directive [()]=" " banana box is used to achieve binding where changes in the application state are automatically reflected in the view and vice-versa.

2. Data Binding One Way: Two Way: <app-sizer [(size)]="fontSizePx"></app-sizer>

Data Binding - between template & component data is bound to the template element.

Directives - The templates used by Angular are dynamic in nature. Directives are responsible for instructing Angular about how to transform the DOM when rendering a template. Actually, components are directives with a template. Other types of directives are attribute and structural directives.

Metadata - In order to let Angular know how to process a class, metadata is attached to the class. For doing so decorators are used.

Can you explain the concept of scope hierarchy in Angular? Angular organizes the $scope objects into a hierarchy that is typically used by views. This is known as the scope hierarchy in Angular. It has a root scope that can further contain one or several scopes called child scopes.

In a scope hierarchy, each view has its own $scope. Hence, the variables set by a view's view controller will remain hidden to other view controllers. Following is a typical representation of a Scope Hierarchy: Root $scope $scope for Controller 1 $scope for Controller 2...... $scope for Controller n

What types of compilation is there?

Just-in-time JIT Compiles Typescript - at run time. Some lag time or wait with the view. When you are using Ahead of Time Compiler, compilation only happens once, while you build your project. AOT Ahead of time compilation -runs at build time. No lag or wait. When you run the ng build (build only) or ng serve (build and serve locally) CLI commands, the type of compilation (JIT or AOT) depends on the value of the aot property in your build configuration specified in angular.json. By default, aot is set to true for new CLI applications.

Does Angular support nested controllers? Yes, Angular does support the concept of nested controllers. The nested controllers are needed to be defined in a hierarchical manner for using it in the View.

List at down the ways in which you can communicate between applications modules using core Angular functionality. Below are the most general ways for communicating between application modules using core Angular functionality : Using events Using services By assigning models on $rootScope Directly between controllers [$parent, $$childHead, $$nextSibling, etc.] Directly between controllers [ControllerAs, or other forms of inheritance]

What is component decorators in Angular ?

Main objective of decorators is to add metadata to the class that tells Angular how to process a class. Decorators are functions that modify JavaScript classes.

Question: Please explain the differences between Angular and jQuery? Answer: The single biggest difference between Angular and jQuery is that while the former is a JS frontend framework, the latter is a JS library. Despite this, there are some similarities between the two, such as both features DOM manipulation and provides support for animation.

Nonetheless, notable differences between Angular and jQuery are: Angular has two-way data binding, jQuery does not Angular provides support for RESTful API while jQuery doesn't Angular support routing where jQuery does not. Angular offers form validation, jQuery does not.

In the template, you use the hash (#) character to declare a template variable. The following template variable, #phone, declares a phone variable on an <input> element. <input #phone placeholder="phone number" />

Now we can reference the value with name.value and the name of the placehoder. name.placeholder

What is a single page application?

One single page, normally the index.HTML is maintained although the URL keeps changing. Faster and easier to develop.

Question: Please explain the digest cycle in Angular?Answer: The process of monitoring the watchlist in order to track changes in the value of the watch variable is termed the digest cycle in Angular. The previous and present versions of the scope model values are compared in each digest cycle. Although the digest cycle process gets triggered implicitly, it is possible to start it manually by using the $apply() function.

Question: Could you explain the various types of filters in Angular. Answer: In order to format the value of expression so that it can be displayed to the user, Angular has filters. It is possible to add these filters to the controllers, directives, services, or templates. Angular also provides support for creating custom filters. cont.....

Question: What is ngOnInit ()? How to define it? Answer: ngOnInit () is a lifecycle hook that is called after Angular has finished initializing all data-bound properties of a directive. It is defined as:

Question: What is SPA (Single Page Application) in Angular? Contrast SPA technology with traditional web technology? Answer: In the SPA technology, only a single page, which is index.HTML, is maintained although the URL keeps on changing. Unlike traditional web technology, SPA technology is faster and easy to develop as well.

Question: What is the process called by which TypeScript code is converted into JavaScript code? Answer: It is called Transpiling

Question: What is ViewEncapsulation and how many ways are there do to do it in Angular?Answer: To put simply, ViewEncapsulation determines whether the styles defined in a particular component will affect the entire application or not. Angular supports 3 types of ViewEncapsulation: Emulated - Styles used in other HTML spread to the component Native - Styles used in other HTML doesn't spread to the component None - Styles defined in a component are visible to all components of the application

Question: Observe the following image: Next page: Question: Could you explain the concept of templates in Angular? Answer: Written with HTML, templates in Angular contains Angular-specific attributes and elements. Combined with information coming from the controller and model, templates are then further rendered to cater the user with the dynamic view.

Question: What should replace the "?"?Answer: Directives. The image represents the types of directives in Angular; Attribute, structural, and custom.

What are structural Directives?

Responsible for HTML layout. Shape or reshape the DOM structure by adding, removing, or manipulating elements. All have an asterisk ( ' * ' ) *ngFor / *ngIf / *ngSwitch

4. Directives

Responsible for instructing Angular about how to transform the DOM when rendering a Template. 3-Types - ASC Attribute - ngClass / ngStyle Structural - *ngIf / *ngFor / *ngSwitch Custom - Highlight / Dropdown

Routing

Responsible for interpreting a browser URL as an instruction to navigate to a client-generated view. The router is bound to links on a page to tell Angular to navigate the application view when the user clicks on it.

Modules - Also known as NgModules, a module is an organized block of code with a specific set of capabilities. It has a specific application domain or a workflow. Like components, any Angular application has at least one module. This is known as the root module. Typically, an Angular application has several modules.

Routing - An Angular router is responsible for interpreting a browser URL as an instruction to navigate to a client-generated view. The router is bound to links on a page to tell Angular to navigate the application view when a user clicks on it.

Could you explain services in Angular?

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.

Answer: There are several features of Angular that makes it an ideal front end JavaScript framework. Most important of them are described as follows:

Synergy with Popular Code Editors and IDEs Angular offers code completion, instant errors, etc. with popular source code editors and IDEs.

Services - A very broad category, a service can be anything ranging from a value and function to a feature that is required by an Angular app. Technically, a service is a class with a well-defined purpose.

Template - Each component's view is associated with its companion template. A template in Angular is a form of HTML tags that lets Angular know that how it is meant to render the component.

What is @NgModule?

The NgModule class describes how the application parts fit together. Every app has at least one, the app.module.ts or the root module that we bootstrap to the launch app. 1. imports - Modules that the application needs or depends on to run like the Browser module that every application needs. 2. declarations - apps components that belong to the NgModule class. Every component must be declared in the @NgModule to use it. 3. Bootstrap - root component that Angular creates and inserts into the index.html host web page.

Question: What is Data Binding? How many ways it can be done?Answer: In order to connect application data with the DOM (Data Object Model), data binding is used. It happens between the template (HTML) and component (TypeScript).

There are 3 ways to achieve data binding: Event Binding - Enables the application to respond to user input in the target environment Property Binding - Enables interpolation of values computed from application data into the HTML Two-way Binding - Changes made in the application state gets automatically reflected in the view and vice-versa. The ngModel directive is used for achieving this type of data binding.

What are Angular Global APIs? Angular Global API is a combination of global JavaScript functions for performing various common tasks like: Comparing objects Iterating objects Converting data

There are some common Angular Global API functions like: angular. lowercase: Converts a string to lowercase string. angular. uppercase: Converts a string to uppercase string. angular. isString: Returns true if the current reference is a string. angular. isNumber: Returns true if the current reference is a number.

What are the Angular Modules? All the Angular apps are modular and follow a modularity system known as NgModules. These are the containers which hold a cohesive block of code dedicated specifically to an application domain, a workflow, or some closely related set of capabilities.

These modules generally contain components, service providers, and other code files whose scope is defined by the containing NgModule. With modules makes the code becomes more maintainable, testable, and readable. Also, all the dependencies of your applications are generally defined in modules only.

What is it called when you compile typescript to Javascript?

Transpiling - Babel, or Traceur

What is Angular Material ?

UI Component Library. Helps create attractive, consistent, and fully functional web pages as well as web apps.

What is ViewEncapsulation and how many ways are there to do it in Angular?

ViewEncapsulation determines whether the styles defined in a particular component will affect the entire application or not. 1. Emulated - Styles used in other HTML spread to the component. 2. Native - Styles used in other HTML does NOT spread to other component. 3. None - Styles defined in a component are visible to all components of the app.

What is scope in Angular? Scope in Angular is an object that refers to the application model. It is an execution context for expressions. Scopes are arranged in a hierarchical structure which mimics the DOM structure of the application. Scopes can watch expressions and propagate events.

What are directives in Angular? A core feature of Angular, directives are attributes that allow you to write new HTML syntax, specific to your application. They are essentially functions that execute when the Angular compiler finds them in the DOM. The Angular directives are segregated into 3 parts: Component Directives Structural Directives Attribute Directives

What is Transpiling in Angular?Transpiling in Angular refers to the process of conversion of the source code from one programming language to another. In Angular, generally, this conversion is done from TypeScript to JavaScript. It is an implicit process and happens internally.

What are events in Angular? Events in Angular are specific directives that help in customizing the behavior of various DOM events. Few of the events supported by Angular are listed below: ng-click ng-copy ng-cut ng-dblclick ng-keydown ng-keypress

What are Angular expressions? Angular expressions are code snippets that are usually placed in binding such as {{ expression }} similar to JavaScript. These expressions are used to bind application data to HTML Syntax: {{ expression }}

What are templates in Angular? Templates in Angular are written with HTML that contain Angular-specific elements and attributes. These templates are combined with information coming from the model and controller which are further rendered to provide a dynamic view to the user.

On which types of the component can we create a custom directive? Angular provides support to create custom directives for the following: Element directives − Directive activates when a matching element is encountered. Attribute − Directive activates when a matching attribute is encountered. CSS − Directive activates when a matching CSS style is encountered. Comment − Directive activates when a matching comment is encountered

What are the different types of filters in Angular? Below are the various filters supported by Angular: currency: Format a number to a currency format. date: Format a date to a specified format. filter: Select a subset of items from an array. json: Format an object to a JSON string. limit: To Limits an array/string, into a specified number of elements/characters. lowercase: Format a string to lower case. number: Format a number to a string. orderBy: Orders an array by an expression. uppercase: Format a string to upper case.

What is a singleton pattern and where we can find it in Angular? Singleton pattern in Angular is a great pattern which restricts a class from being used more than once. Singleton pattern in Angular is majorly implemented on dependency injection and in the services. Thus, if you use 'new Object()' without making it a singleton, then two different memory locations will be allocated for the same object. Whereas, if the object is declared as a singleton, in case it already exists in the memory then simply it will be reused.

What do you understand by REST in Angular? REST stands for REpresentational State Transfer. REST is an API (Application Programming Interface) style that works on the HTTP request. In this, the requested URL pinpoints the data that needs to be processed. Further ahead, an HTTP method then identifies the specific operation that needs to be performed on that requested data. Thus, the APIs which follows this approach are known as RESTful APIs. POST-GET-PUT-DELETE

Manual Bootstrapping: Manual bootstrapping provides you more control on how and when to initialize your Angular application. It is useful where you want to perform any other operation before Angular wakes up and compile the page.

What do you understand by constants in Angular? In Angular, constants are similar to the services which are used to define the global data. Constants are declared using the keyword "constant". They are created using constant dependency and can be injected anywhere in the controller or services.

In Angular what is string interpolation? String interpolation in Angular is a special syntax that uses template expressions within double curly {{ }} braces for displaying the component data. It is also known as moustache syntax. The JavaScript expressions are included within the curly braces to be executed by Angular and the relative output is then embedded into the HTML code. These expressions are usually updated and registered like watches, as a part of the digest cycle.

What do you understand by controllers in Angular? Controllers are JavaScript functions which provide data and logic to HTML UI. As the name suggests, they control how data flows from the server to HTML UI.

Question: What is Angular Material? It is a UI component library. Angular Material helps in creating attractive, consistent, and fully functional web pages as well as web applications. It does so while following modern web design principles, including browser portability and graceful degradation.

What is AOT (Ahead-Of-Time) Compilation? Each Angular app gets compiled internally. The Angular compiler takes in the JS code, compiles it, and then produces some JS code. This happens only once per occasion per user. It is known as AOT (Ahead-Of-Time) compilation.

Question: Why prioritize TypeScript over JavaScript in Angular?Answer: TypeScript is developed by Microsoft and it is a superset of JavaScript. The issue with JS is that it isn't a true OOP language. As the JS code doesn't follow the Prototype Pattern, the bigger the size of the code the messier it gets. Hence, it leads to difficulties in maintainability as well as reusability. To offset this, TypeScript follows a strict OOP approach.

What is Angular mainly used for? Angular is typically used for the development of SPA which stands for Single Page Applications. Angular provides a set of ready-to-use modules that simplify the development of single page applications. Not only this, with features like built-in data streaming, type safety, and a modular CLI, Angular is regarded as a full-fledged web framework.

In conventional web technology, as soon as a client requests a webpage, the server sends the resource. However, when again the client requests for another page, the server responds again with sending the requested resource. The problem with this technology is that it requires a lot of time.

What is the code for creating a decorator? We create a decorator called Dummy: function Dummy(target) { dummy.log('This decorator is Dummy', target); }

As soon as a promise is made, the execution takes place. However, this is not the case with an observable. Observables are lazy. This means nothing happens until a subscription is made. While a promise handles a single event, observable are streams that allow the passing of multiple data. The promise is one result per event.

What is the difference between a Observable and a Promise?

What is data binding? In Angular, data binding is one of the most powerful and important features that allow you to define the communication between the component and DOM(Document Object Model). It basically simplifies the process of defining interactive applications without having to worry about pushing and pulling data between your view or template and component. In Angular, there are four forms of data binding: String Interpolation Property Binding Event Binding Two-Way Data Binding

What is the purpose of a filter in Angular? Filters in Angular are used for formatting the value of an expression in order to display it to the user. These filters can be added to the templates, directives, controllers or services. Not just this, you can create your own custom filters. Using them, you can easily organize data in such a way that the data is displayed only if it fulfills certain criteria. Filters are added to the expressions by using the pipe character |, followed by a filter.

TWO Way binding

Whereas, in Two-way data binding, the View or the UI part is updated implicitly as soon as the data model changes. It is a synchronization process, unlike One-way data binding.

Organizing data in such a way so that it is displayed only when certain criteria are fulfilled is made possible using filters. Filters are added to the expressions using the pipe '|' character. Various types of Angular filters are enumerated as follows:

currency - Formats a number to the currency format date - Formats a data to some specific format filter - Selects a subset of items from an array json - Formats an object to a JSON string limitTo - Limits an array or string into a specified number of characters or elements lowercase - Formats a string to lowercase number - Formats a number to a string orderBy - Orders an array by an expression

What are the lifecycle hooks for components and directives? An Angular component has a discrete life-cycle which contains different phases as it transits through birth till death. In order to gain better control of these phases, we can hook into them using the following: constructor: It is invoked when a component or directive is created by calling new on the class. ngOnChanges: It is invoked whenever there is a change or update in any of the input properties of the component.

ngOnInit: It is invoked every time a given component is initialized. This hook is only once called in its lifetime after the first ngOnChanges. ngDoCheck: It is invoked whenever the change detector of the given component is called. This allows you to implement your own change detection algorithm for the provided component. ngOnDestroy: It is invoked right before the component is destroyed by Angular. You can use this hook in order to unsubscribe observables and detach event handlers for avoiding any kind of memory leaks.

MetaData

tells Angular how to process a class, thus metadata is attached to the class with decorators.