Explore topic-wise InterviewSolutions in .

MVVM architecture consists of three parts:

1. Model


2. View


3. ViewModel

• 
  Model contains the structure of an entity. In simple terms it contains data of an object.


• 
  View is the visual layer of the application. It displays the data contained inside the Model. In angular terms, this will be the HTML template of a component.


• 
  ViewModel is an abstract layer of the application. A viewmodel handles the logic of the application. It manages the data of a model and displays it in the view.

View and ViewModel are connected with data-binding (two-way data-binding in this case). Any change in the view, the viewmodel takes a note and changes the appropriate data inside the model.

Every application contains at least one Angular module, which is referred to as the bootstrapping module. AppModule is the most popular name for it.

Example: The following is the default structure of an AngularCLI-generated AppModule:

The process of synchronizing a model with a view is known as Change Detection. Even when utilizing the ng Model to implement two-way binding, which is syntactic sugar on top of a unidirectional flow. Change detection is incredibly fast, but as an app's complexity and the number of components increase, change detection will have to do more and more work.

Change Detection Mechanism-moves only ahead and never backward, beginning with the root component and ending with the last component. This is what one-way data flow entails. The tree of components is the architecture of an Angular application. Each component is a child, but the child is not a parent. A $digest loop is no longer required with the one-way flow.

Every Angular application consists of components and templates that the browser cannot understand. Therefore, all the Angular applications need to be compiled first before running inside the browser.

Angular provides two types of compilation:

• JIT(Just-in-Time) compilation


• AOT(Ahead-of-Time) compilation

In JIT compilation, the application compiles inside the browser during runtime. Whereas in the AOT compilation, the application compiles during the build time.

The advantages of using AOT compilation are:

• Since the application compiles before running inside the browser, the browser loads the executable code and renders the application immediately, which leads to faster rendering.


• In AOT compilation, the compiler sends the external HTML and CSS files along with the application, eliminating separate AJAX requests for those source files, which leads to fewer ajax requests.


• Developers can detect and handle errors during the building phase, which helps in minimizing errors.


• The AOT compiler adds HTML and templates into the JS files before they run inside the browser. Due to this, there are no extra HTML files to be read, which provide better security to the application.

By default, angular builds and serves the application using JIT compiler:

For using AOT compiler following changes should be made:

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.

Example: In the following example we will set the Authorization header Bearer for all the requests:

We have to register the interceptor as singleton in the module providers

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.

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: 

Angular Material is a user interface component package that enables professionals to create a uniform, appealing, and fully functioning websites, web pages, and web apps. It does this by adhering to contemporary web design concepts such as gentle degradation and browser probability.

RouterState is a route tree. This tree's nodes are aware of the "consumed" URL segments, retrieved arguments, and processed data. You may use the Router service and the routerState property to get the current RouterState from anywhere in the application.

Example: 

RouterLink is an anchor tag directive that gives the router authority over those elements. Because the navigation routes are set.

Example: As seen below, you may pass string values to the router-link directive.

Every component in Angular has a lifecycle, and different phases it goes through from the time of creation to the time it's destroyed. Angular provides hooks to tap into these phases and trigger changes at specific phases in a lifecycle.

• 
  ngOnChanges( ) This hook/method is called before ngOnInit and whenever one or more input properties of the component change.
  This method/hook receives a SimpleChanges object which contains the previous and current values of the property.


• 
  ngOnInit( ) This hook gets called once, after the ngOnChanges hook.
  It initializes the component and sets the input properties of the component.


• 
  ngDoCheck( ) It gets called after ngOnChanges and ngOnInit and is used to detect and act on changes that cannot be detected by Angular.
  We can implement our change detection algorithm in this hook. ngAfterContentInit( ) It gets called after the first ngDoCheck hook. This hook responds after the content gets projected inside the component.


• 
  ngAfterContentChecked( ) It gets called after ngAfterContentInit and every subsequent ngDoCheck. It responds after the projected content is checked.


