All Major Concepts of Angular in Details with Example

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

@Component({
  selector: 'app-example',
  templateUrl: './example.component.html',
  styleUrls: ['./example.component.css']
})
export class ExampleComponent implements OnInit {
  constructor() { }

  ngOnInit() { }
}

npm install -g @angular/cli

ng new my-app

import { Component } from '@angular/core';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})

export class AppComponent {
   title = 'frontend';
}

import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
// search module
import { Ng2SearchPipeModule } from 'ng2-search-filter';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { ListComponent } from './users/list/list.component';
import { ManageComponent } from './users/manage/manage.component';

import { ToastrModule } from 'ngx-toastr';


@NgModule({
declarations: [
AppComponent,
ListComponent,
ManageComponent
],
imports: [
BrowserModule,
AppRoutingModule,
HttpClientModule,
FormsModule,
ReactiveFormsModule,
Ng2SearchPipeModule,
BrowserAnimationsModule,
ToastrModule.forRoot(),
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

import { Injectable } from '@angular/core';
import { HttpClient, HttpErrorResponse, HttpHeaders } from "@angular/common/http";
import {environment} from '../environments/environment';
import { throwError, Observable } from 'rxjs';
import { catchError } from 'rxjs/operators';

import { User } from '../app/models/users';

@Injectable({
   providedIn: 'root'
})
export class UserService {
  private apiServer = environment.API_URL ;
    httpOptions = {
       headers: new HttpHeaders({
       'Content-Type': 'application/json'
    })
  }
 constructor(private httpClient: HttpClient) { }
 create(User): Observable<User> {
  return this.httpClient.post<User>(this.apiServer + '/users/create', 
    JSON.stringify(User), this.httpOptions)
    .pipe(catchError(this.errorHandler))
 }

 getAll(): Observable<User[]> {
   return this.httpClient.get<User[]>(this.apiServer + '/users').pipe(
   catchError(this.errorHandler))
 }
}

<strong>Component</strong>
import { Component} from '@angular/core';

@Component({
selector: 'app-list',
templateUrl: './list.component.html',
styleUrls: ['./list.component.css']
})
export class ListComponent {
<strong>searchText;</strong>

constructor() { }
}

<strong>View
</strong>
<div>
   <div class="col-sm">
      <input type="text" class="form-control" 
        placeholder="Search.." <strong>[(ngModel)]="searchText"</strong> autocomplete="off"/>
   </div>
    {{<strong>searchText</strong>}}
</div>

import { PipeTransform, Pipe } from '@angular/core';
@Pipe({
    name: 'filter'
})
export class FilterPipe implements PipeTransform {
     transform(items: any, term: any, prop: string): any {
        if (!term || !prop) return items;
        return items.filter((item) => 
        item[prop].toString().toLowerCase().includes(term.toLowerCase()));
     }
}

<tr *ngFor="let user of users| filter : searchText:'email' ; let i = index ">
&nbsp; &nbsp;<td [ngClass]="user.role">{{i+ 1}}</td>
&nbsp; &nbsp;<td [ngClass]="user.role">{{user.email}}</td>
</tr>

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { ListComponent } from './users/list/list.component';
import { ManageComponent } from './users/manage/manage.component';

const routes: Routes = [
{ path: '' ,component: ListComponent},
{ path: 'create', component: ManageComponent },
{ path: 'update/:Id', component: ManageComponent } 
];

@NgModule({
imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

import { Observable } from 'rxjs/Observable';

import { Injectable } from '@angular/core';

import { Resolve, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';

import { Observable } from 'rxjs/Observable';

import { HttpClient } from '@angular/common/http';

@Injectable()

export&nbsp;class&nbsp;UserResolverService&nbsp;implements&nbsp;Resolve<any>&nbsp;{

&nbsp;&nbsp;constructor(private&nbsp;http:&nbsp;HttpClient)&nbsp;{&nbsp;}

&nbsp;&nbsp;/**

&nbsp;&nbsp;&nbsp;*&nbsp;resolve&nbsp;method

&nbsp;&nbsp;&nbsp;*&nbsp;@param&nbsp;route

&nbsp;&nbsp;&nbsp;*&nbsp;@param&nbsp;state

&nbsp;&nbsp;&nbsp;*/

&nbsp;&nbsp;resolve(route:&nbsp;ActivatedRouteSnapshot):&nbsp;Observable<any>&nbsp;{

&nbsp;&nbsp;&nbsp;&nbsp;const&nbsp;userId&nbsp;=&nbsp;route.params['id'];

&nbsp;&nbsp;&nbsp;&nbsp;const&nbsp;url&nbsp;=&nbsp;`https://jsonplaceholder.typicode.com/users/${userId}`;

&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;this.http.get(url);

&nbsp;&nbsp;}

}