Angular 8 Inline Table Editing with Asp.Net Core Web API

Share
Embed
  • Published on Sep 15, 2019
  • Angular Inline Table Editing with Asp.Net Core Web API
    We'll discuss how to implement angular inline table editing with Asp.Net Core Web API using angular dynamic form arrays.
    All of the CRUD Operations - insert, update, delete, and retrieve are implemented inside the project. In-order to design the angular grid-like structure we have used bootstrap not angular material.
    Content Discussed :
    - Design Angular inline table with Dynamic Form Array
    - Implemented inline edit/ CRUD operations with Asp.Net Core Web API
    - Included Drop Down List inside the angular grid-like structure.
    - Validation for all of the controls
    - Notification message for inline-table insert, update, and delete operation.
    Asp.Net Core 2.2 Issue Fix: github.com/aspnet/AspNetCore/...
    💖 Show Your Support ( Donation )
    ➤ bit.ly/3L36ut4 (PayPal)
    ➤ bit.ly/36lvWdV (Cards, Gpay, Apple Pay, UPIs)
    ✨ Recommended Courses
    ► Angular : bit.ly/35oTA5e
    ► .Net Core API : bit.ly/37y6pwH
    ► Angular + .Net Core API : bit.ly/34q7jtr
    ► Entity Framework: bit.ly/2TiHFAk
    📂 GitHub Repository
    ► bit.ly/2lEKyxW
    🌀 Related Videos
    goo.gl/3DefLb : JWT Login Angular + Asp.Net Core API
    goo.gl/ijPZQk : .Net Core Web API CRUD with Angular 7
    goo.gl/AL18CP : Asp.Net Core MVC CRUD
    goo.gl/ZHDEhP : Master Detail CRUD Web API + Angular
    goo.gl/fJSrpX : Angular Login with Web API
    Subscribe to this channel Link to this video
    ► goo.gl/RFY5C2 ► bit.ly/2lRCxWo
    📚 Must-Read Books for All Programmers
    Code Complete(2nd Edition) : geni.us/s6AK9t
    The Art of Computer Programming : geni.us/Ko4H8m
    Clean Code : geni.us/Jf9EBTB
    Design Patterns : geni.us/OMPP
    The Pragmatic Programmer : geni.us/8UM9F
    💰 Purchase for Developers
    💻 Laptops
    MacBook Pro with M1 Chip : geni.us/7KGvnCU
    Dell XPS 9570 : geni.us/rYB6
    Microsoft Surface: geni.us/BJgeM
    MacBook Air with M1 Chip : geni.us/fHZzRiB
    ASUS ZenBook 13 : geni.us/LDKE
    Lenovo Ideapad : geni.us/Mwvg2
    ⌨️ Keyboard : Das 4 Professional : geni.us/hkAdzi
    🎬 All Playlist
    bit.ly/2KQN9xF : Angular
    bit.ly/30fPDMg : Asp.Net Core
    bit.ly/325temF : React
    bit.ly/2ws4utg : Python
    goo.gl/viJcFs : Node.js
    goo.gl/gvjUJ7 : Asp.Net MVC
    bit.ly/3ggmmJz : Flutter
    goo.gl/itVayJ : Web API
    goo.gl/YJPPAH : MEAN Stack
    goo.gl/s1zJxo : C# Tutorial
    goo.gl/GXC2aJ : Asp.Net WebForm
    goo.gl/vHS9Hd : C# WinForm
    goo.gl/MLYS9e : MS SQL
    goo.gl/5Vou7t : Crystal Report
    goo.gl/qEWJCs : CG Exercises in C Program
    🌟 About this Channel
    CodAffection - [ 1 hour content weekly ].
    This channel is all about teaching and motivating software developers to build applications/
    websites in various technologies/ programming languages like Angular, React, NodeJS, Python, Asp.Net, C#, JavaScript, SQL, etc.
    ► For Sponsorship Contact here: bit.ly/2TjOt0q
    🔗 Social Media Links
    Blog : www.codaffection.com
    Facebook : codaffection
    Twitter : codaffection
    TheXvid : thexvid.com/user/codaffection
    GitHub : github.com/codaffection

