<aside> 💡

Points to consider before taking this

• This is a Question Bank, NOT A LEARNING MATERIAL

• This will only work when you have the Basics of Angular clear

• If you can successfully answer these questions, you shall clear any Angular interview

• If you can’t answer any question, please revisit the topic and study in detail. DO NOT MEMORISE ANSWERS

• This will only be helpful if you already have sound knowledge of HTML, CSS, JS

• If you are unsure of Interview questions in HTML, CSS and JS, please check my article

  HTML interview questions

  CSS interview questions

  JavaScript Interview Questions

</aside>

/table

How does an angular application start?

1. The app loads the index.js

2. the index.js has links main.js that has the bootstrap code

3. main.js compiles from main.ts

4. main.ts imports AppModule . It has the following code → platformBrowserDynamic.bootstrapModule(AppModule)

   Here AppModule is being Bootsrapped.

5. AppModule declares AppComponent in the bootstrap array of the @ngModule() declaration. So whatever you write in the app component gets rendered in the bootstrap module

Modules

What is a Module in Angular?

A module is a set of Angular Components, Directives and Pipes that are interdependent and creates one full working unit

In Angular, the @NgModule decorator is used to define and configure Angular modules, which are essential for organizing and structuring your application.

The @NgModule decorator accepts a variety of properties to configure the module. Here are the key properties that can be passed to the @NgModule decorator:

1. declarations (array of components):
   • Specifies the list of components, directives, and pipes that belong to this module. These are the components that are available for use within the module.
2. imports (array of modules):
   • Lists the modules that should be imported by this module. Imported modules can provide services, components, and other features that this module can use.
3. exports (array of components, directives, and pipes):
   • Specifies the components, directives, and pipes that should be made available for other modules to use when they import this module.
4. providers (array of providers):
   • Defines services and other dependencies that are available at the module level. These services can be injected into components and other parts of the module.
5. bootstrap (array of components):
   • Indicates the root component(s) that should be bootstrapped when the module is loaded. This is typically used in the main application module (AppModule) to specify the initial component(s) to render.
6. entryComponents (array of components):
   • Lists components that are created dynamically and not included in templates but still need to be compiled and made available. This is less common in modern Angular applications.
7. schemas (array of schemas):
   • Specifies the schema types that should be used to validate templates. This is used to configure template behavior regarding HTML and Angular-specific elements.

@NgModule({
  declarations: [AppComponent, MyComponent, MyDirective, MyPipe],
  imports: [CommonModule, FormsModule, HttpClientModule],
  exports: [MyComponent, MyDirective, MyPipe],
  providers: [MyService, { provide: APP_CONFIG, useValue: AppConfig }],
  bootstrap: [AppComponent],
  entryComponents: [MyDialogComponent],
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
})

Components

What is a Component?

Components are the most basic UI building block of an Angular app. An Angular app contains a tree of Angular components. Angular components are a subset of directives, always associated with a template. Unlike other directives, only one component can be instantiated for a given element in a template.

In Angular, the @Component decorator is used to define metadata for a component. This metadata includes various properties and values that configure how the component behaves and interacts with the Angular framework. Here are some of the key values that can be passed as properties of the @Component decorator: