Bootstrap drag and drop using jquery UI sortable

admin — Wed, 23 Jun 2021 00:17:59 +0000

Hi Dev,

Today, i we will show you Bootstrap drag and drop using jquery UI sortable. This article will give you simple example of Bootstrap drag and drop using jquery UI sortable. you will learn Bootstrap drag and drop using jquery UI sortable. So let’s follow few step to create example of Bootstrap drag and drop using jquery UI sortable.

Preview:

Example



Bootstrap Sort list by drag and drop using jquery UI sortable - Codeplaners.com










    
        
            
                
                    
                        
                            C
                             Patrick Linod
                                For what reason would it be advisable for me to think about business content?
                            
                            
                                1 weeks ago
                            
                        
                        
                            
                             Steven Hmpire
                                Build a progressive web app using jQuery
                            
                            
                                10 days ago
                            
                        
                        
                            M
                             Alan musk
                                it be advisable for me to think about business content?
                            
                            
                                13/12 18

The post Bootstrap drag and drop using jquery UI sortable appeared first on Codeplaners.

How to Create Angular 12 CRUD Example

admin — Tue, 15 Jun 2021 00:28:48 +0000

Hi Dev,

Today, i we will show you how to create angular 12 CRUD example. This article will give you simple example of how to create angular 12 CRUD example. you will learn how to create angular 12 CRUD example.

As you know, angular 12 is released few months back. angular 12 provide more feature and improvements. We will help you in making seven crude operations of angular 12 in this post. So let’s follow few step to create example of how to create angular 12 CRUD example.

Step 1:- Create New Angular App

First of, open your terminal and install new angular app:

ng new my-crud-app --routing

Step 2:- Install Bootstrap

npm install bootstrap --save

import css file as like bellow
src/styles.css

/* You can add global styles to this file, and also import other style files */
@import "~bootstrap/dist/css/bootstrap.css";

Step 3:- Create Post Module

follow command and create post module

ng generate module post --routing

successfully run command and create files:

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

Step 4:- Create Component For Module

add new component to our post module using bellow command, so let’s create index, view, create and edit component for admin module:

ng generate component post/index
ng generate component post/view
ng generate component post/create
ng generate component post/edit

successfully run command and create folder with files:

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

Step 5:- Create Route

In this step, we will simply create route for index, create, edit and view using generated new component. so we have to update our post-routing module file.

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

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { IndexComponent } from './index/index.component';
import { ViewComponent } from './view/view.component';
import { CreateComponent } from './create/create.component';
import { EditComponent } from './edit/edit.component';
  
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

in this step, we will create interface using angular command for post module.

ng generate interface post/post

src/app/post/post.ts

export interface Post {
    id: number;
    title: string;
    body: string;
}

Step 7:- Create Services

Here, we will create post service file and we will write and call all web services. we will create getAll(), create(), find(), update() and delete().

we are using https://jsonplaceholder.typicode.com web site api for now.

create post service and put all code for web service method.

ng generate service post/post

src/app/post/post.service.ts

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
   
import {  Observable, throwError } from 'rxjs';
import { catchError } from 'rxjs/operators';
    
import { Post } from './post';
     
@Injectable({
  providedIn: 'root'
})
export class PostService {
     
  private apiURL = "https://jsonplaceholder.typicode.com";
     
  httpOptions = {
    headers: new HttpHeaders({
      'Content-Type': 'application/json'
    })
  }
   
  constructor(private httpClient: HttpClient) { }
     
  getAll(): Observable {

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

    .pipe(
      catchError(this.errorHandler)
    )
  }
     
  create(post:Post): Observable {

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

    .pipe(
      catchError(this.errorHandler)
    )
  }  
     
  find(id:number): Observable {

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

    .pipe(
      catchError(this.errorHandler)
    )
  }
     
  update(id:number, post:Post): Observable {

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

    .pipe(
      catchError(this.errorHandler)
    )
  }
     