Comments • 134

  • CodAffection
    CodAffection  2 years ago +5

    goo.gl/RFY5C2 : Subscribe to CodAffection
    goo.gl/bPcyXW : Buy me a Coffee
    goo.gl/3DefLb : JWT Login Angular + Asp.Net Core API
    goo.gl/ijPZQk : .Net Core Web API CRUD with Angular 7
    goo.gl/AL18CP : Asp.Net Core MVC CRUD
    goo.gl/ZHDEhP : Master Detail CRUD Web API + Angular
    goo.gl/fJSrpX : Angular Login with Web API

    • Jace Salvador
      Jace Salvador 9 months ago

      i guess Im kinda off topic but do anybody know a good place to stream new series online ?

  • Romel Benavides
    Romel Benavides 2 years ago

    Videos like this are phenomenal! I love your work CodAffection and I hope you continue to create use case projects like so. If it is possible for future videos, can you explain a little more on Controllers and Models a bit more. Was having a hard time understanding your explanation but nevertheless, the video as a whole is great! Thanks again!

  • Fábio Focking
    Fábio Focking 2 years ago +1

    Cara, seus teus tutoriais são muito bons!! Man, the tutorials of yours are pretty good!

  • Jay Bhiyani
    Jay Bhiyani 2 years ago

    Hello.. thank you for such a detailed video..
    Can you please upload a video where one to many database relationship is implemented between two tables using code first method and .net core web api??

    • CodAffection
      CodAffection  2 years ago +1

      thanks for the comment. Let me check what I can do.

  • Mustafa Ahmed
    Mustafa Ahmed Year ago

    Hi, Could please make a tutorial about Globalization/Localization in (Asp Core and Angular) Project, what is the best approach in this subject and also style switching (RTL/LTR).
    Your channel helped me alot. Thank you.

  • Raj Gupta
    Raj Gupta Year ago +1

    Nice videos!
    For those UseSqlServer is not getting resolved, use following commands from PS command:
    dotnet add package Microsoft.EntityFrameworkCore.Design
    dotnet add package Microsoft.EntityFrameworkCore.SqlServer
    Import Entity Framework Core:
    using Microsoft.EntityFrameworkCore;

  • Antonio Clavero
    Antonio Clavero 2 years ago

    Hello, incredible explanation, thank you very much for sharing your knowledge, I am trying to publish the web on my website, but Cors only works for the GET and POST methods but it does NOT work for the other methods such as being PUT or DELETE, you will have an idea what the problem may be ?
    When I try to update it throws the message:
    localhost/:1 Access to XMLHttpRequest at 'localhost/WebApi/api/BankAccount/2' from origin 'localhost:4200' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
    thanks

    • Antonio Clavero
      Antonio Clavero 2 years ago

      @CodAffection In my configure () method I have added this Cors configuration:
      app.UseCors (x =>
      {
      x
      .WithOrigins ("http: // localhost: 4200")
      .AllowAnyOrigin ()
      .AllowAnyMethod ()
      .AllowAnyHeader ()
      .AllowCredentials ();
      });
      But the problem is when you publish the web_api in an IIS, when from Angular you want to consume the web_api only the GET and POST methods work, but in debug mode it works perfect.

    • CodAffection
      CodAffection  2 years ago

      did you configure .net core project for cors for all web methods ?

  • Jhun Batiancila
    Jhun Batiancila Year ago

    Another great tutorial for Angular 8 CRUD using dynamic form array with web api using asp.net core. This video help a lot to those beginner developers like me. great job!!

  • nad sid
    nad sid Year ago

    Hi, thanks for teaching us, but I had to use this syntax in angular 10
    can you please tell me why should I need to used [ngValue]??
    else I get the following error:
    The JSON value could not be converted to System.Int32

  • AmirHamza Sabuz
    AmirHamza Sabuz 2 years ago +3

    Sir Please update the web api from 2.2 to 3.1 and write the code in your blog.

  • Parisa Nejatian
    Parisa Nejatian 2 years ago +1

    thanks a lot for your really really helpful videos. this video was the one which I really searching for that. I just have a suggestion for the next video. could you please include Fluent ApI in it ?

    • CodAffection
      CodAffection  2 years ago

      thanks for the comment and suggestion, can't promise , but I'll think about it later.

  • Orphee ziad
    Orphee ziad 2 years ago +1

    Thanks for wonderful videos. I would like to see a video for searching multiple criteria using asp.net core and angularJS .

  • wakil hasan
    wakil hasan Year ago

    Excellent job man .. Keep up the great work .. thx a million .. If possible a multistep form submission angular and web api please

  • eLogics Infotech
    eLogics Infotech 2 years ago +1

    Thanks for wonderful videos. I request you to kindly to make a small project with Angular 8, Angular Material & Asp.Net Core Web API Where Master Detail Crud operation is covered.

  • Chanakya khatri
    Chanakya khatri Year ago

    hi that was a very good explanation , i am actually making a shopping cart kind of project , can you please make a tutorial on shopping cart on ASP.NET CORE and ANGULAR it will be a great help,
    thankyou

  • Kevin Cordell
    Kevin Cordell 2 years ago +3

    How about a video on using Chart.js or D3.js and building a dashboard with some charts and graphs and then using a pdf program to generate pdf reports.

    • Chandra Kanth
      Chandra Kanth 2 years ago

      Interestingly this is something I worked on, Usually, this is a real project task. I think you might already built something like this?

  • Luqmane Hassane
    Luqmane Hassane 2 years ago +2

    Nice sir, it's helpfull, can you mak us a library management in asp.net core from start to finish please?

  • Hitesh Tulsani
    Hitesh Tulsani 2 years ago

    Awesome video bro. I’d like to connect on LinkedIn. If you don’t mind could you please do this in angular material data table?

  • Su Yang
    Su Yang 2 years ago

    Nice work sir, looking forward to see your react tutorial!

  • GIRIBABU G
    GIRIBABU G 2 years ago

    Nice Video good explanation. how we can store all rows in single submit button instead of each submit

  • Phong Đặng

    You is master
    It bring for me a lot of value
    Thanks you 😙😙

  • ヒソカ モロウ

    Thank you so muchos Code, I know that I'll learn a lot from this vídeo!

    • ヒソカ モロウ
      ヒソカ モロウ 2 years ago

      @CodAffection Hi, I was looking for firebase auth applications and didn't find for Angular 8 so I'd very thankful :D

    • CodAffection
      CodAffection  2 years ago +1

      thanks for the comment, let me know if there is any video suggestion related to asp.net core or angular 8.

  • Cornelius Tonui
    Cornelius Tonui 2 years ago

    I have done everything successfully. I am wondering where/how I can get the styles.css file that was used in this video. Can anyone help please.

    • CodAffection
      CodAffection  2 years ago

      it's there in github repository, link is given video description.

  • Hola
    Hola 2 months ago

    Cool video bro! Can you show us how to use some pipes inside inputs pls?

  • Rahul Mishra
    Rahul Mishra 2 years ago

    Thank you for very good content.Are you provide online coaching???

  • Saqib khanz
    Saqib khanz 2 years ago +1

    Sir, please make a tutorial about authorization and authentication in MEAN Stack. Its a humbly reqest.

    • Saqib khanz
      Saqib khanz 2 years ago

      CodAffection sir, I’m asking about user roles and permissions. Like admin, moderator, user etc.

    • CodAffection
      CodAffection  2 years ago

      sorry for the late reply. MEAN Stack user registration and authorization are already discussed.
      here is the first video : thexvid.com/video/m34FCkBd7UU/video.html
      second : thexvid.com/video/V9zDNfVs7Z4/video.html
      third : thexvid.com/video/T8qepiTbJi4/video.html
      fourth : thexvid.com/video/r0QYP61bCCM/video.html
      For role authorization you can watch this video in angular : thexvid.com/video/MGCC2zTb0t4/video.html

    • Saqib khanz
      Saqib khanz 2 years ago

      Anne Smith, I just want to know about user roles and permission. That's it.

    • Vs Sm
      Vs Sm 2 years ago

      Sir? LOL no wonder you cannot google.

    • Saqib khanz
      Saqib khanz 2 years ago

      Anne Smith Sir, I didn't get it.

  • Daniel Cruz
    Daniel Cruz 2 years ago

    Thanks for sharing, your videos are very useful !!! Keep them coming Angular and .Net

  • Muhammed Karalar
    Muhammed Karalar 2 years ago

    Thanks for sharing. And why do you delete 's '? You always delete it. i don't understand because i have seen a lot of example with plural names. Could you explain that?

    • Muhammed Karalar
      Muhammed Karalar 2 years ago

      @CodAffection thank you

    • CodAffection
      CodAffection  2 years ago +1

      @Muhammed Karalar it's has nothing to do with the convention. I used to name controller with singular naming.
      please check this StackOverflow post : stackoverflow.com/a/12462750/4133590

    • Muhammed Karalar
      Muhammed Karalar 2 years ago

      @CodAffection sorry for my bad english :( You changed controller's name at 16:44 . ( BanksController ==> BankController )
      I mean , you always change but there are a lot of examples with plural names. ( BanksController, ProductsController ... ) I am confused about this. What is the advantage of the singular naming ?

    • CodAffection
      CodAffection  2 years ago +1

      thanks for the comment.
      'delete's' I didn't get you ? could please elaborate by mentioning the exact video time where I do this.

  • Lazerta Rista
    Lazerta Rista Year ago

    Great video but I have a problem. How is it possible that I can either update or insert, when one is working the other is not working. I doubt is because of the if condition between 2 buttons. Any idea?

  • Văn Duy Nguyễn

    hey bro, can you tutorial a completed project about angular + asp.net core? thanks you very much

  • Basavaraju M
    Basavaraju M 2 years ago +1

    Can you explain me with pagination also?

  • Farith Adnan
    Farith Adnan 11 months ago

    Can I try using this tutorial for the latest version of Angular and Asp.net core, is there any possible problem that I will be facing?

  • Reyneer Morales
    Reyneer Morales Year ago

    3:25 why didnt you choose angular icon option? Isnt it the same?

  • Ornella Luna
    Ornella Luna 2 years ago +1

    thanks you very much. I am using this code and it worked very well ...

  • Man-Ung Yi
    Man-Ung Yi 2 years ago

    Great tutorial!

  • Maria Chaudhry
    Maria Chaudhry 2 years ago

    i wish if you can show how to do the application by making database manually

  • troy bryant
    troy bryant 2 years ago

    Thanks great vid. You wouldnt happen to have the css available would you?

    • CodAffection
      CodAffection  2 years ago

      you can see the entire project source code in GitHub repository, the link is given below in video description.

  • hossama ouattara
    hossama ouattara 2 years ago

    i need some help please. i have some errors with my code.
    The JSON value could not be converted to System.Nullable`1[System.Int32]. Path: $.Zoneid | LineNumber: 0 | BytePositionInLine: 53."
    i'm trying to add zoneid from zone table to pays table. please i need help

  • Romel Benavides
    Romel Benavides 2 years ago +1

    I'm noticing the ValuesController in your GitHub repository but in your video you do not explain. I've also been getting a 400 bad request error when trying to do a PUT request to the BankAccount table. Can you help me out with this?

    • Ankur Shah
      Ankur Shah 2 years ago

      i am also getting a put error

  • jonathan araya
    jonathan araya Year ago

    Hello master .. Im begging you to make a tutorial how to configure cors in .netcore 3.1 consume by angular... I've seen a lot of tutorial but it doesnt work.. Pls

  • Sulaiman Ahmed Zameer
    Sulaiman Ahmed Zameer 2 years ago

    Hi Shamseer, can you create an angular and firebase authentication system using oauth and openid connect along with login providers like facebook, google, microsoft, twitter, etc.

  • Ray Huang
    Ray Huang 10 months ago +1

    Hi, the project can't build at angular 12 , how can i fix it , thank you
    I am a newer angular , i study with video , and some error i can't fix it
    Type 'AbstractControl' is missing the following properties from type 'FormGroup': controls, registerControl, addControl, removeControl, and 3 more. [formGroup]="fg" (submit)="recordSubmit(fg)" , [disable]="fg.invalid"

  • p p
    p p Year ago

    sir will you explain how to integrate payment gateway to pay fee amount just a simple example in asp.net mvc core 3.1 . pl sir pl pl pl.

  • thimothy isra
    thimothy isra 2 years ago

    Hi could you please share the code

  • vironit 29072019
    vironit 29072019 2 years ago +10

    Hi. n1 video. I would like see app Shop (user, product, cart, auth) or Social Networking app(clone Facebook or other). Angular 8 with Asp.Net Core Web API. Thanks

  • Luis Alberto Cevallos Cavero

    In angular 11 I have errors with the [formGroup] :(

  • Debanu Gupta
    Debanu Gupta 2 years ago +3

    When I clicked delete, it is showing message "Are you sure to delete this record ". Then if I clicked cancelled, it is showing "updated!" which wrong. It should not show any message because I cancelled.

  • Suhas Patil
    Suhas Patil Year ago

    hello can you please make video with asp.net mvc with angular 8 in crud operation

  • yu.diachenko
    yu.diachenko 2 years ago +2

    It was not necessary to install the AspNetCore.Cors package. It is already preinstalled in the Net.Core 2 and higher.
    Thank you for the video.

    • mamanjui
      mamanjui 2 years ago

      I am using Asp.net core 3.1 and installed cors 2.2.But I am getting the below error.
      "Access to XMLHttpRequest at 'localhost:54548/api/Bank/Bank' from origin 'localhost:4200' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource."

  • Abdellahi Sidiheibe
    Abdellahi Sidiheibe 2 years ago

    thank u very much for this explaining

  • Phil Hearing
    Phil Hearing 2 years ago

    thanks for tutorial, man

  • Hassan
    Hassan 2 years ago

    Do a tutorial on .Net core MVC using blazor and Identity.

  • Cornelius Tonui
    Cornelius Tonui 2 years ago

    I am looking for that css file, can someone kindly share it?

    • CodAffection
      CodAffection  2 years ago

      it's there in GitHub link given in video description.

  • sandeep kumar
    sandeep kumar 2 years ago

    if i have 50 thousand record then what? please add some drop down filter or search items please explain it how does it works

  • sandeep kumar
    sandeep kumar 2 years ago

    if i have 50 thousand record then what? please add some drop down filter or search items please explain it how does it works

  • sandeep kumar
    sandeep kumar 2 years ago

    if i have 50 thousand record then what? please add some drop down filter or search items please explain it how does it works

  • lesele mannathoko
    lesele mannathoko 7 months ago +1

    I came for the Dropdown select button its giving me a hard time to submit to database

  • ashraf
    ashraf 10 months ago

    Hello sir without scaffolding crud operation banao asp.net MVC EntityFramework please sir

  • hassan aboali
    hassan aboali 2 years ago

    Thank you sir, but i followed tutorial step by step and validation not working .

  • Fco M
    Fco M Year ago

    we can safely watch this at 2x speed

  • Bouvah
    Bouvah 2 years ago

    it's work with angular 6 ??

  • Abderrahmen AL HELAOUI

    i can't know the problem, can you help me Sir ?

  • Umer Farooq
    Umer Farooq 2 years ago +6

    Sir create a complete application website in Angular?

    • Mohamed Hemeda
      Mohamed Hemeda 2 years ago

      @CodAffection educational system like school management e-commerce there are many tutorial for it and many thanks sir

    • Umer Farooq
      Umer Farooq 2 years ago +2

      @CodAffection don't put all the functionality there, I think you must need to make the left section in which we select different options like money between 1000 to 5000 or different product. I hope you understand

    • Thowheed Speeches
      Thowheed Speeches 2 years ago

      No need to create all the function product cart system with payment gateway integration would be enough I hope

    • CodAffection
      CodAffection  2 years ago +3

      yup, let me check what I can do. it will take more time than we expect.

  • Guilherme Zago
    Guilherme Zago 2 years ago

    God bless you Dude.

  • KIATTISAK PHANPHU
    KIATTISAK PHANPHU 2 years ago +1

    nice, sir

  • sas10x
    sas10x 2 years ago +1

    ag-grid please..

  • Sarang Bhople
    Sarang Bhople 2 years ago

    when I added the Search all option from select will reflects How to Fix, Thanks

  • Gede Arya Indra Prabawa
    Gede Arya Indra Prabawa 2 years ago +1

    Can i request angular 8 with firestore ?

    • CodAffection
      CodAffection  2 years ago

      thanks for the suggestion,
      angular + firestore crud : thexvid.com/video/5I6k77uqtLY/video.html

  • michael boua
    michael boua 2 years ago

    cannot call post api error message " Access to XMLHttpRequest at 'localhost:44324/api/Orders' from origin 'localhost:4200' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource."

  • Rizwan Mohommed
    Rizwan Mohommed 2 years ago

    Can anyone me that from were the Css file was copied and pasted in style.css file.

  • Jayesh Paraliya
    Jayesh Paraliya Year ago

    services.AddDbContext(options => options.UseSqlServer(Configuration.GetConnectionString("DevConnection")));
    Error on :
    UseSqlServer
    give me solution

  • Abderrahmen AL HELAOUI

    I tried to follow you but the project can't run i don't know why

  • Coolmandude c
    Coolmandude c Year ago

    does NOT work, tried laucnhing the source code only the api portion shows up

  • Andrew Demidyuk
    Andrew Demidyuk 2 years ago

    This video just BOOOM )

  • Online Ziggasa
    Online Ziggasa 2 years ago

    thanks

  • Arslan jappa
    Arslan jappa 2 years ago +1

    welcome back sir

  • ashraf
    ashraf 10 months ago

    Please

  • Chandana Das
    Chandana Das Year ago

    video is nice but you voice accent unbearable it's irritating.i found your video content is good and came here ,but you start speaking i just skipped. Please speak natural.