Google News
logo
Angular Interview Questions
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.
Angular Events  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
* ng-keyup
* ng-mousedown
* ng-mouseenter
* ng-mouseleave
* ng-mousemove
* ng-mouseover
* ng-mouseup
* ng-blur
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.
 
* Factory
* Service
* Provider
Compile : Compile function is used for template DOM Manipulation and to collect all the directives.
Link : Link function is used for registering DOM listeners as well as instance DOM manipulation and is executed once the template has been cloned.
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.
A service is used when a common functionality needs to be provided to various modules. Services allow for greater separation of concerns for your application and better modularity by allowing you to extract common functionality out of components.
 
Let's create a repoService which can be used across components,
import { Injectable } from '@angular/core';
import { Http } from '@angular/http';

@Injectable({ // The Injectable decorator is required for dependency injection to work
  // providedIn option registers the service with a specific NgModule
  providedIn: 'root',  // This declares the service with the root app (AppModule)
})
export class RepoService{
  constructor(private http: Http){
  }

  fetchAll(){
    return this.http.get('https://api.github.com/repositories');
  }
}
The above service uses Http service as a dependency.
The AsyncPipe subscribes to an observable or promise and returns the latest value it has emitted. When a new value is emitted, the pipe marks the component to be checked for changes.
 
Let's take a time observable which continuously updates the view for every 2 seconds with the current time.
@Component({
  selector: 'async-observable-pipe',
  template: `<div><code>observable|async</code>:
       Time: {{ time | async }}</div>`
})
export class AsyncObservablePipeComponent {
  time = new Observable(observer =>
    setInterval(() => observer.next(new Date().toString()), 2000)
  );
}
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’);
We use Angular ngFor directive in the template to display each item in the list. For example, here we iterate over list of users,
<li *ngFor="let user of users">
  {{ user }}
</li>
The user variable in the ngFor double-quoted instruction is a template input variable
Interpolation is a special syntax that Angular converts into property binding. It’s a convenient alternative to property binding. It is represented by double curly braces({{}}). The text between the braces is often the name of a component property. Angular replaces that name with the string value of the corresponding component property.
 
Let's take an example,
<h3>
  {{title}}
  <img src="{{url}}" style="height:50px">
</h3>
In the example above, Angular evaluates the title and url properties and fills in the blanks, first displaying a bold application title and then a URL.