Angular interview questions – Episode I

Standard
Spread the love

Angular has gained a lot of popularity over the last few years. The trend in Angular Jobs is on rise, with more and more companies having vacancies for Angular UI Developer. With this article, we are starting a series of Angular Interview Questions.

What is Angular Framework?

Angular is a Typescript based framework which promotes structured development for Web/Mobile/Desktop application. Angular heavily emphasizes on modular/component driven development. Powered with a rich set of Command Line Utilities, angular is no doubt focused on improving developer productivity, application optimization, test driven development.
The striking features of angular include – Dependency Injection, Modules, Directives, Components, Declarative Templates, Strong animation support, Data binding, and strong tooling system.

Describe various key components in Angular Framework

Components – Reusable building blocks which are targeted towards achieving a specific task. For e.g. File upload component, picture editor, login component, Forgot/Reset password panel, etc. Components have visual appearance using HTML templates and CSS/SCSS/SASS styles.

Directives – Directives follow a popular Design Pattern [Decorator]. Directives are meant for improving features of an existing component. Directives can improve visual appearance or modify the behavior of an existing component. Directives do not have their own templates though.

Modules – Modules enable logical grouping of components. With the help of modules, reusable set of components can be exported for distribution. Modules declaratively indicate components that can be imported into a third-party application.

Templates – Templates provide visual appearance for components. Templates are coded into HTML. It is possible to define templates as a separate HTML file or can be embedded inside component definition itself. Templates can contain data-binding placeholders to display dynamic data.

Services – Services are primarily targeted towards reusable code (logic) which can be leveraged across components/modules. The most common job for services is to invoke API to pull/push data from/to server.

Metadata – Metadata acts as a glue between various building blocks in Angular. E.g. An HTML view, CSS style can be associated with a component using @Component Annotation. Further, a reusable service can be injected in a component using @Injectable annotation at Service class level.

IS AngularJS and Angular same? Define why you thinks so?

AngularJS predates to Angular Framework. It was developed by Google to implement MVC pattern in Client Side applications (basically Web UI). Here are the fundamental differences

AngularJS

  1. AngularJS focuses heavily on the MVC pattern.
  2. AngularJS requires the Controller to manage behavior.
  3. AngularJS uses JavaScript for development.

Angular

  1. Angular is an umbrella term for Angular X versions (Angular 2, 4, 6, 7 and so on).
  2. Angular uses Typescript (Developed by Microsoft) for development.
  3. Angular has strong tooling support for development, build and testing.
  4. Angular leverages AOT to churn out optimized code.
  5. Angular has strong support for Routing, Animation and modular development.
  6. Promotes best development practices like modularity, reusable code with the help of directives, components, modules, etc.
  7. Strong support for Application theme.

What is Directive and why is it required?

The best way to define Directive is that it promotes commonly known GoF pattern – Decorator. Directive enhances the behavior of an existing component. Refer to the following code snippet.


 import { Directive, ElementRef} from '@angular/core';

@Directive({selector:'[underlineText]'})
export class UnderlineTextDirective {
constructor(el:ElementRef) {
el.nativeElement.style.textDecoration='underline';
}
}
// … Some where in the component HTML

<p underlineText>Today is a beautiful day and make sure that you remember it every day.</p>

As per the above example, “underlineText” directive will decorate the text in a paragraph with an underline. The directive in this example can be applied to any DOM element which will have a text wrapped inside (e.g. Div, Span, code, etc).

What do you mean by Template?

A template is used to define View for components. Those who are familiar with MVC (Model-View-Controller) or MVVM (Model-View-View-Model), can relate Template to View. It manages the presentation aspect and defined using HTML.
Templates can include dynamic data using *ngXXX (ngIf, ngFor), binding notations ({{}}), listening to events (()), directives, built-in custom tags (ng-container, ng-template etc), selectors (#name_of_selector)
Templates can be defined in two ways
Inline
Templates can be embedded inside component definition itself without a need to create a separate file. This is quite handy for components which perform a single and minuscule job (e.g custom alert, snackbar etc)


 @Component({
 selector: 'my-alert',
 template: 'Information{{content}}'
 })
 export class CustomAlert{
 }

Note the template property in @Component decorator. It is used to inline the template definition.

External file
Template definition can be externalized using templateUrl property in the component definition. This is definitely quite handy in case where Template requires complex and large UI.


@Component({
 selector: 'login',
 templateUrl: './login.component.html',
 ….
 })
 export class LoginComponent {
 }

You can notice that the templateUrl points to an HTML file. Templates can contain any valid HTML elements except SCRIPT tag. The SCRIPT tag is ignored and a warning is issued in the browser console.

How Angular addresses Cross Site Scripting (XSS) attacks?

This is the strongest benefit of using Angular. The team has heavily invested in building security in the framework itself. The XSS attacks are not only carried out using SCRIPT tag but various HTML elements are also prone to attacks e.g. onerror event on img tag, display of user input without sufficient sanitization etc.
Angular ensures that the data is sanitized before it is bound in the view. All the values bound to HTML view using interpolation, property binding, attribute, etc are treated as untrusted by default.
Refer below example


myContent = '<div>You are my <script>alert("Evil in disguise")</script><b>Hero</b>.';

Somewhere in HTML view …


<p>{{myContent}}</p>
<p [innerHTML]="myCotent"></p>

Before binding the values to paragraph tag, Angular will ensure that the SCRIPT tag has been removed from the result and the content is sanitized. Here is the result of the above expression.

More Interview questions coming soon, stay tuned.

Leave a Reply

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