So, let’s begin with Angular interview questions.
What is Angular?
Angular is a TypeScript-based open-source web application framework.
What is the difference between Angular and AngularJS?
While AngularJS had the concept of scope or controllers, there is no such concept in Angular. Angular is based on TypeScript whereas AngularJS is based on JavaScript. Angular provides mobile support whereas AngularJS does not. Angular uses components & directives whereas AngularJS uses more of an MVC approach.
What are the advantages of using Angular?
- Two-way data binding provides increased responsiveness.
- Angular uses independent components which provide for reusability & independent testing.
- It provides code consistency as all components follow the same structure.
- Modules provide lazy loading & reusability.
What is a component in Angular?
A component is a view, similar to the view that we have in MVC architectures. It will consist of template(HTML) + class (properties,methods written in Typescript) and metadata (some extra information). For more information refer
here.
What is a module in Angular?
A module in Angular is a group of components, directives, services, etc. Every Angular app has a root module, conventionally named AppModule, which provides the bootstrap mechanism that launches the application. An app typically contains many functional modules. Modules are decorated with @NgModule. Do not confuse with the term module in Angular with the term module in TypeScript or JavaScript. To avoid confusion, we distinguish between them as JavaScript modules and NgModules. In JavaScript, modules are individual files with JavaScript code in them.
What are directives in Angular?
Directives modify your DOM. There are three types of directives in Angular.
- Components
The templates in components structure your DOM.
- Structural directives
These change the layout of the DOM. For example - ngIf & ngElse. These always begin with an asterisk ‘*’.
- Attribute directives
These are directives that change the appearance or behavior of a DOM element. For example, ngStyle.
To understand Modules, Components, & Directives with examples, visit
here.
What are decorators in Angular?
Decorators are functions that modify JavaScript classes. These help to add metadata to classes. Angular defines a number of decorators that attach specific kinds of metadata to classes so that Angular can configure their behavior. For example- @Component defines classes as components.
What are pipes in Angular?
Pipes are used for transforming or formatting your data. There are many in-built pipes that Angular provides. You can create your own custom pipes too. For more information & examples on how to use pipes, refer
here.
What is data binding in Angular?
Data binding refers to coordination between component & its template to display data.
There are four types of data binding in Angular:,
Interpolation
This is used to display component properties in the view.
The expression to be displayed is written in double curly braces as below,
{{employee.employeeId}}
This expression refers to the employeeId property of the employee class.
Property Binding
In this our HTML element properties depend upon component properties. For example,
<img =’employee.imageUrl’ [title]=’employee.employeeName’/>
Event Binding
The above two types are used to pass value from the component to the DOM. Event binding is used to pass value from the DOM to the component.
Two-way data binding
As the name suggests, this provides the binding from component to DOM and vice versa. In this, the value in the view and the model is the same at all times. This is two-way binding.
Learn more about data binding
here.
What is the difference between interface & class in Angular?
Interfaces are a feature of typescript. There is no such concept in JavaScript. The advantage of using interfaces is that it provides a compile-time checking of the data structure. For example, I can create an interface of type Employee with certain properties. Later on, if some service returns an array of Employee, we will get compile time checking for the properties. Now, why don’t we use classes in this case, instead of interfaces? As mentioned earlier, there is no concept of interfaces in JavaScript. So, no transpiled code is created when interfaces are used. But if classes are used, a lot of JavaScript code is generated.
For more information, refer
here.
Explain Angular Architecture
Angular consists of different modules. The root module usually called the AppModule is the starting point of the application. It may import functionality from other feature modules. A module in Angular consists of components, directives, services, etc. The template along with metadata & component forms the view. The template and component interact with each other using data binding. The different directives modify the structure of the DOM. Services provide data to the component.
What is content projection in Angular?
When we create nested elements or components in a component then that is called content projection. eg. when if write <app-employee></app-employee> in our component view, the employee component will be displayed.
Describe Angular Component Lifecycle.
Angular components come with Lifecycle hooks which can be thought of as different stages in the lifecycle of an angular component. The following are the lifecycle hooks that are called once Angular creates a component by calling its constructor.
- ngOnChanges() - This is called when Angular sets or resets its input fields.
- ngOnInit() - Initializes the component after ngOnChanges() is called.
- ngDoCheck() - This is called when change detection runs to check for changes to component properties.
- ngAfterContentInit() - This is called when Angular projects external content into the view for eg, for nested components.
- ngAfterContentChecked() - This occurs after Angular checks the content projected.
- ngAfterViewInit - This is called after the component and its child views have been initialized.
- ngAfterViewChecked - Called after Angular checks the components views and child views.
- ngOnDestroy - Cleanup before Angular destroys the directive.
A detailed explanation can be found
here.
Why should we not initialize our components in a constructor?
The best place to initialize your components is in the ngOnInit lifecycle hook and not the constructor because only at this point have any input property bindings been processed. The reason we use ngOnInit and not ngOnChanges to initialize a component is that ngOnInit is only called once whereas ngOnChanges is called for every change to the input properties.
For more information refer
here.
This concludes the Angular Interview Questions.
This article was originally published on my website
taagung.
Also, make sure to check out the Angular tutorial for beginners,