Angular Interview Question Set 13
Categories: Angular
What is the sequence of Angular Lifecycle Hooks?
OnChange() – OnInit() – DoCheck() – AfterContentInit() – AfterContentChecked() – AfterViewInit() – AfterViewChecked() – OnDestroy().
What is the main difference between constructor and ngOnInit?
The constructor is a feature of the class itself, not Angular. The main difference is that Angular will launch ngOnInit after it has finished configuring the component. Meaning, it is a signal through which the @Input() and other banding properties and decorated properties are available in ngOnInit, but are not defined within the constructor by design.
How similar is AngularJS to Angular 2?
Both are front-end frameworks maintained by Google, but Angular 2 is not a simple update of AngularJS, it is a new framework written from scratch. Updating an app from AngularJS to Angular 2 would require a complete rewrite of the code.
What were some features introduced in the different versions of Angular (2, 4, 5 and 6)?
Angular 2:
- Complete rewrite of the Angular framework
- Component-based rather than controllers/view/$scope. This allows more code to be reused, easier communication between components and easier testing
- Much faster
- Support for mobile devices
What is Transpiling in Angular?
Transpiling means converting the source code of one programming language into another. In Angular, that usually means converting TypeScript into JavaScript. You can write the code for your Angular application in TypeScript (or another language such as Dart) that is then transpiled to JavaScript for the application. This happens internally and automatically.
What is AOT Compilation?
AOT refers to Ahead-of-time compilation. In Angular, it means that the code you write for your application is compiled at build time before the application is run in a browser. It‘s an alternative to Just-in-time compilation, where code is compiled just before it is run in the browser. AOT compilation can lead to better application performance.
What are HTTP Interceptors?
Interceptor is just a fancy word for a function that receives requests/responses before they are processed/sent to the server. You should use interceptors if you want to pre-process many types of requests in one way. For example, you need to set the authorization header Bearer for all requests:
What change detection strategies do you know
There are two strategies – Default and OnPush. If all components use the default strategy, Zone checks the entire tree regardless of where the change occurred. To inform Angular that we will comply with the performance improvement conditions, we need to use the onpush change detection strategy. This will tell Angular that our component depends only on the input and any object that is passed to it should be considered immutable. This is all built on the Principle of the mile automaton, where the current state depends only on the input values.
What is Change Detection, how does Change Detection Mechanism work?
Change Detection is the process of synchronizing a model with a view. In Angular, the flow of information is unidirectional, even when using the ng Model to implement two-way binding, which is syntactic sugar on top of a unidirectional flow.
Change Detection Mechanism-moves only forward and never looks back, starting from the root (root) component to the last. This is the meaning of one-way data flow. The architecture of an Angular application is very simple — the tree of components. Each component points to a child, but the child does not point to a parent. One-way flow eliminates the need for a $digest loop.
How do you update the view if your data model is updated outside the ‘Zone’?
- Using the ApplicationRef.prototype.tick method, which will run change detection on the entire component tree.
- Using NgZone.prototype.run method, which will also run change detection on the entire tree. The run method under the hood itself calls tick, and the parameter takes the function you want to perform before tick.
- Using the ChangeDetectorRef.prototype.detectChanges method, which will launch change detection on the current component and its children.
Why do we need lazy loading of modules and how is it implemented?
Lazy loading of modules is needed to break the code into pieces. When downloading the app in the browser, it doesn’t load all of the application code. During the transition to the route with lazy loading, the module has to load the code into a browser.
Example for using lazy loading modules:
{ path: ‘example’, loadChildren: ‘./example/example.module#ExampleModule’, component: PublicComponent },