Angular Security Interview Questions

3 Explain components, modules and services in Angular.

Components, modules and services are the three fundamental building blocks in Angular. Components are the smallest, self-contained units in an Angular application. They are typically used to represent a view or UI element, such as a button or a form input field.Â

Code example:

import { Component, OnInit } from @angular/core;


       selector: app-test,

       templateUrl: ./test.component.html,

       styleUrls: [./test.component.css]


     export lass TestComponent implements OnInit {

       constructor() {}

       ngOnInit() {


     } Â

Modules are larger units that group together one or more related components. Services are singleton objects that provide specific functionality throughout an Angular application, such as data access or logging.

Code example:

import { BrowserModule } from @angular/platform-browser;

      import { NgModule } from @angular/core;

      import { AppComponent } from ./app.component;

      import { TestComponent } from ./test/text.component;


        declarations: [




        imports: [



        providers: [],

        bootstrap: [AppComponent]


      export class AppModule { }   Â

Each component in Angular has its own isolated scope. This means that a components dependencies (services, other components, etc.) are not accessible to any other component outside of its own scope. This isolation is important for ensuring modularity and flexibility in an Angular application.

Services, on the other hand, are not isolated and can be injected into any other unit in an Angular application (component, module, service, etc.). This makes them ideal for sharing data or functionality across the entire app.

Code example:

import { Injectable } from @angular/core;


        providedIn: root


      export class TestServiceService {

        constructor() { }


When designing an Angular application, it is important to keep these three building blocks in mind. Components should be small and self-contained, modules should group together related components, and services should provide shared functionality across the entire app. By following this design principle, you can create an Angular application that is modular, flexible, and easy to maintain.

What are the new updates with Angular10?Â

  • Older versions of TypeScript not supported – Previous versions of Angular supported typescript 3.6, 3.7, and even 3.8. But with Angular 10, TypeScript bumped to TypeScript 3.9.
  • Warnings about CommonJS imports – Logging of unknown property bindings or element names in templates is increased to the “error” level, which was previously a “warning” before.
  • Optional strict setting – Version 10 offers a stricter project setup when you create a new workspace with ng new command.
  • NGCC Feature – Addition of NGCC features with a program based entry point finder.Â

  • Updated URL routing
  • Deprecated APIs – Angular 10 has several deprecated APIs.
  • Bug fixes – With this Angular 10 version, there have been a number of bug fixes, important ones being the compiler avoiding undefined expressions and the core avoiding a migration error when a nonexistent symbol is imported.
  • New Default Browser Configuration – Browser configuration for new projects has been upgraded to outdo older and less used browsers.Â
  • 3 How do you perform Error handling?

    In Angular, error handling can be done by writing a function using HttpClient along with catchError from RxJS.To handle errors, Angular’s HttpClient parses JSON responses and returns a JavaScript object in the observable.


    Related Posts

    Leave a Reply

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