• 
  ngAfterViewInit( ) It responds after a component's view, or a child component's view is initialized.


• 
  ngAfterViewChecked( ) It gets called after ngAfterViewInit, and it responds after the component's view, or the child component's view is checked.


• 
  ngOnDestroy( ) It gets called just before Angular destroys the component. This hook can be used to clean up the code and detach event handlers.

Let’s understand how to use ngOnInit hook, since it’s the most often used hook. If one has to process a lot of data during component creation, it’s better to do it inside ngOnInit hook rather than the constructor: 

 As you can see we have imported OnInit but we have used ngOnInit function. This principle should be used with the rest of the hooks as well.

TypeScript classes are used to create components. This class genre is then decorated with the "@Component" decorator. The decorator's function is to take a metadata object holding component information and decorate it.

A Decorator is always preceded by @. The Decorator must come before the class definition. We can also make our own decorators.

Example: The example below shows us a Class decorated with the @Component decorator.

The metadata object received by the decorator has values such as templateUrl, selector, and others, with the templateUrL property pointing to an HTML file that defines what you see on the application.

These are the second most popular types of decorators. They enable us to enhance some of the properties in our classes. We can certainly understand why we utilize any certain class property by using a property decorator.

There are many property decorators available for example @Input(), @Output, @ReadOnly(), @Override() 

Example: 

The input binding would be sent via a component property binding:

Method decorators, as the name implies, are used to add functionality to the methods defined within our class.

Example: @HostListener, is a good example of method decorators.

The @HostListener decorator is used before the onHostClick () method in the above example code.

Class Decorators are the highest-level decorators that determine the purpose of the classes. They indicate to Angular that a specific class is a component or module. And the decorator enables us to declare this effect without having to write any code within the class.

Example:

It is a component or module in which no code in the class is required to tell Angular. We only need to design it, and Angular will take care of the rest.

To fine-tune its output, a pipe can receive any number of optional parameters. The parameterized pipe is constructed by first stating the pipe name followed by a colon (:) and then the parameter value. If the pipe supports several arguments, use colons to separate the values.

Example: Let's look at a birthday with a certain format (dd/MM/yyyy):

Pipes are functions that simplify the process of wiring up your JavaScript expressions and transforming them into their desired output. They can be compared to, say, string functions in other programming languages. Pipes also allow you to combine multiple expressions together, whether they're all values or some values and some declarations.

For example: 

var css = myTheme.color | "red" ; 

This line would assign a value to css , and it's equivalent to writing out the following code:

Pipes have several built-in functions that allow you to transform data, such as value and extract. We can also create our own custom pipes.

Pipes are data transformers that execute on an Angular Component's output. They take in data and return transformed data. For example, if you have an expression such as number | 1000, the number pipe will take data from the output and transform it into 1000. In Angular, there are many built-in pipes that you can use. You can also create your own custom pipes by implementing the PipeTransform interface in a class.

Pipes receive an input which can be a value expression, a function returning an expression, or even a component property., that outputs a number with a value of 1,000. With a pipe, you can transform this output into a formatted string of "1,000" or "1.000".

Example: 

Output: 

THIS IS AN EXAMPLE OF CUSTOM PIPES IN ANGULAR

Dependency injection is an application design pattern which is implemented by Angular.

It also forms one of the core concepts of Angular.

So what is dependency injection in simple terms?

Let’s break it down, dependencies in angular are nothing but services which have functionality. The functionality of a service, can be needed by various components and directives in an application. Angular provides a smooth mechanism by which we can inject these dependencies into our components and directives.

So basically, we are just making dependencies which are injectable across all components of an application.

Let’s understand how DI (Dependency Injection) works:

Consider the following service, which can be generated using: ng g service test

 As one can notice, we can create injectable dependencies by adding the @Injectable decorator to a class.

We inject the above dependency inside the following component:   

 One can see we have imported our TestService at the top of the page. Then, we created an instance inside the constructor of the component and implemented the returnImportantValue function of the service.

