Angular

What do you mean by templates

A template is an HTML snippet that tells Angular how to render the component in angular application. The template is immediately associated with a component defines that component's view.

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.

What do you mean by CLI

Angular Command Line Interface Angular CLI stands for Angular Command Line Interface. As the name

Pipes - Angular

Angular Pipes are a useful feature. The pipes are a simple way to transform values in an Angular template. The pipe takes in a value or values and then returns a value. Angular comes with the stock of pipes such as DatePipe, UpperCasePipe, LowerCasePipe, CurrentcyPipe, and PercentPipe and they are all available for use in any angular template.

What is the difference between angular and react 1

Angular is a TypeScript based JavaScript framework. It is written in TypeScript. Angular is developed and maintained by Google React is not a framework. It is a JavaScript library developed and maintained by Facebook and described as "a JavaScript library for building user interfaces. Angular uses regular DOM. The regular DOM updates the entire tree structure of HTML tags. It doesn't make difference in a simple real app but if you are dealing with large amount of data requests on the same page (and the HTML block is replaced for every page request), it affects the performance as well as the user's experience.React uses virtual DOM which makes it amazing fast. It was said the most prominent feature of React when it was released.It updates only the specific part within a block of HTML codes. The virtual DOM looks only at the differences between the previous and current HTML and changes only that part which is required to be updated.

What are observables

Angular makes use of observables as an interface to handle a variety of common asynchronous operations. For example: You can define custom events that send observable output data from a child to a parent component. The HTTP module uses observables to handle AJAX requests and responses. The Router and Forms modules use observables to listen for and respond to user-input events.

What is the difference between angular and react 2

Angular uses enhanced HTML templates with Angular directives i.e. "ng-if" or "ng-for" etc. It is quite difficult because you have to learn its specific syntax.React uses UI templates and inline JavaScript logic together which was not done by any company before. This is called JSX. React uses component which contains both the markup AND logic in the same file. React also uses an XML-like language which facilitates developers to write markup directly in their JavaScript code. JSX is a big advantage for development, because you have everything in one place, and code completion and compile-time checks work better. Angular is fast as compared to old technologies but React is faster than Angular.The size of Angular is large, so it takes longer load time and performance on mobile.

Angular and AngularJs

Architecture - AngularJS supports the MVC design model. Angular relies on components and directives instead Dependency Injection (DI) - Angular supports a hierarchical Dependency Injection with unidirectional tree-based change detection. AngularJS doesn't support DI Expression Syntax - In AngularJS, a specific ng directive is required for the image or property and an event. Angular, on the other hand, use () and [] for blinding an event and accomplishing property binding, respectively Mobile Support - AngularJS doesn't have mobile support while Angular does have Recommended Language - While JavaScript is the recommended language for AngularJS, TypeScript is the recommended language for Angular Routing - For routing, AngularJS uses $routeprovider.when() whereas Angular uses @RouteConfig{(...)} Speed - The development effort and time are reduced significantly thanks to supporting for two-way data binding in AngularJS. Nonetheless, Angular is faster thanks to upgraded features Structure - With a simplified structure, Angular makes the development and maintenance of large applications easier. Comparatively, AngularJS has a less manageable structure Support - No official support or updates are available for the AngularJS. On the contrary, Angular has active support with updates rolling out every now and then

What is a component

Components are a logical piece of code for Angular JS application. A Component consists of the following − Template − This is used to render the view for the application. This contains the HTML that needs to be rendered in the application. This part also includes the binding and directives. Class − This is like a class defined in any language such as C. This contains properties and methods. This has the code which is used to support the view. It is defined in TypeScript. Metadata − This has the extra data defined for the Angular class. It is defined with a decorator.

Define the ng-content Directive?

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.

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. The concept of Dependency Injection comes in handy when you are trying to separate the logic of object creation to that of its consumption. The 'config' operation makes use of DI that must be configured beforehand while the module gets loaded to retrieve the elements of the application. With this feature, a user can change dependencies as per his requirements.

Event Binding

Event Binding A component can listen to an event raised by another component by adding the target event within parenthesis () in the target element. It is called Event Binding. //component-a.template.html<component-b (amountChange)="doSomething()"> </component-b> Now combining these both, we could create a two-way binding property in components. The syntax would be [()], which is popularly called banana-in-a-box.

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.

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. 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.

TypeScript

TypeScript is an open-source programming language developed and maintained by Microsoft. It is a strict syntactical superset of JavaScript, and adds optional static typing to the language. ... This enables other programs to use the values defined in the files as if they were statically typed

What is Angular?

TypeScript-based open-source web application framework developed and maintained by Google. It offers an easy and powerful way of building front end web-based applications. Angular integrates a range of features like declarative templates, dependency injection, end-to-end tooling, etc. that facilitates web application development.

ES6 and TypeScript difference

TypesScript is known as Object oriented programming language whereas JavaScript is a scripting language. TypeScript has a feature known as Static typing but JavaScript does not have this feature. TypeScript gives support for modules whereas JavaScript does not support modules. TypeScript has Interface but JavaScript does not have Interface. TypeScript support optional parameter function but JavaScript does not support optional parameter function.

Two way binding present or not

Unlike AngularJS, Angular does not provide two way binding by default, which avoids all the digest cycle and watchers issues that AngularJS dealt with. But sometimes, there would be a need for a two way data binding between two components — Parent and its child. This article demonstrates how to create two way data binding between two components.

Property Binding

When you pass the data property of a component as an attribute within the square brackets [] to the target element in HTML, it is called Property Binding. //component-a.template.html<component-b [amount]="amount"></component-b> The square bracket tells the angular to evaluate the expression given in the right-hand side and it is a live property, which means when Component A updates the property amount, Component B will receive the updates. Communication is one-way though. When Component B updates the property amount, Component A would not know about it, which is why we need something called Event binding

How do we bind events

You can use Angular event bindings to respond to any DOM event. Many DOM events are triggered by user input. Binding to these events provides a way to get input from the user. To bind to a DOM event, surround the DOM event name in parentheses and assign a quoted template statement to it.

How data is shared between components

a. Parent Component => Child Component : @Input — property binding. b. Parent Component <=> Child Component : viewChild c. Child Component => Parent Component : @Output & EventEmitter via event binding. d. Unrelated Or Sibling Components : Using Shared Service.