TOP MNC Interview Questions and Answers

(i)ngOnChanges: ngOnChanges triggers following the modification of @Input bound class members. Data bound by the @Input() decorator come from an external source. When the external source alters that data in a detectable manner, it passes through the @Input property again. With this update, ngOnChanges immediately fires. It also fires upon initialization of input data. The hook receives one optional parameter of type SimpleChanges. This value contains information on the changed input-bound properties. 

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

  @Component({
   selector: 'app-child',
   template: `
   Child Component
   TICKS: {{ lifecycleTicks }}
   DATA: {{ data }}
  `
 })
 export class ChildComponent implements OnChanges {
   @Input() data: string;
   lifecycleTicks: number = 0;

   ngOnChanges() {
    this.lifecycleTicks++;
   }
 }

 @Component({
   selector: 'app-parent',
   template: `
   ngOnChanges Example
   
  `
 })
 export class ParentComponent {
   arbitraryData: string = 'initial';

   constructor() {
     setTimeout(() => {
       this.arbitraryData = 'final';
     }, 5000);
   }
 }
Summary: ParentComponent binds input data to the ChildComponent. The component receives this data through its @Input property. ngOnChanges fires. After five seconds, the setTimeout callback triggers. ParentComponent mutates the data source of ChildComponent’s input-bound property. The new data flows through the input property. ngOnChanges fires yet again.

(ii)ngOnInit: ngOnInit fires once upon initialization of a component’s input-bound (@Input) properties. The next example will look similar to the last one. The hook does not fire as ChildComponent receives the input data. Rather, it fires right after the data renders to the ChildComponent template. 

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

 @Component({
  selector: 'app-child',
  template: `
  Child Component
  TICKS: {{ lifecycleTicks }}
  DATA: {{ data }}
  `
 })
  export class ChildComponent implements OnInit {
  @Input() data: string;
  lifecycleTicks: number = 0;

   ngOnInit() {
    this.lifecycleTicks++;
   }
 }

 @Component({
   selector: 'app-parent',
   template: `
   ngOnInit Example
   
  `
 })
 export class ParentComponent {
   arbitraryData: string = 'initial';

   constructor() {
    setTimeout(() => {
      this.arbitraryData = 'final';
    }, 5000);
   }
 }
Summary: ParentComponent binds input data to the ChildComponent. ChildComponent receives this data through its @Input property. The data renders to the template. ngOnInit fires. After five seconds, the setTimeout callback triggers. ParentComponent mutates the data source of ChildComponent’s input-bound property. ngOnInit DOES NOT FIRE.
ngOnInit is a one-and-done hook. Initialization is its only concern.

(i)*ngIf: ngIf is used to display or hide the DOM Element based on the expression value assigned to it. The expression value may be either true or false.
Syntax: 
<div *ngIf="boolean"> </div>

This is the third item’s accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It’s also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.