LifeCycle Hooks- OnChange() – OnInit() – DoCheck() – AfterContentInit() – AfterContentChecked() –

AfterViewInit() – AfterViewChecked() – OnDestroy().

Angular Directives - An element or component can be assigned an attribute directive or a structural directive
to modify its behavior. An attribute directive is an attribute that is associated with an element or component. A
structural directive is a directive that modifies the structure of an element or component.
1) Attribute Directives - An element, component, or other directive can be decorated with an attribute
directive. Angular exports the following attribute directives:

2) Structural Directives- Elements that are added or removed from the DOM in Angular's structure are referred
to as structural directives. Here are the most prevalent structural directives in Angular:

Decorators-
 interface IEmployee{
App.module.ts or review.module.ts
firstName : string; lastName : string; middleName ?: string;
import { BrowserModule } from '@angular/platform-browser';
}
import { FormsModule } from '@angular/forms';
let emp : IEmployee {firstName:"Akshay", lastName =
import { HttpClient, HttpClientModule } from
"Patidar"}
'@angular/common/http'; // for restapi call
import { NgModule, Component, OnInit, EventEmitter, Output,
ViewChild, Input } from '@angular/core'; Custom Pipes
import { RouterModule } from '@angular/router'; import { Pipe, PipeTransform } from '@angular/core';
import { AppComponent } from './app.component'; @Pipe({
import { WelcomeComponent } from name: 'reverse'
'./home/welcome.component’; })
Import {CardModule} from ‘primeng/card’; export class ReversePipe implements PipeTransform {
Import {ButtonModule} from ‘primeng/button’; nvalue: string
Import {CalenderModule} from ‘primeng/calender’; transform(value: any, ...args): any {
import { Observable, of } from 'rxjs'; this.nvalue = value.split('').reverse().join('');
import { HTTP_INTERCEPTORS } from '@angular/common/http'; return this.nvalue;
import { HttpErrorInterceptor } from }
'./interceptors/HttpErrorInterceptor'; }
<h3> The reverse string is {{ "string" | reverse}}</h3>
@NgModule({ Pure Pipes - the pipe doesn’t use any internal state and
declarations: [ the output remains the same as long as the parameters
AppComponent, WelcomeComponent passed remain the same.
], Impure Pipes - is called for every change detection cycle
imports: [ regardless of the change in the input fields. Multiple pipe
BrowserModule, FormsModule, HttpClientModule, instances are created for these pipes and the inputs passed
CardModule, ButtonModule, DialogModule, to these pipes are mutable.
ReviewModule, SpinnerModule, DropDownModule, @Injectable()
RouterModule.forRoot([ export class HttpErrorInterceptor implements
{ path: "welcome", component: WelcomeComponent }, HttpInterceptor {
{ path: "", redirectTo: "welcome", pathMatch: "full" }, intercept(request: HttpRequest<any>, next: HttpHandler):
{ path: "**", redirectTo: "welcome", pathMatch: "full" } Observable<HttpEvent<any>> {
], { useHash: true }) return next.handle(request)
], .pipe(
Providers: [ tap(data => console.log(data)),
AppService, LcFilterPopupComponent, catchError((error: HttpErrorResponse) => {
provide: HTTP_INTERCEPTORS, if (error.error instanceof ErrorEvent) {
useClass: HttpErrorInterceptor, // A client-side or network error occurred. Handle it
multi: true, accordingly.
], console.error('An error occurred:',
bootstrap: [AppComponent] error.error.message);
}) } else { // The backend returned an unsuccessful
export class AppModule { response code. The response body may contain clues as to
@Output() cancelFilter = new EventEmitter(); what went wrong,
@Input() selectedDropDown : any; console.error(
`Backend returned code ${error.status}, ` +
constructor(private http: HttpClient) `body was: ${error.error}`);
const localUrl = 'assets/data/smartphone.json'; } // return an observable with a user-facing error
getSmartphone(): Observable<any> { message
return this.http.get<Smartphone[]>(localUrl).pipe( return throwError(
retry(3), 'Something bad happened; please try again later.');
catchError(this.handleError<Smartphone[]>('getSmartphone', []))); })
} );
} }