From the above example, we can observe how angular provides a smooth way to inject dependencies in any component.

The first difference is that an Observable is lazy whereas a Promise is eager.

Consider the following Observable:

 When you run the above Observable, you can see messages being displayed in the following order:

As you can see, observables are lazy. Observable runs only when someone subscribes to them hence, the message “Before subscribing…” is displayed ahead of the message inside the observable.

Now let’s consider a Promise:    

Running the above promise, the messages will be displayed in the following order:

As you can see the message inside Promise is displayed first. This means that a promise runs before the then method is called. Therefore, promises are eager.

The next difference is that Promises are always asynchronous. Even when the promise is immediately resolved. Whereas an Observable, can be both synchronous and asynchronous.

The above example of an observable is the case to show that an observable is synchronous. Let’s see the case where an observable can be asynchronous:

The messages will be displayed in the following order:

You can see in this case, observable runs asynchronously.

The next difference is that Observables can emit multiple values whereas Promises can emit only one value.

The biggest feature of using observables is the use of operators. We can use multiple operators on an observable whereas, there is no such feature in a promise.

• String interpolation and property binding are parts of data-binding in Angular.


• Data-binding is a feature in angular, which provides a way to communicate between the component(Model) and its view(HTML template).


• Data-binding can be done in two ways, one-way binding and two-way binding.


• In Angular, data from the component can be inserted inside the HTML template. In one-way binding, any changes in the component will directly reflect inside the HTML template but, vice-versa is not possible. Whereas, it is possible in two-way binding.


• String interpolation and property binding allow only one-way data binding.


• String interpolation uses the double curly braces {{ }} to display data from the component. Angular automatically runs the expression written inside the curly braces, for example, {{ 2 + 2 }} will be evaluated by Angular and the output 4, will be displayed inside the HTML template. Using property binding, we can bind the DOM properties of an HTML element to a component's property. Property binding uses the square brackets [ ] syntax.

RxJS is an acronym that stands for Reactive Extensions for JavaScript. It is used to enable the use of observables in our JavaScript project, allowing us to do reactive programming. RxJS is utilized in many popular frameworks, including Angular since it allows us to compose our asynchronous or callback-based code into a sequence of operations executed on a data stream that releases values from a publisher to a subscriber. Other programming languages, such as Java and Python, offer packages that allow them to develop reactive programs utilizing observables.

Most of the time, rxJs is used in HTTP calls with angular. Because http streams are asynchronous data, we can subscribe to them and apply filters to them.

Example: The following is a simple example of how RxJs can be utilized with HTTP calls.

View encapsulation specifies if the component's template and styles can impact the entire program or vice versa.

Angular offers three encapsulation methods:

• 
  Native: The component does not inherit styles from the main HTML. Styles defined in this component's @Component decorator are only applicable to this component.


• 
  Emulated (Default): The component inherits styles from the main HTML. Styles set in the @Component decorator are only applicable to this component.


• 
  None: The component's styles are propagated back to the main HTML and therefore accessible to all components on the page. Be wary of programs that have None and Native components. Styles will be repeated in all components with Native encapsulation if they have No encapsulation.

• 
  Loading: The eager loading technique is the default module-loading strategy. Eager loading feature modules are loaded before the program begins. This is primarily utilized for small-scale applications.


• 
  Lazy Loading: Lazy loading loads the feature modules dynamically as needed. This speeds up the application. It is utilized for larger projects where all of the modules are not required at the start.

Can one make an angular application to render on the server-side?

Yes, angular provides a technology called Angular Universal, which can be used to render applications on the server-side.

The advantages of using Angular Universal are:

• First time users can instantly see a view of the application. This benefits in providing better user experience.


• Many search engines expect pages in plain HTML, thus, Universal can make sure that your content is available on every search engine, which leads to better SEO.


• Any server-side rendered application loads faster since rendered pages are available to the browser sooner.