Explore topic-wise InterviewSolutions in .

This section includes InterviewSolutions, each offering curated multiple-choice questions to sharpen your knowledge and support exam preparation. Choose a topic below to get started.

1.

What happens when you use the script tag within a template?

Answer»

Angular detects the value as unsafe and sanitizes it automatically, removing the script tag but retaining safe material such as the script tag's text content. This reduces the potential of script injection attacks. If you continue to use it, it will be disregarded, and a warning will display in the browser console.

Example: Consider the case of innerHtml property binding, which results in an XSS vulnerability.

export class InnerHtmlBindingComponent {
   // For example, a attacker-controlled value from a URL using malicious scripts.
   htmlSnippet = 'Template <script>alert("You are hacked !!!!")</script> <b>Syntax</b>';
} Conclusion

For new applicants for the role of Angular developer, theoretical and fundamental ideas are required, but for an experienced individual, both applied and practical concepts are essential. Many of the Angular interview questions for experienced candidates will be about your prior project. This article contains a collection of frequently asked job interview questions that apply to all of Angular's modules. An applicant who hopes to land a position as an Angular developer should review these questions once again before arriving at their interview.

Additional Interview Resources

  • https://www.interviewbit.com/angular-8-interview-questions/

  • https://www.interviewbit.com/angularjs-interview-questions/

  • https://www.interviewbit.com/full-stack-developer-interview-questions/

  • https://www.interviewbit.com/typescript-interview-questions/

  • https://www.interviewbit.com/react-interview-questions/

  • https://www.interviewbit.com/ionic-interview-questions/

  • https://www.interviewbit.com/blog/angular-js-projects/

  • https://www.interviewbit.com/blog/best-front-end-frameworks/

  • https://www.interviewbit.com/blog/web-development-frameworks/

  • https://www.interviewbit.com/angular-mcq/
Discussion
2.

How can I include SASS into an Angular project?

Answer»

You may use the ng new command while building your project using angular CLI. All of your components are generated using preset sass files.

ng new <Your_Project_Name> --style = sass

If you want to change the style of your project, use the ng set command.

ng set defaults.styleExt scss
Discussion
3.

How do you deal with errors in observables?

Answer»

Instead of depending on try/catch, which is useless in an asynchronous context, you may manage problems by setting an error callback on the observer.

Example: You may create an error callback as shown below.

myObservable.subscribe({
   next(number) { console.log('Next number: ' + number)},
   error(err) { console.log('An error received ' + err)}
 });
Discussion
4.

How does one share data between components in Angular?

Answer»

Following are the commonly used methods by which one can pass data between components in angular:

  • Parent to child using @Input decorator

Consider the following parent component:

@Component({
selector: 'app-parent',
template: `
<app-child [data]=data></app-child>
` ,
styleUrls: ['./parent.component.css']
})
export class ParentComponent{
data:string = "Message from parent";
constructor() { }
}

In the above parent component, we are passing “data” property to the following child component:  

import { Component, Input} from '@angular/core';
@Component({
selector: 'app-child',
template:`
<p>{{data}}</p>
`,
styleUrls: ['./child.component.css']
})
export class ChildComponent {
@Input() data:string
constructor() { }
}

In the child component, we are using @Input decorator to capture data coming from a parent component and using it inside the child component’s template.

  • Child to parent using @ViewChild decorator

Child component:

import {Component} from '@angular/core';
@Component({
selector: 'app-child',
template:`
<p>{{data}}</p>
`,
styleUrls: ['./child.component.css']
})
export class ChildComponent {
data:string = "Message from child to parent";
constructor() { }
}

 Parent Component

import { Component,ViewChild, AfterViewInit} from '@angular/core';
import { ChildComponent } from './../child/child.component';
@Component({
selector: 'app-parent',
template: `
<p>{{dataFromChild}}</p>
` ,
styleUrls: ['./parent.component.css']
})
export class ParentComponent implements AfterViewInit {
dataFromChild: string;
@ViewChild(ChildComponent,{static:false}) child;
ngAfterViewInit(){
this.dataFromChild = this.child.data;
}
constructor() { }
}

In the above example, a property named “data” is passed from the child component to the parent component.

@ViewChild decorator is used to reference the child component as “child” property.

Using the ngAfterViewInit hook, we assign the child’s data property to the messageFromChild property and use it in the parent component’s template.

  • Child to parent using @Output and EventEmitter

In this method, we bind a DOM element inside the child component, to an event ( click event for example ) and using this event we emit data that will captured by the parent component:

Child Component: 

import {Component, Output, EventEmitter} from '@angular/core';
@Component({
selector: 'app-child',
template:`
<button (click)="emitData()">Click to emit data</button>
`,
styleUrls: ['./child.component.css']
})
export class ChildComponent {
data:string = "Message from child to parent";
@Output() dataEvent = new EventEmitter<string>();
constructor() { }
emitData(){
this.dataEvent.emit(this.data);
}
}

 As you can see in the child component, we have used @Output property to bind an EventEmitter. This event emitter emits data when the button in the template is clicked.

In the parent component’s template we can capture the emitted data like this:

<app-child (dataEvent)="receiveData($event)"></app-child>

 Then inside the receiveData function we can handle the emitted data:

receiveData($event){
this.dataFromChild = $event;
}
Discussion
5.

How do you choose an element from a component template?

Answer»

To directly access items in the view, use the @ViewChild directive. Consider an input item with a reference.

<input #example>

and construct a view child directive that is accessed in the ngAfterViewInit lifecycle hook

@ViewChild('example') input;

ngAfterViewInit() {
console.log(this.input.nativeElement.value);
}
Discussion