Angular JS

The ngIf directive gets a nice improvement in Angular version 4.0.0.  Earlier, in order to simulate if-then-else blocks in Angular templates, we had to use two ngIf directives with opposed boolean conditions. In Angular version 4 and higher we now get an “else” instruction as part of the ngIf directive. Here is an example.

<div *ngIf="isLoggedIn(); else notLoggedIn">
     Hi, {{ user.name }}!
</div>
<ng-template #notLoggedIn>
     You're not logged in.
</ng-template>

In the above code, the else keyword is used to specify the name of a template variable that will be used to render a template only if the if-condition fails to match. Simple, right?

A routing module is required if the application consists of multiple components and URLs and the user is expected to navigate from one component to another. The job of the Routing Module is to  interpret the browser's URL as an instruction to load a specific component along with its view. The application has a main router configured and bootstrapped. This is done by passing an array of routes to RouterModule.forRoot(), and since this returns another module, it has to be added to the imports meta property in the main application module.

The RouterModule

• Keeps all our routing concerns separate from our feature module.
• makes the code much more understandable and manageable.
• provides a module to replace or remove when testing our feature module.
• provides a common place for required routing service providers including guards and resolvers.
• is not concerned with feature module declarations and does not lead to any conflicts.

Two components in Angular need to have a parent-child relationship if they want to communicate directly with each other. In some cases, having a common parent for two components is also a solution to allow the two child components to be able to communicate. Commonly the following two methods are used.

• Parent/child communication using @Input decorator and @Output decorator with EventEmitter
• Communication using services and Angular dependency injection system.

The second method can be used to perform communication between any two components in the app. They do not need to share a parent-child relationship. They use a service (which is a singleton class) to send and receive data from each other.

Services are singleton classes that are instantiated only once throughout the lifecycle of the application. Since these classes can only be instantiated once, there can only be one instance alive at all times. We can use this to share data between components. We can set the values of data members in the service class from one component and can access the values of those data members from other components. Since both the components classes are accessing the only instance, it results in sharing of the information between components.

A lean component is a component which have the sole purpose to display or present data to user. Lean components delegate data fetching, business logic, input validation etc. to other classes like models, services, redux effects/actions etc. Lean component follows single responsibility principle and they receive the data as an input from outside the component and present it to the user as specified in the component template..

They receive the data that they need to display and then present the data to the user in the specified templated formatting.

The following is an example component, the user profile component.

<user-profile [user]="user"></user-profile>

The component takes an object user and the rest of the job of the component is to display the data to the user in a nice and clean UI. The component does not deal with any other business logic or computations in the app.

This is a frequently asked question in AngularJS advanced interview questions.

@ViewChild decorator is used to search for an element inside the component’s template. It makes it very easy to get a reference to a child component from the template. The parameter that we pass as the first argument to the ViewChild is the type of the component or the reference we want to search for, in the template. If more than one elements match the queried elements, it returns us the first one that it found. @ViewChild returns a reference of an element so, we can use ElementRef to define the type of variable.

To get references to multiple children components we can use @ViewChildren() decorator. It returns a QueryList object that is an array of the references to the matches elements in the template.

Example: Consider the following HTML snippet in a component.

<some-component #someVariable></some-component>

To get a reference to the component in the component class, we can use @ViewChild. All we need to do is,

@ViewChild('someVariable') something;

Similarly, if you want to get access to all the elements of the page that have certain type, you can do that using,

@ViewChildren(someType) somethings;

This returns a QueryList which is an array of the references to all the matching elements.

To understand the difference between the ViewChild and ContentChild decorators, you first need to understand the differences between the Shadow DOM and light DOM. Also, think of yourself as the creator of a component that other developers will use in their applications.

Shadow DOM is an internal DOM of your component that is defined by the creator of the component and hidden from the end-user or the developer using the component.

For example,

@Component({
   selector: 'some-component',
   template: `
   <h1>I am Shadow DOM!</h1>
     <h2>Nice to meet you :)</h2>
     <ng-content></ng-content>
   `;
})
class SomeComponent { /* ... */ }

