Angular 4 Interview Questions Cheat Sheet

2 Explain the concept of Dependency Injection?

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.

List out differences between AngularJS and Angular?

  • Architecture
    • AngularJS uses MVC or Model-View-Controller architecture, where the Model contains the business logic, the Controller processes information and the View shows the information present in the Model.
    • Angular replaces controllers with Components. Components are nothing but directives with a predefined template.
  • Language
    • AngularJS uses JavaScript language, which is a dynamically typed language.
    • Angular uses TypeScript language, which is a statically typed language and is a superset of JavaScript. By using statically typed language, Angular provides better performance while developing larger applications.
  • Mobile Support
    • AngularJS does not provide mobile support.
    • Angular is supported by all popular mobile browsers.
  • Structure
    • While developing larger applications, the process of maintaining code becomes tedious in the case of AngularJS.
    • In the case of Angular, it is easier to maintain code for larger applications as it provides a better structure.
  • Expression Syntax
    • While developing an AngularJS application, a developer needs to remember the correct ng-directive for binding an event or a property. Whereas in Angular, property binding is done using “[ ]” attribute and event binding is done using “( )” attribute.
  • 2 What is view encapsulation in Angular?

    View encapsulation specifies if the components 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 components @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 components 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.
  • 9 What is ngcc?

    The ngcc(Angular Compatibility Compiler) is a tool used in Angular to upgrade node_module, compiled with non-ivy ngc into ivy compliant format.

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

    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.

    Angular calls an impure pipe for each change detection cycle, independent of the change in the input fields. For each of these pipes, several pipe instances are produced. These pipes inputs can be altered.

    By default, all pipelines are pure. However, as demonstrated below, you can specify impure pipes using the pure property.


    Angular Interview Questions and Answers | Angular Interview Questions | Top Angular Questions

    Related Posts

    Leave a Reply

    Your email address will not be published. Required fields are marked *