  delete(id:number){
    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.status}\nMessage: ${error.message}`;
    }
    return throwError(errorMessage);
 }
}

Step 8:- Update Component and Template

see one by one:

1:- List Page Template and Component
src/app/post/index/index.component.ts

import { Component, OnInit } from '@angular/core';
import { PostService } from '../post.service';
import { Post } from '../post';
    
@Component({
  selector: 'app-index',
  templateUrl: './index.component.html',
  styleUrls: ['./index.component.css']
})
export class IndexComponent implements OnInit {
     
  posts: Post[] = [];
   
  constructor(public postService: PostService) { }
    
  ngOnInit(): void {
    this.postService.getAll().subscribe((data: Post[])=>{
      this.posts = data;
      console.log(this.posts);
    })  
  }
    
  deletePost(id:number){
    this.postService.delete(id).subscribe(res => {
         this.posts = this.posts.filter(item => item.id !== id);
         console.log('Post deleted successfully!');
    })
  }
  
}

src/app/post/index/index.component.html


    How to Create Angular 12 CRUD Example - codeplaners.com
  
    Create New Post
    
    
      
        ID
        Title
        Body
        Action
      
      
        {{ post.id }}
        {{ post.title }}
        {{ post.body }}
        
          View
          Edit

ID	Title	Body	Action
{{ post.id }}	{{ post.title }}	{{ post.body }}	View Edit

2:- Create Page Template and Component

src/app/post/create/create.component.ts

import { Component, OnInit } from '@angular/core';
import { PostService } from '../post.service';
import { Router } from '@angular/router';
import { FormGroup, FormControl, Validators} from '@angular/forms';
   
@Component({
  selector: 'app-create',
  templateUrl: './create.component.html',
  styleUrls: ['./create.component.css']
})
export class CreateComponent implements OnInit {
  
  form: FormGroup;
   
  constructor(
    public postService: PostService,
    private router: Router
  ) { }
  
  ngOnInit(): void {
    this.form = new FormGroup({
      title: new FormControl('', [Validators.required]),
      body: new FormControl('', Validators.required)
    });
  }
   
  get f(){
    return this.form.controls;
  }
    
  submit(){
    console.log(this.form.value);
    this.postService.create(this.form.value).subscribe(res => {
         console.log('Post created successfully!');
         this.router.navigateByUrl('post/index');
    })
  }
  
}

src/app/post/create/create.component.html


    Create New Post
  
    Back
        
    
  
        
            Title:
            
            
                Title is required.
            
        
  
        
            Body
                        
            
                Body is required.

3:- Edit Page Template and Component
src/app/post/edit/edit.component.ts

import { Component, OnInit } from '@angular/core';
import { PostService } from '../post.service';
import { ActivatedRoute, Router } from '@angular/router';
import { Post } from '../post';
import { FormGroup, FormControl, Validators} from '@angular/forms';
   
@Component({
  selector: 'app-edit',
  templateUrl: './edit.component.html',
  styleUrls: ['./edit.component.css']
})
export class EditComponent implements OnInit {
    
  id: number;
  post: Post;
  form: FormGroup;
  
  constructor(
    public postService: PostService,
    private route: ActivatedRoute,
    private router: Router
  ) { }
  
  ngOnInit(): void {
    this.id = this.route.snapshot.params['postId'];
    this.postService.find(this.id).subscribe((data: Post)=>{
      this.post = data;
    });
    
    this.form = new FormGroup({
      title: new FormControl('', [Validators.required]),
      body: new FormControl('', Validators.required)
    });
  }
   
  get f(){
    return this.form.controls;
  }
     
  submit(){
    console.log(this.form.value);
    this.postService.update(this.id, this.form.value).subscribe(res => {
         console.log('Post updated successfully!');
         this.router.navigateByUrl('post/index');
    })
  }
   
}

src/app/post/edit/edit.component.html


    Update Post
  
    Back
        
    
  
        
            Title:
            
            
                Title is required.
            
        
         
        
            Body
                        
            
                Body is required.

4:- Details Page Template and Component
src/app/post/view/view.component.ts

import { Component, OnInit } from '@angular/core';
import { PostService } from '../post.service';
import { ActivatedRoute, Router } from '@angular/router';
import { Post } from '../post';
  
@Component({
  selector: 'app-view',
  templateUrl: './view.component.html',
  styleUrls: ['./view.component.css']
})
export class ViewComponent implements OnInit {
   
  id: number;
  post: Post;
   
  constructor(
    public postService: PostService,
    private route: ActivatedRoute,
    private router: Router
   ) { }
  
  ngOnInit(): void {
    this.id = this.route.snapshot.params['postId'];
      
    this.postService.find(this.id).subscribe((data: Post)=>{
      this.post = data;
    });
  }
  
}

src/app/post/view/view.component.html


    View Post
  
    Back
   
    
        ID:
        {{ post.id }}
    
   
    
        Title:
        {{ post.title }}
    
   
    
        Body:
        {{ post.body }}

Now let’s update app html view:
src/app/app.component.html

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/common/http';
  
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
  
import { PostModule } from './post/post.module';
  
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    PostModule,
    HttpClientModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

src/app/post/post.module.ts

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

if you have other issues with PropertyInitialization then you can set false as like bellow:

tsconfig.json

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

run our example, you can run by following command:

ng serve

Url:

localhost:4200/post

The post How to Create Angular 12 CRUD Example appeared first on Codeplaners.

How to Install Bootstrap 5 in Angular 12

admin — Fri, 04 Jun 2021 00:22:51 +0000

Hello,

I am going to tell you how to add Bootstrap 5 in Angular 12, I will give you a simple example for how to add Bootstrap 5 in Angular 12. As we know that Bootstrap is the most popular framework of Word. So if you want to use Bootstrap 5 for Angular 12, then I will give you a simple example of this.

I will give you 2 examples how to install Bootstrap in Angular 12. So let’s follow few step to create example of How to Install Bootstrap 5 in Angular 12.

First of all install your new angular with this command:

ng new my-new-app

Example 1:

In this example, all you have to do is install Bootstrap in Angular 12 and add the CSS file. This is only for adding a css file.
then you can run the command below:

npm install bootstrap --save

need to import your bootstrap css on style.css file as like bellow
src/style.css

@import "~bootstrap/dist/css/bootstrap.css";

Example 2:

In this example, we’ll be adding Bootstrap with jQuery and popper js. so that you can also import bootstrap css and bootstrap js function.
run following commands:

npm install bootstrap --save

npm install jquery --save

npm install popper.js --save

Now after successfully run above command. let’s import it in angular.json file.
angular.json

"styles": [
        "node_modules/bootstrap/dist/css/bootstrap.min.css",
        "src/styles.css"
      ],
      "scripts": [
          "node_modules/jquery/dist/jquery.min.js",
          "node_modules/bootstrap/dist/js/bootstrap.min.js"
      ]

src/app/app.component.html


  Install Bootstrap 5 in Angular 12 - codeplaners
  
    
      Featured
    
    
      Special title treatment
      With supporting text below as a natural lead-in to additional content.
      Go somewhere

The post How to Install Bootstrap 5 in Angular 12 appeared first on Codeplaners.

Bootstrap 5 Archives - Codeplaners