Angular 15 CRUD by using Material UI components| Using Json-Server

Angular 15 CRUD by using Material UI components| Using Json-Server | GYM Registration App in Angular

Рет қаралды 53,998

Жыл бұрын

In this video tutorial, you will be introduced to the world of Angular 15 and its powerful features. You will learn how to build a CRUD application from scratch using Angular 15, including the setup of the project, implementation of front-end and back-end(fake json-server), and integration of both. With step-by-step guidance, you will gain hands-on experience with Angular 15 and develop your own CRUD application. Whether you are a beginner or an experienced developer, this tutorial is perfect for anyone looking to expand their knowledge and skills in Angular 15.
Source Code is available on the below link, make sure to give it a star on GitHub
github.com/yshashi/GymRegista...
Install Node: nodejs.org/en/
Install Angular: angular.io/cli
Install JSON-server: www.npmjs.com/package/json-se...
Bootstrap link: getbootstrap.com/
Angular CRUD using Bootstrap: • Angular 11 CRUD with j...
Angular QUIZ App: • Angular 12 Quiz Applic...
Angular Add to cart: • Add to Cart in Angular...
Angular CRUD using .Net Core: • Angular 12 CRUD using ...
Connect with me on the below Social links:
KZfaq: kzfaq.info/love/W4P...
Instagram: / lets.program
LinkedIn: / sashikuma. .
Telegram: t.me/letsprogramYt
Twitter: / yshashi30
#Angular15
#CRUD
#FullStackDevelopment
#WebDevelopment
#AngularTutorial
#AngularAppDevelopment
#Angular15CRUDTutorial
#Angular15AppBuilding
#Angular15Development
#CRUDwithAngular15
#Angular15FullStackTutorial
#AngularCRUDApplication
#Angular15DevelopmentTutorial
#BuildingCRUDAppwithAngular15

Пікірлер: 130

@debankurbhattacharjee3021 Жыл бұрын

in 1:07:36 you made const weight = this.registerForm.value.height; but it will be const weight = this.registerForm.value.weight;

@Mixup1221 Ай бұрын

I am fresher and first time I am working on Angular 17 and your video is based on angular 15 but I can easily understand . thank you for this video you are really amazing and your video is very helpful for me love you bhai..

@letsprogram30 Ай бұрын

Yes you can still follow the video! If you find any difficulties at any steps, do let me know

@luisfernandodeolazabalsche3317 Жыл бұрын

Great video, today I can only do half of the video, the mixture you make of bootstrap and material seems great to me, you use the best of both worlds, thank you very much.

@letsprogram30 Жыл бұрын

Thanks man!🙂

@qwerty-dz4vz Жыл бұрын

You projects helped me learn angular concepts and switch from my shitty support project to a project on angular. Tyvm.

@letsprogram30 Жыл бұрын

Wow I’m glad it helped you😊

@sujis3524 Жыл бұрын

Really done a very very great job brother. Thanks a lot. clearly understood & learnt many things from this video. Thank you so so much. keep updating more videos in angular material & springboot. Once again thank you brother..

@herearts7051 Жыл бұрын

Thanks for great project example! & for your efforts ❤❤❤

@letsprogram30 Жыл бұрын

Thank you! You all are my motivation 😊

@hirushamalith7801 Жыл бұрын

Cool one ,nicely present all the very best !

@TheDovson Жыл бұрын

You are awesome! Thank you for your content!

@vinay619 Жыл бұрын

Finally completed watching this video, Great video Sashi, helped me to get good insights on Crud operation Always inspired the way you explain things❤️ Thanks Sashi🙌

@letsprogram30 Жыл бұрын

I’m glad you liked it 🙂

@vinay619 Жыл бұрын

@@letsprogram30 Yes Sashi

@athiranair5822 Жыл бұрын

Mat style ------------------- @use "@angular/material" as mat; @include mat.core(); $my-primary : mat.define-palette(mat.$red-palette,600); $my-accent : mat.define-palette(mat.$amber-palette,A200,A100,A400); $my-warn : mat.define-palette(mat.$green-palette,A200,A100,A400); $my-theme : mat.define-light-theme( (color:( primary:$my-primary, accent:$my-accent, warn:$my-warn, ), typography : mat.define-typography-config(), density:0, ) );

@brogidey860 Жыл бұрын

Love your tutorials.. thanks for implementing the view details button as I requested in your previous video.

@letsprogram30 Жыл бұрын

I’m glad you liked it! Keep supporting!

@brogidey860 Жыл бұрын

