Hire our Elite Angular.js Developers

Q: What is the difference between Components and Directives?

Answer:

‍Components break up the application into smaller parts; whereas, Directives add behavior to an existing DOM element.

Q: What is the use of @Input and @Output?

Answer:

When it comes to the communication of Angular Components, which are in Parent-Child Relationship; we use @Input in Child Component when we are passing data from Parent to Child Component and @Output is used in Parent Component to receive an event from Child to Parent Component. 

Q: Could you describe some of the differences between Angular >2 and Angular 1.x?

Answer:

• AOT (ahead-of-time) compiler, code is converted at build time and not runtime
• Better speed and performance
• No $scope
• Dependency injection was improved and simplified
• Uses Typescript
  

Q: What are the compilation methods Angular offers to compile your app and when are they used?

Answer:

• AOT - ahead-of-time, used when deploying your app to prod, the `--aot` flag is added by default
• JIT - just-in-time, used on development when you run `ng serve` or `ng build` without `--aot` flag
  

Q: How can an Angular app be attacked?

Answer:

• Injecting dynamic html content in your views or components, sanitize it first
• Using Angular versions out of date
• Using Angular APIs marked in the documentation as “Security Risk.”
  

Q: What is dependency injection and how can you use it in Angular?

Answer:

• Dependency injection is a technique whereby one object (or static method) supplies the dependencies of another object. A dependency is an object that can be used (a service). An injection is the passing of a dependency to a dependent object (a client) that would use it. The service is made part of the client's state.[1] Passing the service to the client, rather than allowing a client to build or find the service, is the fundamental requirement of the pattern.
• Using the @Injectable decorator identifies services and other classes that are intended to be injected. It can also be used to configure a provider for those services.
  

Q: How would you use redux style (state management) concepts with Angular 2?

Answer:

• Angular 2 with state management can be achieved by using Observables / RxJS / Effects(SideEffects).
  - Effects to make api calls, process response and dispatch state changes to update store.
  - RxJS to maintain the store.
  - Observables to listen to the store changes and update UI accordingly.
  

Q: Explain the lifecycle hooks of an Angular app and their sequence?

Answer:

• Lifecycle is a number of different phases a component goes through from creation to destruction, we can define some specific method in order to hook into any of those phases to obtain control of our component.
• Lifecycles
  - constructor: This is invoked when a component or directive is created by calling new on the class.
  - ngOnChanges: Invoked every time an input property is changed in the component.
  - ngOnInit: Invoked when given component has been initialized. This hook is only called once after the first ngOnChanges
  - ngDoCheck: Invoked when the change detector of the given component is invoked.
  - ngOnDestroy: This method will be invoked just before Angular destroys the component.
  

• The following hooks are only called for components and not directives:
  - ngAfterContentInit: Invoked after Angular performs any content projection into the components view
  - ngAfterContentChecked: Invoked each time the content of the given component has been checked by the change detection mechanism of Angular.
  - ngAfterViewInit: Invoked when the component’s view has been fully initialized.
  - ngAfterViewChecked: Invoked each time the view of the given component has been checked by the change detection mechanism of Angular.