How to Create Angular 12 CRUD Example

Hello Dev,

Right now, i we’ll present you find out how to create angular 12 CRUD instance. This text will provide you with easy instance of find out how to create angular 12 CRUD instance. you’ll discover ways to create angular 12 CRUD instance.

As you realize, angular 12 is launched few months again. angular 12 present extra characteristic and enhancements. We’ll provide help to in making seven crude operations of angular 12 on this submit. So let’s observe few step to create instance of find out how to create angular 12 CRUD instance.

Step 1:- Create New Angular App

First of, open your terminal and set up new angular app:


ng new my-crud-app --routing

Step 2:- Set up Bootstrap


npm set up bootstrap --save

import css file as like bellow
src/types.css


/* You'll be able to add international types to this file, and in addition import different model recordsdata */
@import "~bootstrap/dist/css/bootstrap.css";

Step 3:- Create Put up Module

observe command and create submit module


ng generate module submit --routing

efficiently run command and create recordsdata:


src/app/submit/submit.module.ts
src/app/submit/post-routing.module.ts

Step 4:- Create Element For Module

add new part to our submit module utilizing bellow command, so let’s create index, view, create and edit part for admin module:


ng generate part submit/index
ng generate part submit/view
ng generate part submit/create
ng generate part submit/edit

efficiently run command and create folder with recordsdata:


src/app/submit/index/*
src/app/submit/view/*
src/app/submit/create/*
src/app/submit/edit/*

Step 5:- Create Route

On this step, we’ll merely create route for index, create, edit and think about utilizing generated new part. so now we have to replace our post-routing module file.

src/app/submit/post-routing.module.ts


import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { IndexComponent } from './index/index.part';
import { ViewComponent } from './view/view.part';
import { CreateComponent } from './create/create.part';
import { EditComponent } from './edit/edit.part';
  
const routes: Routes = [
  { path: 'post', redirectTo: 'post/index', pathMatch: 'full'},
  { path: 'post/index', component: IndexComponent },
  { path: 'post/:postId/view', component: ViewComponent },
  { path: 'post/create', component: CreateComponent },
  { path: 'post/:postId/edit', component: EditComponent } 
];
  
@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class PostRoutingModule { }

Step 6:- Create Interface

on this step, we’ll create interface utilizing angular command for submit module.


ng generate interface submit/submit

src/app/submit/submit.ts


export interface Put up {
    id: quantity;
    title: string;
    physique: string;
}

Step 7:- Create Companies

Right here, we’ll create submit service file and we’ll write and name all net providers. we’ll create getAll(), create(), discover(), replace() and delete().

we’re utilizing https://jsonplaceholder.typicode.com site api for now.

create submit service and put all code for net service methodology.


ng generate service submit/submit

src/app/submit/submit.service.ts


import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/widespread/http';
   
import {  Observable, throwError } from 'rxjs';
import { catchError } from 'rxjs/operators';
    
import { Put up } from './submit';
     
@Injectable({
  providedIn: 'root'
})
export class PostService {
     
  personal apiURL = "https://jsonplaceholder.typicode.com";
     
  httpOptions = {
    headers: new HttpHeaders({
      'Content material-Kind': 'software/json'
    })
  }
   
  constructor(personal httpClient: HttpClient) { }
     
  getAll(): Observable {

    return this.httpClient.get(this.apiURL + '/posts/')

    .pipe(
      catchError(this.errorHandler)
    )
  }
     
  create(submit:Put up): Observable {

    return this.httpClient.submit(this.apiURL + '/posts/', JSON.stringify(submit), this.httpOptions)

    .pipe(
      catchError(this.errorHandler)
    )
  }  
     
  discover(id:quantity): Observable {

    return this.httpClient.get(this.apiURL + '/posts/' + id)

    .pipe(
      catchError(this.errorHandler)
    )
  }
     
  replace(id:quantity, submit:Put up): Observable {

    return this.httpClient.put(this.apiURL + '/posts/' + id, JSON.stringify(submit), this.httpOptions)

    .pipe(
      catchError(this.errorHandler)
    )
  }
     
  delete(id:quantity){
    return this.httpClient.delete(this.apiURL + '/posts/' + id, this.httpOptions)

    .pipe(
      catchError(this.errorHandler)
    )
  }
    
    
  errorHandler(error:any) {
    let errorMessage="";
    if(error.error instanceof ErrorEvent) {
      errorMessage = error.error.message;
    } else {
      errorMessage = `Error Code: ${error.standing}nMessage: ${error.message}`;
    }
    return throwError(errorMessage);
 }
}

Step 8:- Replace Element and Template

see one after the other:

1:- Record Web page Template and Element
src/app/submit/index/index.part.ts


import { Element, OnInit } from '@angular/core';
import { PostService } from '../submit.service';
import { Put up } from '../submit';
    
@Element({
  selector: 'app-index',
  templateUrl: './index.part.html',
  styleUrls: ['./index.component.css']
})
export class IndexComponent implements OnInit {
     
  posts: Put up[] = [];
   
  constructor(public postService: PostService) { }
    
  ngOnInit(): void {
    this.postService.getAll().subscribe((knowledge: Put up[])=>{
      this.posts = knowledge;
      console.log(this.posts);
    })  
  }
    
  deletePost(id:quantity){
    this.postService.delete(id).subscribe(res => {
         this.posts = this.posts.filter(merchandise => merchandise.id !== id);
         console.log('Put up deleted efficiently!');
    })
  }
  
}

src/app/submit/index/index.part.html


<div class="container">
    <h1>How one can Create Angular 12 CRUD Instance - codeplaners.com</h1>
  
    <a href="#" routerLink="/submit/create/" class="btn btn-success">Create New Put up</a>
    
    <desk class="desk table-bordered">
      <tr>
        <th>ID</th>
        <th>Title</th>
        <th>Physique</th>
        <th width="220px">Motion</th>
      </tr>
      <tr *ngFor="let submit of posts">
        <td>{{ submit.id }}</td>
        <td>{{ submit.title }}</td>
        <td>{{ submit.physique }}</td>
        <td>
          <a href="#" [routerLink]="['/post/', post.id, 'view']" class="btn btn-info">View</a>
          <a href="#" [routerLink]="['/post/', post.id, 'edit']" class="btn btn-primary">Edit</a>
          <button sort="button" (click on)="deletePost(submit.id)" class="btn btn-danger">Delete</button>
        </td>
      </tr>
    </desk>
 </div>

2:- Create Web page Template and Element

src/app/submit/create/create.part.ts


import { Element, OnInit } from '@angular/core';
import { PostService } from '../submit.service';
import { Router } from '@angular/router';
import { FormGroup, FormControl, Validators} from '@angular/types';
   
@Element({
  selector: 'app-create',
  templateUrl: './create.part.html',
  styleUrls: ['./create.component.css']
})
export class CreateComponent implements OnInit {
  
  kind: FormGroup;
   
  constructor(
    public postService: PostService,
    personal router: Router
  ) { }
  
  ngOnInit(): void {
    this.kind = new FormGroup({
      title: new FormControl('', [Validators.required]),
      physique: new FormControl('', Validators.required)
    });
  }
   
  get f(){
    return this.kind.controls;
  }
    
  submit(){
    console.log(this.kind.worth);
    this.postService.create(this.kind.worth).subscribe(res => {
         console.log('Put up created efficiently!');
         this.router.navigateByUrl('submit/index');
    })
  }
  
}

src/app/submit/create/create.part.html


<div class="container">
    <h1>Create New Put up</h1>
  
    <a href="#" routerLink="/submit/index" class="btn btn-primary">Again</a>
        
    <kind [formGroup]="kind" (ngSubmit)="submit()">
  
        <div class="form-group">
            <label for="title">Title:</label>
            <enter 
                formControlName="title"
                id="title" 
                sort="textual content" 
                class="form-control">
            <div *ngIf="f.title.touched && f.title.invalid" class="alert alert-danger">
                <div *ngIf="f.title.errors?.required">Title is required.</div>
            </div>
        </div>
  
        <div class="form-group">
            <label for="physique">Physique</label>
            <textarea 
                formControlName="physique"
                id="physique" 
                sort="textual content" 
                class="form-control">
            </textarea>
            <div *ngIf="f.physique.touched && f.physique.invalid" class="alert alert-danger">
                <div *ngIf="f.physique.errors?.required">Physique is required.</div>
            </div>
        </div>
  
        <button class="btn btn-primary" sort="submit" [disabled]="!kind.legitimate">Submit</button>
    </kind>
</div>

3:- Edit Web page Template and Element
src/app/submit/edit/edit.part.ts


import { Element, OnInit } from '@angular/core';
import { PostService } from '../submit.service';
import { ActivatedRoute, Router } from '@angular/router';
import { Put up } from '../submit';
import { FormGroup, FormControl, Validators} from '@angular/types';
   
@Element({
  selector: 'app-edit',
  templateUrl: './edit.part.html',
  styleUrls: ['./edit.component.css']
})
export class EditComponent implements OnInit {
    
  id: quantity;
  submit: Put up;
  kind: FormGroup;
  
  constructor(
    public postService: PostService,
    personal route: ActivatedRoute,
    personal router: Router
  ) { }
  
  ngOnInit(): void {
    this.id = this.route.snapshot.params['postId'];
    this.postService.discover(this.id).subscribe((knowledge: Put up)=>{
      this.submit = knowledge;
    });
    
    this.kind = new FormGroup({
      title: new FormControl('', [Validators.required]),
      physique: new FormControl('', Validators.required)
    });
  }
   
  get f(){
    return this.kind.controls;
  }
     
  submit(){
    console.log(this.kind.worth);
    this.postService.replace(this.id, this.kind.worth).subscribe(res => {
         console.log('Put up up to date efficiently!');
         this.router.navigateByUrl('submit/index');
    })
  }
   
}

src/app/submit/edit/edit.part.html


<div class="container">
    <h1>Replace Put up</h1>
  
    <a href="#" routerLink="/submit/index" class="btn btn-primary">Again</a>
        
    <kind [formGroup]="kind" (ngSubmit)="submit()">
  
        <div class="form-group">
            <label for="title">Title:</label>
            <enter 
                formControlName="title"
                id="title" 
                sort="textual content" 
                [(ngModel)]="submit.title"
                class="form-control">
            <div *ngIf="f.title.touched && f.title.invalid" class="alert alert-danger">
                <div *ngIf="f.title.errors?.required">Title is required.</div>
            </div>
        </div>
         
        <div class="form-group">
            <label for="physique">Physique</label>
            <textarea 
                formControlName="physique"
                id="physique" 
                sort="textual content" 
                [(ngModel)]="submit.physique"
                class="form-control">
            </textarea>
            <div *ngIf="f.physique.touched && f.physique.invalid" class="alert alert-danger">
                <div *ngIf="f.physique.errors?.required">Physique is required.</div>
            </div>
        </div>
        
        <button class="btn btn-primary" sort="submit" [disabled]="!kind.legitimate">Replace</button>
    </kind>
</div>

4:- Particulars Web page Template and Element
src/app/submit/view/view.part.ts


import { Element, OnInit } from '@angular/core';
import { PostService } from '../submit.service';
import { ActivatedRoute, Router } from '@angular/router';
import { Put up } from '../submit';
  
@Element({
  selector: 'app-view',
  templateUrl: './view.part.html',
  styleUrls: ['./view.component.css']
})
export class ViewComponent implements OnInit {
   
  id: quantity;
  submit: Put up;
   
  constructor(
    public postService: PostService,
    personal route: ActivatedRoute,
    personal router: Router
   ) { }
  
  ngOnInit(): void {
    this.id = this.route.snapshot.params['postId'];
      
    this.postService.discover(this.id).subscribe((knowledge: Put up)=>{
      this.submit = knowledge;
    });
  }
  
}

src/app/submit/view/view.part.html


<div class="container">
    <h1>View Put up</h1>
  
    <a href="#" routerLink="/submit/index" class="btn btn-primary">Again</a>
   
    <div>
        <sturdy>ID:</sturdy>
        <p>{{ submit.id }}</p>
    </div>
   
    <div>
        <sturdy>Title:</sturdy>
        <p>{{ submit.title }}</p>
    </div>
   
    <div>
        <sturdy>Physique:</sturdy>
        <p>{{ submit.physique }}</p>
    </div>
   
</div>

Now let’s replace app html view:
src/app/app.part.html


<router-outlet></router-outlet>

Step 9:- Import Module File

src/app/app.module.ts


import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/widespread/http';
  
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.part';
  
import { PostModule } from './submit/submit.module';
  
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    PostModule,
    HttpClientModule
  ],
  suppliers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

src/app/submit/submit.module.ts


import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/widespread';
  
import { PostRoutingModule } from './post-routing.module';
import { IndexComponent } from './index/index.part';
import { ViewComponent } from './view/view.part';
import { CreateComponent } from './create/create.part';
import { EditComponent } from './edit/edit.part';
  
import { FormsModule, ReactiveFormsModule } from '@angular/types';
  
@NgModule({
  declarations: [IndexComponent, ViewComponent, CreateComponent, EditComponent],
  imports: [
    CommonModule,
    PostRoutingModule,
    FormsModule,
    ReactiveFormsModule
  ]
})
export class PostModule { }

if in case you have different points with PropertyInitialization then you may set false as like bellow:

tsconfig.json


{
  ...
  "angularCompilerOptions": {
    ...
    "strictPropertyInitialization" : false,
  }
}

run our instance, you may run by following command:


ng serve

Url:


localhost:4200/submit

Komentar

Posting Komentar

Postingan populer dari blog ini

PHP 8 Multiple Select Dropdown Example

Gambar
by admin Writer Printed – August 10, 2021 10:51 am | Up to date – August 10, 2021 11:00 am 36 Views Hello Dev, Right this moment, i we are going to present you php Eight a number of choose dropdown instance. This text gives you easy instance of php Eight a number of choose dropdown instance. you’ll study get php Eight a number of choose dropdown instance. So let’s observe few step to create instance of php Eight a number of choose dropdown instance. Instance: index.php <html lang="en"> <head> <meta charset="utf-8"> <title>php Eight A number of Choose Dropdown Instance</title> <meta title="viewport" content material="width=device-width, initial-scale=1, shrink-to-fit=no"> <hyperlink rel="preconnect" href="https://fonts.gstatic.com"> <hyperlink href="https://fonts.googleapis.com/css2?household=JetBrains+Mono:wght@200&show=swap" rel="sty
Baca selengkapnya

Laravel 8 Get HTTP Hostname

This put up was final up to date on December 2nd, 2021 at 01:32 am Hello Dev, Right this moment, i we’ll present you laravel eight get HTTP hostname. This text provides you with easy instance of laravel eight get HTTP hostname. you’ll laravel eight get HTTP hostname. On this article, we’ll implement a laravel eight get HTTP hostname. get http host title from request object and helper that approach you possibly can simply get area title or sub area title too. request present two strategies to get hostname as getHttpHost() and getHost(). So let’s comply with few step to create instance of laravel eight get HTTP hostname. Instance: 1 $host = request()->getHttpHost(); Instance: 2 $host = request()->getHost(); Instance: 3 public perform yourControllerFun(Request $request) { $host = $request->getHttpHost(); dd($host); } I hope it would help you…
Baca selengkapnya

JQuery Drag And Drop Menu Example

Gambar
Hello Dev, In the present day, i we’ll present you jQuery drag and drop menu instance. This text offers you easy instance of jQuery drag and drop menu instance. you’ll study jQuery drag and drop menu instance. So let’s observe few step to create instance of jQuery drag and drop menu instance. Preview: Instance <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta title="viewport" content material="width=device-width, initial-scale=1, minimum-scale=1"> <title>JQuery Drag And Drop Menu Instance - Codeplaners</title> <hyperlink href="model.css" rel="stylesheet" kind="textual content/css"> </head> <physique> <div class="container"> <h1 model="margin:30px auto 30px auto;">JQuery Drag And Drop Menu Instance - Codeplaners</h1> <div class="dragmenu" id="drag
Baca selengkapnya