Good Teacher! Good tutorial.. I will request you create a crud tutorial using mongodb instead of json server. Thanks

@letsprogram30 Жыл бұрын

@@brogidey860 sure buddy the video will be released soon

@hamzaosmanbofobia9685 11 ай бұрын

Thank you for the wonderful and beautiful work there. Keep it up and May God richly bless you.

@letsprogram30 11 ай бұрын

Thank you so much, it means a lot🙂

@congminh1889 Жыл бұрын

It's so great!!!

@ayshashifa23 Жыл бұрын

Great video🤩

@shiranjeevisk9148 Жыл бұрын

Appreciate & Thanks for ur effect brother❤️🙏

@letsprogram30 Жыл бұрын

No problem 😉

@namanjain2449 Жыл бұрын

It's very helpful. Super Thanks 👍👌❤️❤️❤️

@letsprogram30 Жыл бұрын

Thank you 😊 Do share it with others 😉

@mohammadfarhankhan677 2 ай бұрын

Nice one. Great Job

@letsprogram30 2 ай бұрын

Thank you!

@user-iq6jc8ug3z Жыл бұрын

Hello sir, can you have a part 2 of this but with JWT Token and some Interceptors and Guard. This fully covers the entire being as entry front-end. I hope you can make this. I really love your videos. I am becoming a Front-end dev because of your videos. I hope you can cover these JWT Token and some Interceptors and Guard too and try to explain your thought process in why you came up with this and where should this part connect. It really helps a lot! I am watching your videos always and trying to apply it to my task as this is the task I was given for someone who is On-The-Job(OJT) Training making a CRUD with JSON-server. Please continue what you are doing sir for the students who really are passionate in programming but having a hard time understanding concepts and applying them by making projects. I hope you can read this sir! Thank you very very much!

@developer_cha1nsaw Жыл бұрын

wonderful project

@letsprogram30 Жыл бұрын

Thank you 😊

@rafalmo5258 Жыл бұрын

Nice tutorial

@brentleymuranda2125 Жыл бұрын

you are amazing bro

@swapnilbopche5383 5 ай бұрын

Very helpful ❤

@letsprogram30 5 ай бұрын

Thanks man!

@manjunathdeekshith8099 Жыл бұрын

Great tutorial

@letsprogram30 Жыл бұрын

Ty Ty 🙂

@SniperCharliex Жыл бұрын

Step 1- 9:20 Step 2-10:44 Step 3-21:38 Step 5- 54:50 Step 6 - 1:10:23

@GGSoft2009 11 ай бұрын

Thanks for timetable

@GGSoft2009 11 ай бұрын

Thanks a lot it was the very useful

@letsprogram30 11 ай бұрын

I’m glad you liked it 👍

@xO_ADX_Ox Жыл бұрын

For the next time can u show how to add a lateral bar like administrtion, with multiple CRUD like: users, customers etc... the routing it's very important topic to dive more in. Thank u for all the hard work u are doing

@letsprogram30 Жыл бұрын

Sure thing!

@user-qy1lm7uy9h Жыл бұрын

Thanks a lot .

@letsprogram30 Жыл бұрын

You’re welcome 😉

@shivaramkrishna6583 Жыл бұрын

Looks too great!!! As it would be more helpful if u do videos on oops and user based log in ..

@letsprogram30 Жыл бұрын

Sure will I can take up the OOPS concept

@periasamysapthagiridharan4615 6 ай бұрын

Can you please show us how can we filter table using dropdown list as fitering criteria

@rohan7403 11 ай бұрын

We need validation and backend also, really helpful video, thanks 😀

@letsprogram30 11 ай бұрын

Thanks man! Will sure do the validation for this video🙂 Also do checkout my latest video I have did something similar with the registration page and also included validation 🙂

@rohan7403 11 ай бұрын

Yes I have checked, thanks man😀

@faustiusme Жыл бұрын

Excellent example. I've been trying but delete option doesn´t open popup, i have the code exactly like you. Could you help me?

@randhawamisspecialistnorth1661 11 ай бұрын

Dear Sir, I am facing issue with mat select component, I just copy it from angular material including for TS file. There is not compile time or run time error but I don’t know why the values are not being displayed. Pls guide.

@jerrybrads8414 Жыл бұрын

Great Tutorial Sir. Please could you add a spinner on loading details page? I would really appreciate

@letsprogram30 Жыл бұрын

Sure thing🤘🏼

@jagadeeshthota9678 Жыл бұрын

