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

Подписаться 20 тыс.

Просмотров 54 тыс.

50% 1

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:
RU-vid: ru-vid.com/show-UCW4P...
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

Опубликовано:

6 фев 2023

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 131

@debankurbhattacharjee3021 Год назад

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

@Mixup1221 2 месяца назад

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 2 месяца назад

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!🙂

@hirushamalith7801 Год назад

Cool one ,nicely present all the very best !

@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..

@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😊

@TheDovson Год назад

You are awesome! Thank you for your content!

@herearts7051 Год назад

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

@letsprogram30 Год назад

Thank you! You all are my motivation 😊

@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

@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🙂

@shiranjeevisk9148 Год назад

Appreciate & Thanks for ur effect brother❤️🙏

@letsprogram30 Год назад

No problem 😉

@congminh1889 Год назад

It's so great!!!

@ayshashifa23 Год назад

Great video🤩

@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!

@namanjain2449 Год назад

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

@letsprogram30 Год назад

Thank you 😊 Do share it with others 😉

@mohammadfarhankhan677 3 месяца назад

Nice one. Great Job

@letsprogram30 3 месяца назад

Thank you!

@rafalmo5258 Год назад

Nice tutorial

@brentleymuranda2125 Год назад

you are amazing bro

@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.

@GGSoft2009 Год назад

Thanks a lot it was the very useful

@letsprogram30 Год назад

I’m glad you liked it 👍

@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 Год назад

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.

@developer_cha1nsaw Год назад

wonderful project

@letsprogram30 Год назад

Thank you 😊

@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

@swapnilbopche5383 5 месяцев назад

Very helpful ❤

@letsprogram30 5 месяцев назад

Thanks man!

@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!

@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

@manjunathdeekshith8099 Год назад

Great tutorial

@letsprogram30 Год назад

Ty Ty 🙂

@periasamysapthagiridharan4615 6 месяцев назад

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

@imane-hx1kp Год назад

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

@SniperCharliex Год назад

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

@GGSoft2009 Год назад

Thanks for timetable

@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

@user-qy1lm7uy9h Год назад

Thanks a lot .

@letsprogram30 Год назад

You’re welcome 😉

@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😀

@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

@jerrybrads8414 Год назад

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

@letsprogram30 Год назад

Sure thing🤘🏼

@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 ?

@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'

@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

@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

@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

@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

@gauravpathak560 Год назад

Yes sir angular and spring boot plz

@letsprogram30 Год назад

Soon🙂

@MTSightseeing Месяц назад

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

@letsprogram30 Месяц назад

Yes you can use it

@MTSightseeing Месяц назад

@@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 Месяц назад

@@letsprogram30 we are making product service

@rahaliyas Год назад

Validation also helps if you can

@Hariharan-td7ec Год назад

How to access the value from one component to another component

@letsprogram30 Год назад

Create a parent child relationship and pass between them

@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

@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 8 месяцев назад

Getting cors error

@user-mu5kp7if6k Год назад

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

@luisfernandodeolazabalsche3317 Год назад

Please, if you can, have validation with Material.

@letsprogram30 Год назад

Noted

@rishiraj2548 Год назад

Good day greetings

@letsprogram30 Год назад

You too

@vijaykanthvulli4115 11 месяцев назад

Please do validation for this project

@letsprogram30 10 месяцев назад

Added lot of examples on my channel for Validation!

@jayakumar2927 Год назад

Good one useful But validation not happened

@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. ??

@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

@rupeshdhamdhere360 7 месяцев назад

my ng-toast is not working

@letsprogram30 7 месяцев назад

What is the error ? And what is your angular version

@rupeshdhamdhere360 7 месяцев назад

@@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

@ALKASHIF- 5 месяцев назад

font is too small

@draconianyt5174 Год назад

connect with node js

@letsprogram30 Год назад

Soon bro

@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 9 месяцев назад

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

@letsprogram30 9 месяцев назад

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

@MG-cw2xc 9 месяцев назад

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

@letsprogram30 9 месяцев назад

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

@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, ) );

@sradhanayak4734 5 месяцев назад

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...