Angular Component - Decorator, Communication, Lifecycles

Q. Basic Component Decorator

@Component({
  selector: 'app-pipes',
  templateUrl: './pipes.component.html',
  styleUrls: ['./pipes.component.css'],
  host: { 
      '[class.active]': 'isActive',
      '[style.border]': '"1px solid black"',
      '(click)': 'onClick()',
      '[attr.role]': '"button"' 
  }
})

Componentdecorator provide additional metadata that determines how the component should be processed, instantiated and used at runtime.

• changeDetection - change detection strategy used by this component
• encapsulation - style encapsulation strategy used by this component
• entryComponents - list of components that are dynamically inserted into the view of this component
• interpolation - custom interpolation markers used in this component's template
• providers - list of providers available to this component and its children
• selector - css selector that identifies this component in a template
• styleUrls - list of urls to stylesheets to be applied to this component's view
• styles - inline-defined styles to be applied to this component's view
• template - inline-defined template for the view
• templateUrl - url to an external file containing a template for the view
• standalone - yes - standalone component not depend upon the module system
• import - Used in conjunction with standalone to specify the imports (other components, pipes, modules) that the standalone component needs
• animate - to trigger angular animation state
• host - allows to set host element properties or bind to host element events.

Q. What are various ways of component communication

Ans: To pass data from one component to another there are following ways based on scenarios

Parent - Child Relationship

• using @Input[parent->child] and @Output[child->parent].
• using viewChild Ref to access in Parent.
• injecting parentComponent in Children
• By registering a custom event and listen it using @HostListner() inside same module

No Parent - Child Relationship

• using service injection by storing value into variables/methods.
• using Subject & SubjectBehaviour of RXJS.
• using routing i.e. navigating from one component to another with query param.
• store data in local Storage or session Storage and read data wherever we need.
• store in global predicatble state management library like ngRX,..

Q.lifecycle hooks of angular component

1. ngOnChanges: When the value of a data bound property changes, then this method is called.
2. ngOnInit: This is called whenever the initialization of the directive/component after Angular first displays the data-bound properties happens.
3. ngDoCheck: This is for the detection and to act on changes that Angular can't or won't detect on its own.
4. ngAfterContentInit: This is called in response after Angular projects external content into the component's view.
5. ngAfterContentChecked: This is called in response after Angular checks the content projected into the component.
6. ngAfterViewInit: This is called in response after Angular initializes the component's views and child views.
7. ngAfterViewChecked: This is called in response after Angular checks the component's views and child views.
8. ngOnDestroy: This is the cleanup phase just before Angular destroys the directive/component.
9. afterRender: often after the view has been rendered.
10. afterNextRender: triggered after the next render cycle of Angular