Angular start 3

 1)Parent Child Communication:

 a)Input

If you want to send data from parent to child your child should have to import class input from from '@angular/core'; and add decorator  @input item:string with field name.

Then pass data to child component.

<app-child [item]="text"></app-child>

b)Output
Use the @Output() decorator in the child component or directive to allow data to flow from the child out to the parent.

Add this in a child :

  @Output() newItemEvent = new EventEmitter<string>();

addNewItem(value: string) {

    this.newItemEvent.emit(value);

  }

addNewItem when call will send data to parent.
Add this while calling the child define addItem in parent:

<app-child [item]="text" (newItemEvent)="addItem($event)"></app-child

2)Directives:

1)Structural directives Change the DOM layout by adding and removing DOM elements. 
Like *ngIf

2)Components Used with a template. This type of directive is the most common directive type.

3)Attribute directives Change the appearance or behavior of an element, component, or another directive.

Built-in attribute directives

NgClass Adds and removes a set of CSS classes.

NgStyle Adds and removes a set of HTML styles.


Highlight Directive:

Import ElementRef from @angular/core. ElementRef grants direct access to the host DOM element through its nativeElement property.

Add ElementRef in the directive's constructor() to inject a reference to the host DOM element, the element to which you apply appHighlight.

  constructor(private el: ElementRef) { 

        this.el.nativeElement.style.backgroundColor = ‘blue’;

}

This section shows you how to detect when a user mouses into or out of the element and to respond by setting or clearing the highlight color.

 @HostListener('mouseenter') onMouseEnter() {
        this.el.nativeElement.style.backgroundColor = ‘blue’;
  }
  @HostListener('mouseleave') onMouseLeave() {
     this.el.nativeElement.style.backgroundColor = ‘black’;
  }

To use the HighlightDirective, add a <p> element to the HTML template with the directive as an attribute.

<p appHighlight>Highlight me!</p>

3)Pipe:

In angular, a pipe can be used as pure and impure

3)What is pure or impure pipe?

In simple words,
impure-pipe works for every change in the component
pure-pipe works only when the component is loaded.

How to make pipe or impure pure?

@Pipe({
  name: 'sort',
  pure: false //true makes it pure and false makes it impure
})
export class myPipe implements PipeTransform {

  transform(value: any, args?: any): any {
     //your logic here and return the result
  }

}

How to use it?

<div> {{ arrayOfElements | sort }}<div>

Be careful while using impure pipe because this may over-use your system resources in case of inappropriate use.

4)ViewChild:
Angular inputs/outputs are great for sending data, but they are not intended to be used when trying to access a child’s properties and methods – that is what the ViewChild/ViewChildren property decorator is for.

ViewChild is a property decorator that selects a child component within the parent component’s template. As seen in the example above, the parent component uses the @ViewChild property decorator in order to select the child component (using the selector ‘#childSelector’) from it’s template. Once the child component is selected, it can call any of the child’s public methods. In this case, the parent component is calling the foo() method directly. Its important to point out that the parameter { static: false } used inside the decorator is a required parameter as of Angular 9. This parameter, if true, allows the child component to be selected during NgOnInit().

ViewChildren is a property decorator that selects multiple children components within the parent component:

5)component life cycle,

ngOnChanges: When the value of a data bound property changes, then this method is called.

ngOnInit: This is called whenever the initialization of the directive/component after Angular first displays the data-bound properties happens.

ngDoCheck: This is for the detection and to act on changes that Angular can't or won't detect on its own.

ngAfterContentInit: This is called in response after Angular projects external content into the component's view.

ngAfterContentChecked: This is called in response after Angular checks the content projected into the component.

ngAfterViewInit: This is called in response after Angular initializes the component's views and child views. Here you can access view members after this event.

ngAfterViewChecked: This is called in response after Angular checks the component's views and child views.

ngOnDestroy: This is the cleanup phase just before Angular destroys the directive/component.

NOte:

ngOnInit() is called after ngOnChanges() was called the first time. ngOnChanges() is called every time inputs are updated by change detection.

ngAfterViewInit() is called after the view is initially rendered. This is why @ViewChild() depends on it. You can't access view members before they are rendered.

ngAfterContentInit()

Respond after Angular projects external content into the component's view. Called once after the first ngDoCheck().

ngAfterContentChecked()

Respond after Angular checks the content projected into the component. Called after the ngAfterContentInit() and every subsequent ngDoCheck().

ngAfterViewInit()

Respond after Angular initializes the component's views and child views. Called once after the first ngAfterContentChecked().

ngAfterViewChecked()

Respond after Angular checks the component's views and child views. Called after the ngAfterViewInit and every subsequent ngAfterContentChecked().