Light DOM is the DOM/content that is projected into the component by the developer or the user of the component.

For example,

@Component({
   selector: 'another-component',
   directives: [SomeComponent],
   template: `
     <some-component>
       <h1>Hi! I am Light DOM!</h1>
       <h2>So happy to see you!</h2>
     </some-component>
   `
})
class AnotherComponent { /* ... */ }

The difference between @ViewChildren and @ContentChildren is that @ViewChildren looks for elements in Shadow DOM while @ContentChildren looks for them in Light DOM. Both of them return the references to the queried elements.

NgFor and NgIf cannot be used together on the same element. However, there is a workaround that allows you to achieve the results that you generally intend to get by using these two directives together. You can use an ng-container component. Look at the example code below.

<some-component>
     <ng-container *ngFor="let task of tasks">
         <p *ngIf="task.Status == ‘done’">{{task.Title}}</p>
     </ng-container>
</some-component>
<ng-container> 

is a logical container that can be used to group nodes but is not rendered in the DOM tree as a node. <ng-container> is rendered as an HTML comment.

Like any other OOP language, for example JAVA, C# etc., a constructor is a special named function within a class. The constructor is called when the class in instantiated. It is out of Angular’s control when the constructor is invoked, which means that it’s not a suitable hook to let you know when Angular has finished initialising the component.

By adding the ngOnInit lifecycle hook, Angular fires a method once it has finished setting the component up, and the hook is part of the component’s lifecycle.

ngOnInit is purely there to give us a signal that Angular has finished initialising the component and we can hook any code that we want executed in the ngOnInit function.

When you are developing an Angular app that is constantly growing in size and needs to be managed very well, you may not want to write the same pieces of code in multiple components. In these cases, it is a good practice to write the common logic in a service and use it from different components as and when required. 

Components generally do not fetch or save data from the web resource or the API and they certainly shouldn't knowingly present fake data. They are supposed to focus on presenting data and delegate data access, like fetching and saving, to a service.

Services are also used majorly for sharing data between different components. Since services are singleton classes, which simply means that they can only be instantiated once throughout the lifecycle of the app, only one instance of a service lives at all times. This can be used to share data between components since all the components have the access to the single instance of the service class.

To create a service in Angular, you can use the Angular CLI command.

ng generate service <service-name>

The separation of concerns is the main reason why Angular services came into existence. Every service annotates the class with the @Injectable() decorator. This makes the class able to participate in the dependency injection system.

NgModule is a special decorator that marks a TS class as an Angular Module. You can think of an Angular module as a logical chunk of code that is delegated a responsibility. An NgModule class describes how the application parts fit together. 

Every application has at least one NgModule, the root module that we bootstrap to launch the application.

@NgModule accepts a metadata object that tells Angular how to compile and launch the application. The properties are:

• imports – External or internal modules that the application needs or depends on to run, like the BrowserModule that every application needs to run in a browser.
• declarations – the application's components, which belongs to the NgModule class. We must declare every component in an NgModule class. If we use a component without declaring it, we'll see a clear error message in the browser’s console.
• bootstrap – the root component that Angular creates and inserts into the index.html host web page. The application will be launched by creating the components listed in this array.
• exports - exports is an array of components that are made available to other modules from within this module. In a way, exported classes are made available to the outside world.
• providers - is also an array and contains the list of all the services and injectables.

A common question in AngularJS questions and answers, don't miss this one.

Simply put, the AsyncPipe allows us to render asynchronous data.

The async pipe subscribes to an Observable or Promise and returns the latest value as emitted by the promise or observable. When the component gets destroyed, the async pipe unsubscribes automatically to avoid potential memory leaks.

With AsyncPipe we can use promises and observables directly in our template, without having to store the result on an intermediate property or variable. AsyncPipe accepts as argument an observable or a promise, calls subscribe or attaches a then handler, then waits for the asynchronous result before passing it through to the caller.

Consider the following example.

my-component.html

