@@jamesschneider8677 I have a request here. A .NetCore WebAPI, using SQL Server AND calling MSSQL storedprocedures. With angular front end app. Demonstrating - Role based login and logout [generating jWT token, and refreshing it after approx. 60 minutes] and protecting the access of resources based on role[suppose 1 specific page in the app. that will only be accessible by the higher role] Assume 2 roles - Admin, Reader. Possible?
@@ProtikPC_pro_indigo This is an excellent suggestion. I would definitely like to do this. But it has been hard to find time to make a good video lately.
Just Subscribed to your channel, Honestly, I do love your skills and how you type in your codes instead of copy and paste-like most tutors, that gives me time to think about what you are doing. Thank you for the video
Hi James!. Great video, very clear and concise, thanks for posting it! I added a couple of modifications: 1) In the inspections controller, added the Include method, to show the type name right from the server: // GET: api/Inspections [HttpGet] public async Task GetInspections() { return await _context.Inspections.Include("InspectionType").ToListAsync(); } Then, in the show component: you ca use any of these options: {{ inspectionTypesMap.get(item.inspectionTypeId)}} or {{ item.inspectionType.name }} In order to get this to work, it's necessary to add a line in add-edit-inspection-component.ts: ngOnInit(): void { ... this.inspectionType = this.inspection.inspectionType; ... 2) In the same order of ideas, did this to show the type when editing: in add-edit-inspection-component.html
Thank you for the lesson. I'm looking for good C# tutorials. I've been working with Angular for over a year. In Angular it is very bad to specify types as any. But as for the introduction, the lesson is very well built.
You're welcome. Thanks for the feedback. You're right, it's a best practice to avoid using any for the type if possible because you aren't taking advantage of one of Typescript's strengths and might run into problems later.
Great video ! I'm really glad we've got people like you who share knowledge in such a good way ! Everything is explained when you're not a newbie. Good job. Looking forward for next video !
@@jamesschneider8677 I'd like to improve the project and implement logging in and authentication procedure. What would you choose if you had to do this ? Could you give me a hint how should I start ? This client-server and CORS is something new for me :)
Great idea to keep going with the project to make it better! I'm planning to make a video about this, but I'm not sure how soon it will be. I know it's not always fun to read documentation, but I would start there. docs.microsoft.com/en-us/aspnet/core/security/authentication/identity-api-authorization?view=aspnetcore-6.0
dotnet ef database update (result in an error in my case) At 24:52 if someone has: "A connection was successfully established with the server, but then an error occurred during the login process. (provider: SSL Provider, error: 0 - The certificate chain was issued by an authority that is not trusted.)" The solution is changing the ConnectionString adding TrustServerCertificate=Yes; at the end
22:00 Use dotnet tool install --global dotnet-ef if you are getting error >> dotnet : Could not execute because the specified command or file was not found.
I had no idea you can build the table structure in class file and run that migration command. On top of that you ran one step to create your controllers with all the httpget post put etc commands. It was daunting to me to have to hand type all that. It goes to show your efficiency. Thank you as I’m new to all this api building.
Hi, thanks for taking the time to do this tutorial, it helped a lot for me to practise Angular and .Net, and just for me to have a quick addition to my portfolio. For the editing of the inspection type in app-edit-inspection.component.html, I think this could be used instead of the input: {{ type.inspectionName }} Also, for the show-inspection.component.css, since the selectors are the identical, they could be combined into one: #add-success-alert, #update-success-alert, #delete-success-alert { display: none; animation-name: fadeInAndOut; animation-duration: 4s; }
Hi. When i try to migrate the database i get this error: An error occurred while accessing the Microsoft Extensions Hosting services. Continuing without the application service provider. Error: Failed to load configuration from file 'C:\Users\user\Downloads\******\******\***\***\***\appsettings.json'. (i have the same connection string)
Ok I cannot figure out why my angular project take/display from my api. The url is right because I can go to that url in the web browser and see json objects. The api works because swagger works on updating the db. the component works because I can display everything until the ngfor for the data. I followed your service creation exactly and I dont know where I went wrong.
Hello, Thank you very much, for this video. It was very nice and clear explanation. Can you tell us how to create a dynamic panel dashboard menu which are generated from the database, as well as include dropdown or submenu templates.
Hey thanks for the great tutorial. At around 57 minutes in the video, when I run "ng serve --option", I get the error: Error: src/app/app.module.ts:21:5 - error TS1005: ',' expected. My code matches the code in the video, so not sure what is happening.
Great video. Required your help please...At video - 28.18, I'm getting error running the selected code generator: 'Package restore failed. Rolling back package changes for InspectionAPI". Could someone help me please.
thank you for your great tutorial ..... but I am working with an older version of visual studio and when I run the code, swagger doesn't open since it needs a subscription and things like this, is there an alternative way to be sure that I made everything right ????? and thank you
My "Show Inspection Types" button doesn't launch the modal. I'm using Bootstrap 5 as well but I installed it using NPM as opposed to CDN. Do you know what I'm missing?
@@jamesschneider8677 I don't unfortunately, I've been following your tutorial word for word. I was wondering if I needed to include a click event or something.
@@aricase3826 It sounds like it has to do with NPM. Did you just do NPM install bootstrap, or did you also import the JavaScript? One thing you could try if you haven't already, is to use the CDN. If it works, you'll know something went wrong with the JavaScript bundle and NPM.
Hi James, when I use ngFor i dont get error but instead of that data from db is not showing , i checked my inspectionApiUrl string which gave me 404, any hint?
Hey, sorry to ask this but can someone explain how did the inspectionTypeId got related within the database. Did the Entity Framework did the job behind the scene? Once again I'm sorry for my dumb question hope you can enlighten me.
Yes, Entity Framework Core did this. You can watch the part at 8:08 where I mention that. Entity Framework Core does a lot behind the scenes. This can be good and bad, depending on the use case.
Sometimes i wish angular and api building had a drag and drop wizard properties to simply it all. Sighs. I’m new to this but it’s so overwhelming, i get to a point where I question if I really want to do this or not. Deep down I do want to learn this but there’s so many moving parts you gotta manually build out and keep track of
Learn VB if you wanna be a lazy programmer. As it is .NET does so much for you already and now you want it to do even more? Maybe you shouldn't program if this is your mentality already?
this is exactly what i wanted but i cant follow it because i am getting the following error in the migration files: 'DataContext is a name space but it is used like a type' (this line: [DbContext(typeof(DataContext))]) Any ideas?
It feels like the last 40 minutes of the tutorial you just stopped really explaining what you're doing and started mostly reciting the code that you're writing. The whole forms part is very confusing how it ended up working
Saludos. Normalmente RU-vid lo hace automáticamente. No sé por qué no funcionó esta vez. No veo una opción para activarlos. Pero tengo planes para grabarlo en español también.
You're welcome! It took a while because I wanted it to be easy to watch and follow along. I didn't measure, but I researched some things and practiced the project a couple of times before recording and then editing. I'm glad you enjoyed it.
Hi, Thanks for your great tutorial! I was checking your Angular git repo and found it different from your video code. Would you push the Angular project of this video? Also, I was wondering how you are resetting the form showing here 1:57:02?
You're welcome! I'm glad you enjoyed it. I created a new repo. This should be the same one from the video: github.com/james-schneider/angular13-inspection-app - For resetting the form, do you mean after submitting?
@@jamesschneider8677 I've run your both project using VS Code and your projects are absolutely fine and the form resetting is working. Yes, I meant the form reset after submission. How is it happening if you could just explain in your project because I could not find any form reset logic. May be I am missing something. By the way, I've a small fix for you. I was trying to add a colored Bootstrap table header for better UX and need to change the tags like this table>thead>tr> th. Your code is missing the tr before the th and the colored header was not working in app/inspection/show-inspection/show-inspection.component.html So that right table would be Id Inspection Type Status Comments Options Another tip for you. Instead of using svg for Bootstrap icons, better using the icon tags for better code readability. Like this npm install --save bootstrap-icons And add follow line to style.css file: @import "~bootstrap-icons/font/bootstrap-icons.css"; And use icons like that(just example):
Thank you for catching that about the table row. And you're right about the readability of the icons versus svg. For the form, every time the modal is opened to add an inspection, the form will be blank because of the modalAdd() method inside show-inspection.component.ts: modalAdd() { this.inspection = { id:0, status:null, comments:null, inspectionTypeId:null } this.modalTitle = "Add Inspection"; this.activateAddEditInspectionComponent = true; }
Thanks! I would like to know how to show the Inspection type text in the select option value instead of showing the number and also set the first inspection type as default in it showing @2:07:37 .
@Disguised Girls, one thing that you can do that I didn't include in the video is make a small change to InspectionsController.cs. Add Include("InspectionType") before ToListAsync(); in the get call. Change that method to look like this: // GET: api/Inspections [HttpGet] public async Task GetInspections() { return await _context.Inspections.Include("InspectionType").ToListAsync(); } This will give you access to the inspectionType (name and id) in the API call instead of just the inspectionTypeId with a null inspectionType. You'll be able to access the inspectionName with inspectionType.inspectionName. Then you can display that in the UI where appropriate. But don't think I would want to show the first inspection type (or name) as a default when you are editing a form (@2:07:37), because then the form could potentially display something that wasn't originally there. For example, if the inspection was originally on the first floor, but the basement is the default option, you could open the form to edit a comment and not change the inspection type back to the original. Or maybe I'm not understanding your question?
Having seen the video, and considering what you say at 37:50, it Would be great if you upload a short video showing how to add routing to a "not-routed" project.
Hello James. Firstly thanks for this course. But i had a problem and i did not found the solution. In 1:03:37 , i had get this error code and i can not see the values on my table. (i can see the headers.) Can't bind to 'ngForOn' since it isn't a known property of 'tr'. My codes like as yours. Thank you, have nice days.
Thanks for the video. Can you add role based authentication video where roles are stored in the database. Authenticate using web api and angular. Or can you suggest a method to learn it. Happy new year and all the best
You're welcome. Your video suggestion is on my list. I'll be on the lookout for a good learning resource for you in the meantime. Happy new year to you too.
I just did that in my api. My proposal is to focus on JWT (token) authentication, where you create roles table and user tables in database (you must take care of data context update). Then, for registration a user, you must create a form and POST data to the newly created controller. Afterwards, when logging in procedure is made, token has to be generated (based on credentials send. Email and password e.g.). Token has to be passed back to the fronted where can be stored in local storage of browser. That my proposal ;) it works and there is a lot of tutorials for that way.
i've got an error 'at 1:36:00, error TS2339: Property 'type' does not exist on type 'AddEditInspectionComponent.' perhaps this is because i'm using angular 14 and i believe there is a difference with strictly typed forms...great video, thanks in advance!
I don't speak a lot about it in this particular video, but I do use it with ngModel. I'm planning to make a video about Angular directives, which will include two-way binding.
Hi, how do I name my default connection string if I do not use sql express but sql server 2019. Is this the right? "DefaultConnection": "server=localhost\\MSSQLSERVER;database=inspectionapidb;trusted_connection=true" Thanks in advance. Great content. You have a new subscriber.
"Server=NAME;Database=DBHERE;Trusted_Connection=True;TrustServerCertificate=Yes;" In my case I've needed TrustServerCertificate=Yes; at the end in order to get things working (NAME -> SELECT @@SERVERNAME )
Hi James, Great tutorial. But in getInspections API although we have a foreign key (inspectionTypeId), we are not getting value in inspectionType property (I am getting null). How can we get the inspectionType values also in the same api? (Maybe if we can write some sql queries to join the tables)
Thanks! Yes, there are various ways you can handle that. I added the inspection type in the model as an Entity Framework navigation property to have an easy way to create a foreign key constraint with the inspectionTypeId, and I didn't want to put the inspection type in the Inspections table. That's why it's showing up in the API call as null. You could make it part of the UI (or do it behind scenes) and send that data to the API when creating and updating inspections. That way, when you call getInspections, the inspectionType values would be there instead of showing null. But if you do that, then it would probably make sense to add an additional field in the Inspections table if you want the data to persist there. Writing some SQL to join those tables might accomplish it for you as well. I don't think there is one "right" way to do it.
@Rahul Joshi, if you are still working on this. An easy fix would be to change the the get call in InspectionsController.cs by adding the .Include("InspectionType") before .ToListAsync(); It would look like this: // GET: api/Inspections [HttpGet] public async Task GetInspections() { return await _context.Inspections.Include("InspectionType").ToListAsync(); } Then Inspection Type won't be null
This is a web API with an Angular front end. Angular is more MVVM than MVC. Here is a site that speaks about web API vs MVC: www.c-sharpcorner.com/UploadFile/2b481f/difference-between-mvc-and-web-api/
Hi, Good video! Am I the only one that the Program.cs file look different than the one in the video? In my program.cs class, I only have the main method and "CreateHostBuilder" method.
I know .net 6 does indeed confuse when u are used to program and startup classes. But even if the versions are different, if u add program and startup file with default settings, you should be able to use them.
Hi James, Thank you and I'm enjoying the lesson but Im kinda stuck with this error on inspect element. could it be I installed a new version of angular? Failed to load resource: net::ERR_CONNECTION_REFUSED :7115/api/inspections:1 ERROR HttpErrorResponse core.mjs:6485 ERROR HttpErrorResponse
@@NirdeshM - I'm not sure about that one. I don't think I had that error. Are you using .net 6 with all of the dependencies? If so, maybe closing out and opening Visual Studio will help.If that doesn't help, please check the source code to see if we have any differences: github.com/james-schneider/inspection-app-api
@@jamesschneider8677 as long as you have navigation property you can use include(tableName) in the linq query and you can have access to the data with one call