Hi bro. At 1:00:45 after submitting everything i have clicked on submit button. When i made inspect there is not data in console. Can you help me why i can't be able to see the data in console.

@Mariee811 Жыл бұрын

sir can u please demonstrate that how can we upload this code on firebase and github. bcz i'm not able to fetch api and retreive data by hosting this application on firebase. so how can we bind aur json server to deploy with angular on firebase and github

@tusharmishra4855 Жыл бұрын

This site can’t be reached localhost refused to connect. Try: Checking the connection ERR_CONNECTION_REFUSED The above error is showing when I try to open url

@imane-hx1kp Жыл бұрын

why did you use ng-container instead of td ttable ..

@rahaliyas Жыл бұрын

Validation also helps if you can

@gauravpathak560 Жыл бұрын

Yes sir angular and spring boot plz

@letsprogram30 Жыл бұрын

Soon🙂

@franckozeusmakita7022 Жыл бұрын

Thanks for this video. wenn will you make please the validation. i will like to learn with you. Thanks a lot.

@letsprogram30 Жыл бұрын

I have created a video on validation it already on my YT channel, but if you need validation for this specific video then do let me know

@dipakdutta3219 Жыл бұрын

You are using a Angular Plugin for VS-Code at 1:12:37 to generate component, service etc. Please let us know the plugin, we also want to have it.

@ben_5466 Жыл бұрын

Nx Console

@yaramalaprashanthi4779 Жыл бұрын

can you upload a full stack project ,front end using angular and back end with spring boot sir? that will help us.

@letsprogram30 Жыл бұрын

Yes after MEAN stack project I will start with spring boot

@heydiez1518 Жыл бұрын

Hello Im new in angular, can you make video for handle authentication angular with springboot jwt.. thanks

@gamystation Жыл бұрын

have you found any tutorial for that question bro ?

@user-ng5ok6zh2o 3 ай бұрын

Hai sir , I am facing an issue after importing all the angular materials in output themes and styles not coming.

@letsprogram30 3 ай бұрын

DM me on Instagram

@maheshshirsat9075 6 ай бұрын

1:21:08 I am getting some error when I write lib-ng-toast selector like "lib-ng-toast" is not a known element. Have u changed selector?

@letsprogram30 6 ай бұрын

Yup you can follow this blog: blog.letsprogram.in/blog/647990c15960050b58aca375

@maheshshirsat9075 6 ай бұрын

thanks @@letsprogram30

@rishiraj2548 Жыл бұрын

Good day greetings

@letsprogram30 Жыл бұрын

You too

@jayakumar2927 Жыл бұрын

Good one useful But validation not happened

@ionguzun3952 Жыл бұрын

Can u please do a more complex Angular 16 CRUD also using Materil UI and json server, with role based autehtification and some more complex features like sending email etc

@letsprogram30 Жыл бұрын

Then json-server would not be the ideal solution, we can create a nodejs server to do the crud

@ionguzun3952 Жыл бұрын

@@letsprogram30 ok, then can u make with node js, please?

@rohith5671 7 ай бұрын

Getting cors error

@MTSightseeing 24 күн бұрын

Hello sir can I use primeng free Sakai template for production use because our company doesn't have designers to design templates

@letsprogram30 24 күн бұрын

Yes you can use it

@MTSightseeing 23 күн бұрын

@@letsprogram30 sir tell me one thing can I use the mixup like for form I am using simple textbox of bootstrap and for listing filtering pagination I am using angular material?

@MTSightseeing 23 күн бұрын

@@letsprogram30 we are making product service

@alexeduard7820 Жыл бұрын

Hi, I loved your video but I would like to know if you can help me with this since I have the code and I cloned it in a git but when I run it it won't let me since it seems it doesn't contain angular and when I try to add it with "ng add @angular/material" doesn't let me, I'm learning with it and I would like to run the app to see it but I get these problems, if you help me with it I would be very grateful!

@Bourn77 Жыл бұрын

clone the repo run 'NPM INSTALL' in the root folder, incase of any error do 'NPM INSTALL --F'

@Hariharan-td7ec Жыл бұрын

How to access the value from one component to another component

@letsprogram30 Жыл бұрын

Create a parent child relationship and pass between them

@m.a.s.h6543 Жыл бұрын

Sir batch kese join kre.. Koi info.. Aapse baat ho skti h? I am doing internship and feeling lost in the assignments. I have been working on angular and dot net 6 web api

@letsprogram30 Жыл бұрын

You can connect with me on insta or telegram I always post there