<span>Wait for it... {{ greeting | async }}</span>
my-component.ts
export class MyComponent {
   greeting: Promise<string>|null = null;
   constructor() { 
this.reset(); 
}
reset() {
     this.greeting = new Promise<string>((resolve, reject) => { this.resolve = resolve; 
});
  }

In the above example, the greeting property is not available immediately to the template and thus rendering it out can lead to unpredictable consequences. The Async pipe unwraps the value of the promise as it is returned and then renders it out. This only happens when the value of available.

• DatePipe - is used to format dates. It takes the valid javascript date objects as inputs and formats the data according to the specified options.
  TS Code
  
  today: new Date();
  HTML Code
  {{ today | date }}
  
  

• CurrencyPipe - formats numbers as currencies and places the currency symbol as well.
  TS Code
  amount: number = 5000;

  HTML Code
  {{ amount | currency: 'INR'}}

  
  
• AsyncPipe - is used to unwrap promises and observables and renders the results as and when it is available..
  
  TS Code
  
  count: Observable<number>;

constructor() {
this.countdown();
}
countdown() {
     let i = 100;
     this.count = new Observable((observer) => {
   let id;
       id = setInterval(() => {
         if(i > 0) {
           i = i-1;
           observer.next(i);
         } else {
           clearInterval(id);
           observer.complete();
         }
       }, 50);
    })
}

HTML Code

{{ count | async }}

• DecimalPipe - is used to format numbers with decimal digits. It lets us specify the minimum and maximum number of digits after the decimal.
  
  TS Code

amount: number = 5000;

HTML Code

{{ amount | decimal: '0.0-2'}}

• TitleCasePipe - is used to change the case of the text to titlecase.
  
  TS Code

name: string = 'ZEOLEARN';

HTML Code

{{ name | titlecase}}

• JsonPipe - is used to render out json data on the page.
  
  TS Code

person: any = {
name: 'Zeolearn',
id: 12
}

HTML Code

{{ person | json }}

• SlicePipe - is used with ngFor to slice the array and only render out the remaining elements from the array.
  
  TS Code

people: string[] = ["A", "B", "C", "D"];

HTML Code

<div *ngFor="let char of people | slice:1">
   {{char}}
</div>

• PercentPipe - is used to display decimals numbers as percentages.
  
  TS Code

a: number = 0.259;

HTML Code

A: {{ a | percent}}

• UpperCasePipe - is used to display strings in all uppercase alphabets.
  
  TS Code

name: string = "ZEOLEARN";

HTML Code

{{ name | uppercase}}

• LowerCasePipe - is used to display strings in all lowercase alphabets.
  
  TS Code

name: string = "ZEOLEARN";

HTML Code

{{ name | lowercase}}

An Angular application consists mainly of components and their HTML templates. Because the components and templates provided by Angular cannot be understood by the browser directly, Angular applications require a compilation process before they can run in a browser.

The Angular Ahead-of-Time (AOT) compiler converts your Angular HTML and TypeScript code into efficient JavaScript code during the build phase before the browser downloads and runs that code. Compiling your application during the build process provides a faster rendering in the +browser.

• Faster rendering - With AOT, since the application code is already compiled, the browser downloads a pre-compiled version of the application and therefore can load the app immediately without having to recompile the whole app.
• Fewer asynchronous requests - The inlining of the external HTML templates and CSS style sheets eliminate separate ajax requests for those source files.
• Smaller Angular framework download size - Since the application code is already compiled, there's no need to download the Angular compiler along with the code. The compiler is roughly half of Angular itself, so omitting it dramatically reduces the application payload.
• Detect template errors earlier - The AOT compiler detects and reports template binding errors during the build step before users can see them. Thus it saves a lot of error finding and debugging time.
• Better security - AOT compiled HTML templates and components into JavaScript files long before they are served to the client. With no templates to read and no risky client-side HTML or JavaScript evaluation, there are fewer opportunities for injection attacks.

ng build --prod

The CLI uses a bunch of tools together to compile the code files including the HTML, CSS and TS files from individual files into a single bunch which is references in the index.html file as main.js. Most of the work is done during the build time and there is almost nothing left to do at the runtime. The CLI uses a tool called WebPack to achieve the final build that can be deployed.