Angular interview question and answer

 1- What is AOT compilation? Difference between AOT and JIT ?

All Angular application consists of components and templates. which the browser can't understand. because, all the Angular applications need to be compiled first before running inside the browser.

JIT - (just in time )this is compiler to compile TypeScript code and executing it.

=>Compiled in the browser quickly.

=>Each file compiled separately in application.

=>No need to create build after changing your file and before reloading the automatically browser page.

=>Suitable for local machine development.

=>AOT - Compile TypeScript during build phase.

=>The Code Compiled by the machine itself, using command line (Faster).

=>All code compiled together, HTML/CSS in the scripts.

=>No need to deploy the compiler and size of angular reduce.

=>The creating build More secure, original source not disclosed.

Difference b/w AOT AND JIT ?

 

Question 3 :  Explain Components.ts, Modules.ts and Services.ts in Angular and angular js?

For your understanding we will create a new application

ng new angularTestingApp

The above command will be create an angular application in the directory.

Next, let's move on to understand Components.ts, Modules.ts, and Services.ts.

What is Components

In Angular, components are the basic building blocks, which control a part of the UI and service for any application.

A component is defined using the @Component decorator. All component consists of three parts, the template which loads the view for the component, a stylesheet and a class that contains the business logic for the component.

For creating a component, inside the command terminal, navigate to the directory of the application generate, and run the following command:

ng generate component testApllication

Or

ng g c testApplication

One can see the generated component inside src/app/test-application folder. look like this

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

      @Component({
        selector: 'app-test',
        templateUrl: './testapplication.component.html',
        styleUrls: ['./testapplication.component.css']
      })
      export lass TestApplicationComponent implements OnInit {

        constructor() {}

        ngOnInit() {
        }
      }

Q 4 What is Module in Angular ?

Module is group of components, directives, services, and pipes Module decides whether the components, directives, service can be used by other modules. Every module is defined with a @NgModule decorator.
Root module is a default module for creating a application like app.module.ts
if you create your own module is easily
Every application can have only one root module ,and it can have one or more feature modules.
A root module imports using function on BrowserModule, whereas a feature module imports like CommonModule.

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

      import { AppComponent } from './app.component';
      import { TestApplicationComponent } from './test/text.component';

      @NgModule({
        declarations: [
          AppComponent,
          TestApplicationComponent

        ],
        imports: [
          BrowserModule
        ],
        providers: [],
        bootstrap: [AppComponent]
      })
      export class AppModule { }

To create a feature module, run this command:
ng g m testApplication-module
    import { NgModule } from '@angular/core';
      import { CommonModule } from '@angular/common';

      @NgModule({
        declarations: [TestApplicationComponent],
        imports: [
          CommonModule
        ]
      })
      export class TestApplicationModuleModule { }
To create a service, run this command:
ng g s testApplication-service
Service create inside app folder and import any module and implement the service api
web service are implement in service and also create a public url in this file.
  import { Injectable } from '@angular/core';

      @Injectable({
        providedIn: 'root'
      })
      export class TestApplicationServiceService {

        constructor() { }

      }
4.
Q5 What are lifecycle hooks in Angular? Explain a lifecycle hooks.



                                  
ngOnChanges() 

A callback method can invoked immediately when change in your application after that view 
child is checked i.e;
ngOnChanges(changes: SimpledataChanges): void
ngOnInit( ) This hook gets called once, after any  ngOnChanges hook.
It initializes the component and sets the input properties of the component.

ngAfterContentChecked( )
Initially, after the AfterContentInit hook finishes in the application .
Every time the change in the file detection is run then application state change.
What causes the application state change?
Events Call - click, submit, in the application…
Ajax calls in angular - fetching data from a remote server
Timers in application - setTimeout, setInterval

ngAfterViewInit( )
ngAfterViewInit() is called after a component's view, and its children's views, are created. Its the lifecycle hook that  called after a component's view has initialized.


How to scan Qr-code in angular 6 ,7,8,9,10,11 application?
1 just install the command :npm install angularx-qrcode --save
after that 
Import the module and add 
import { QRCodeModule } from 'angularx-qrcode';

@NgModule({
declarations: [
  AppComponent
],
imports: [
  QRCodeModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
after that your html file is 
// File: example.html
<qrcode [qrdata]="myAngularxQrCode" [width]="256" [errorCorrectionLevel]="'M'"></qrcode>
and implement the ts file is
export class QRCodeComponent {
  public myAngularxQrCode: string = null;
  constructor () {
    // assign a value
    this.myAngularxQrCode = 'Your QR code data string';
  }
}

Question 6 - How to many type to pass paramter one page to another page ?
Ans - 
First bascially use for @input and @output method this is comman 
but i tell you different method 
Create a service and defined gloabal variable . in this variable assign value in any component 
and get in all component very easily .
suppose that if you using the mat pop up show you can also pass the 
data object with dialogref 
and also close you get the result on close 
Q7 -What are directives?
Directives add behaviour to an existing DOM element or an existing component instance.
Q -8 What is component ?
Ans - Component is use in angular for handle html input and output its subset of 
directives , In component write the logical funtion 

Q9- how to by default set printer in ngx print angular?
Ans- In order to set a default printer in ngx-print, 
you can use the defaultPrinter
 property of the NgxPrintModule configuration. 
You can specify the default printer by providing the name of the printer 
when you import the NgxPrintModule.
Here's an example of how to set the default printer in an Angular application using ngx-print:
In this example, the printer named "My Printer" will be set as the default printer for the entire application. You can also set the default printer on a per-component basis by providing the defaultPrinter input to the ngx-print component.
import { NgxPrintModule } from 'ngx-print';

@NgModule({
  imports: [
    NgxPrintModule.forRoot({
      defaultPrinter: 'My Printer'
    }),
    // other imports
  ],
  // ...
})
export class AppModule { }
It's important to note that the printer should be connected and available to the machine that is running the application. Also, make sure that the ngx-print library is installed and properly configured in your application.
<ngx-print defaultPrinter="My Printer"></ngx-print>