@vijaykanthvulli4115 11 ай бұрын

Please do validation for this project

@letsprogram30 9 ай бұрын

Added lot of examples on my channel for Validation!

@mohdshadmaankhan9527 Жыл бұрын

Bhaijaan I need your help... Plz Actually I got a project in which I need to make a full calendar in angular with all functionalities like add , edit and delete event . I go through many websites and docs but I didn't get what I need. Plz help me bhai

@letsprogram30 Жыл бұрын

Bhai you can use syncfusion library for this requirement

@mohdshadmaankhan9527 Жыл бұрын

@@letsprogram30 bhai but when I tried to use syncfusion then it shows me a pop of some request from sync fusion

@mohdshadmaankhan9527 Жыл бұрын

@@letsprogram30 bhai it's a free version but valid only for 30 days . Will you please make a video on this topic

@Dk-ux7pf Жыл бұрын

make a video in Hindi about angular plz

@letsprogram30 Жыл бұрын

Next one will be in Hindi

@_yllw6155 Жыл бұрын

kind of hard to follow with all the copy paste

@luisfernandodeolazabalsche3317 Жыл бұрын

Please, if you can, have validation with Material.

@letsprogram30 Жыл бұрын

Noted

@ALKASHIF- 4 ай бұрын

font is too small

@rupeshdhamdhere360 6 ай бұрын

my ng-toast is not working

@letsprogram30 6 ай бұрын

What is the error ? And what is your angular version

@rupeshdhamdhere360 6 ай бұрын

@@letsprogram30There is no error I am Using Angular 16 and I had ran npm i ng-angular-popup --force this command also I have tried excluding --force but it's not working, please help me to resolve this issue

@user-mu5kp7if6k 11 ай бұрын

sir plz mobile no send kar sakte hai kiya app apna mujhe angular sikhni thi sir

@draconianyt5174 Жыл бұрын

connect with node js

@letsprogram30 Жыл бұрын

Soon bro

@m.a.s.h6543 Жыл бұрын

Sir aapse one to one mentorship leni ho to.. Possible h?

@letsprogram30 Жыл бұрын

You can join one of my angular batch🙂

@m.a.s.h6543 Жыл бұрын

@@letsprogram30 kese join kre sir. ? Can you give me details. ??

@bhavananangare8156 Жыл бұрын

Can u please provide source code

@letsprogram30 Жыл бұрын

Currently it is under members only

@letsprogram30 Жыл бұрын

But I have did it step by step you can follow the video to create your own version out of it😊

@bhavananangare8156 Жыл бұрын

@@letsprogram30 ok also can u upload login and signup page based on role (such as admin and customer ) using angular 15 and JSON server ...

@letsprogram30 Жыл бұрын

@@bhavananangare8156 you need it with json-server or Nodejs backend is ok ??

@bhavananangare8156 Жыл бұрын

@@letsprogram30 I need it with json-server

@MG-cw2xc 8 ай бұрын

are bhai video bana rahe hot to explain krte jao na copy paste kyun kr rahe ho?

@letsprogram30 8 ай бұрын

Bhai fir video ki length bohat Badi hoo jayega and Baki log ko maza nh ayega sikhne me.

@MG-cw2xc 8 ай бұрын

@@letsprogram30 tutorial is best but biggner ke liye thoda kathin lagta hai ok 👍 thanks

@letsprogram30 8 ай бұрын

@@MG-cw2xc aane wale video me try karunga full explanation ke sath🙂🙌

@sradhanayak4734 4 ай бұрын

A big thank you. I am new to angular and it helped me a lot to build my application. Here is the error I am facing, please assist. node_modules/ng-angular-popup/lib/ng-toast.component.d.ts:18:81 - error TS2344: Type '{ style: { alias: "style"; required: false; }; }' does not satisfy the constraint '{ [key: string]: string; }'. Property '"style"' is incompatible with index signature. Type '{ alias: "style"; required: false; }' is not assignable to type 'string'. 18 static ɵcmp: i0.ɵɵComponentDeclaration;

@FarhanKhan-dl5yk Жыл бұрын

return this.api.postRegistration(this.registrationForm.value).subscribe( in this showing this error Property 'subscribe' does not exist on type 'void'.ts(2339) please suggest me i did every thing

@acthings Жыл бұрын

Parabéns,,, muito bom até aqui, contudo, em: @include mat.all-component-themes($my-theme); 16:20, precisa comentar: //@include mat.all-component-themes($my-theme); Thank's a lot...