Learn from Scratch
Learn from Scratch
  • 69
  • 337 768
Git Hooks with Husky - React
Explains how to set up the git hooks like pre-commit, pre-push and commit-msg using Husky in react project
React Project Initial : github.com/haseena-pa/react-vitest-rtl-msw
Husky setup : github.com/haseena-pa/react-vitest-rtl-msw/tree/husky-hooks-setup
Переглядів: 259

Відео

NX Monorepo setup with React and Node JS
Переглядів 3,4 тис.6 місяців тому
FullStack App setup with NX
Vitest with React Testing Library, Jest-dom & MSW
Переглядів 10 тис.8 місяців тому
This video contains Installation of vite Vitest setup with coverage react testing library , jest dom, jsdom , userEvent setup MSW set up Github URL: github.com/haseena-pa/react-vitest-rtl-msw
Employee List - Lazy Loading | Pagination | Filter | Sorting - Angular | PrimeNG
Переглядів 4,1 тис.9 місяців тому
This video explain how to create an employee list with server side filter, sorting and pagination. Node js and Angulare CLI Installation ua-cam.com/video/a9jruZej85k/v-deo.html For angular project creation ng new angular-primeng-employee-list For JSON Sever installation npm install -g json-server Github Url github.com/haseena-pa/angular-primeng-employee-list-sort-filter
PrimeNG Fileupload in Angular using the Firebase Storage
Переглядів 3,1 тис.10 місяців тому
#primeng #angular #fileupload #primengfileupload #angularfileupload #firebase Github URL : github.com/haseena-pa/primeng-components/tree/primeng/fileupload For all the other PrimeNG Components ua-cam.com/play/PLlVkYWGRhwk_U8IO-v4GOvKtxMABBH58l.html&si=utzdbwUethiyqGTG
User Login and Register Form Full Video (Code Attatched) - Angular 16 | PrimeNG | Json Server
Переглядів 48 тис.11 місяців тому
#angular #primeng #angularproject #angular16 #angulartraining #angularprimengapp #login This is a tutorial for User Login and Registration Form with the following concepts explained 1. Node JS Installation 2. Angular CLI Installation 3. Angular project creation using ng new with Routing 4. PrimeNG, Primeicons, PrimeFlex installation and setup 5. Angular cli component, service, interface, guard ...
Part 9: CanActivate Guard & Logout | User Registration & Login Form | Angular PrimeNG JSON Server
Переглядів 79311 місяців тому
#angular #primeng #angularproject #authentication #jsonserver #login #register #logout #canactivate #angularguargs This video is the 8th part of Angular PrimeNG Application with Authentication using JSON Server Video explains about the Logout CanActivate guard in angular Github Url: github.com/haseena-pa/angular-primeng-app-with-auth
Part 8: Submit Login and Register form using json-server | User Registration & Login Form
Переглядів 1,8 тис.11 місяців тому
#angular #primeng #angularproject #authentication #jsonserver #reactiveform #angularvalidation #ngsubmit This video is the 8th part of Angular PrimeNG Application with Authentication using JSON Server Video explains about the json-server installation register form submit login form submit Toast msg Github Url: github.com/haseena-pa/angular-primeng-app-with-auth PrimeNG Toast: ua-cam.com/video/o...
Part 7: Register Form - Confirm Password custom validation | User Registration & Login Form
Переглядів 80711 місяців тому
#angular #primeng #angularproject #authentication #jsonserver #reactiveform #angularvalidation #registerform #customvalidation This video is the 7th part of Angular PrimeNG Application with Authentication using JSON Server Video explains about the Password and Confirm Password Validation using Custom Validator Github Url: github.com/haseena-pa/angular-primeng-app-with-auth
Part 6: Register Form using Reactive Form with validation | User Registration & Login Form
Переглядів 73611 місяців тому
#angular #primeng #angularproject #authentication #jsonserver #reactiveform #angularvalidation #registerform This video is the 6th part of Angular PrimeNG Application with Authentication using JSON Server Video explains about the Register Form Design using PrimeNG Components Reactive Form Integration Validation Github Url: github.com/haseena-pa/angular-primeng-app-with-auth
Part 5: Login Form using Reactive Form with validation | User Registration & Login Form
Переглядів 1,3 тис.11 місяців тому
#angular #primeng #angularproject #authentication #jsonserver #reactiveform #angularvalidation This video is the 5th part of Angular PrimeNG Application with Authentication using JSON Server Video explains about the Login Form Design using PrimeNG Components Reactive Form Integration Validation Github Url: github.com/haseena-pa/angular-primeng-app-with-auth
Part 4: Angular Routing | User Registration & Login Form using Angular , PrimeNG, JSON Server
Переглядів 1,5 тис.11 місяців тому
#angular #primeng #angularproject #authentication #jsonserver #login #register This video is the 4th part of Angular PrimeNG Application with Authentication using JSON Server Video explains about the creation of components , services , guards and interfaces Angular Routing Router outlet Commands used ng g c components/login ng g c components/register ng g c components/home ng g s services/auth ...
Part 3 : Angular Project creation and PrimeNG Installation | User Registration & Login Form
Переглядів 1,2 тис.11 місяців тому
#angular #primeng #angularproject #authentication #jsonserver This video is the 3rd part of Login and Register Form using Angular, PrimeNG, Json Server Video explains about the Angular Project Creation using angular cli with Routing and Installation of PrimeNG, PrimeFlex and Primeicons (step by step) Commands used ng new angular-primeng-app routing : for creating new angular app npm install pri...
Part 2: Node JS & Angular CLI Set up | User Registration & Login Form Angular PrimeNG | JSON Server
Переглядів 1 тис.11 місяців тому
#angular #primeng #angularproject #authentication #jsonserver #nodejs #angularcli #login #register This video is a part 2 of Login and Register Form using Angular, PrimeNG, Json Server Video explains about the Node JS installation and Angular CLI set up Node JS Download (Download LTS version) nodejs.org/en Install angular-cli using the command npm install -g @angular/cli Github Url: github.com/...
Part 1: Demo of User Registration & Login Form | Angular PrimeNG App | JSON Server
Переглядів 2,3 тис.11 місяців тому
#angular #primeng #angularproject #authentication #jsonserver #reactiveform #angularvalidation #login #register This is a series of tutorials having the implementation of Login and Register Form using Angular, PrimeNG, Json Server This video is the part 1 which shows the demo of the application Github Url: github.com/haseena-pa/angular-primeng-app-with-auth
Primeng TreeSelect component in Angular
Переглядів 2,4 тис.11 місяців тому
Primeng TreeSelect component in Angular
Fix: Can't bind to 'ngModel' since it isn't a known property of 'input'
Переглядів 5 тис.11 місяців тому
Fix: Can't bind to 'ngModel' since it isn't a known property of 'input'
PrimeNG Dynamic Theme Change (using Dropdown contains multiple themes)
Переглядів 3,5 тис.11 місяців тому
PrimeNG Dynamic Theme Change (using Dropdown contains multiple themes)
PrimeNG Theme change of an existing application in simple steps
Переглядів 1,4 тис.11 місяців тому
PrimeNG Theme change of an existing application in simple steps
Angular PrimeNG TodoList with Json server (Code attached)
Переглядів 17 тис.Рік тому
Angular PrimeNG TodoList with Json server (Code attached)
PrimeNG Chips Component inside the Input - Angular
Переглядів 954Рік тому
PrimeNG Chips Component inside the Input - Angular
InputSwitch | PrimeNG Component | Angular
Переглядів 946Рік тому
InputSwitch | PrimeNG Component | Angular
PrimeNG Menubar Component - Angular
Переглядів 6 тис.Рік тому
PrimeNG Menubar Component - Angular
PrimeNG Sidebar Component in Detail | Angular
Переглядів 6 тис.Рік тому
PrimeNG Sidebar Component in Detail | Angular
PrimeNG Chart in Angular
Переглядів 3,5 тис.Рік тому
PrimeNG Chart in Angular
PrimeNG Table Reorder - Column and Row Reorder | Angular 16
Переглядів 1,5 тис.Рік тому
PrimeNG Table Reorder - Column and Row Reorder | Angular 16
PrimeNG Icons set up in Angular Application
Переглядів 1,4 тис.Рік тому
PrimeNG Icons set up in Angular Application
PrimeNG Accordion in Angular
Переглядів 1,4 тис.Рік тому
PrimeNG Accordion in Angular
Part 5 - Server side Filter in Product List
Переглядів 1,7 тис.Рік тому
Part 5 - Server side Filter in Product List
PrimeNG Table - Lazy Mode | Server Side Pagination | Lazy Loading | Angular
Переглядів 10 тис.Рік тому
PrimeNG Table - Lazy Mode | Server Side Pagination | Lazy Loading | Angular

КОМЕНТАРІ

  • @Yns829
    @Yns829 11 днів тому

    Nice more js interview questions post cheyyuo advanced

  • @mecnun.c
    @mecnun.c 16 днів тому

    How do I write dynamic according to the menu table coming from the database (dynamic menu)?

  • @abhinavgupta7620
    @abhinavgupta7620 22 дні тому

    Thankyou So much Ma'am..

  • @muralimk4643
    @muralimk4643 Місяць тому

    Very useful tutorial, helped to understand primeng elements, create, update, delete operations with hands on. Thanks much Haseena for this video🎉👍

  • @saiprathap9550
    @saiprathap9550 Місяць тому

    Hi Haseena , I am on my page 5 , And now I perform sort by column now the page is going page 1 instead of staying on page 5 , any fix for this or this is the expected behaviour ....?

    • @haseena.khader
      @haseena.khader Місяць тому

      When we perform sorting or searching, you should see the new list..expected behaviour is page should be on 1. If you need to change the behaviour, change the value of first accordingly

    • @saiprathap9550
      @saiprathap9550 Місяць тому

      @@haseena.khader for event.first I am sending the 4 if I am on page 5 during sorting but still it's bringing me to the first page

  • @muralimk4643
    @muralimk4643 Місяць тому

    Very good Angular tutorial, helped me to understand PrimeNG UI components, Angular Routing concepts for navigating pages and authentication techniques. Clearly explained the concepts with hands on, thanks Haseena for publishing this content, really a great effort👏 . Since I used Angular 18 slightly updated the following things to make this project work in my environment. Worked perfectly👍🎉 1. File Name : register.component.ts & login.component.ts imports: [CardModule,InputTextModule,ReactiveFormsModule,ButtonModule,RouterLink,CommonModule] 2. File Name : home.component.ts imports: [ButtonModule], 3. File Name : tsconfig.json updated : "strict": false,//true added : "angularCompilerOptions":{..., "useDefineForClassFields": false} 4. File Name : app.component.ts imports: [RouterOutlet,ToastModule], providers: [MessageService], 5. File Name : app.config.ts import { importProvidersFrom } from '@angular/core'; import { provideHttpClient } from '@angular/common/http'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; providers: [...,provideHttpClient(),importProvidersFrom([BrowserAnimationsModule])] 6. Staring Json Server : json-server src/db.json

  • @SureshM-z1s
    @SureshM-z1s Місяць тому

    We need to use --no-standalone to generate module ts file in latest angular version. Command: ng new angular-login-app --routing --no-standalone 2) add "useDefineForClassFields": false property in tsconfig.json file under compilerOptions "compilerOptions": { "useDefineForClassFields": false, //other properties }

  • @blaaahhh
    @blaaahhh Місяць тому

    now when i am creating a new angular project app.module.ts file is not generated?

  • @ExtremeGutter
    @ExtremeGutter Місяць тому

    thank u so much!

  • @MuhamadAzizPrasetyo
    @MuhamadAzizPrasetyo Місяць тому

    Hello, thank u for the tutorial. I have followed your tutorial from the beginning, but I have encountered an error when running "pnpm run test". Is the error due to pnpm?

    • @haseena.khader
      @haseena.khader Місяць тому

      What is the error

    • @MuhamadAzizPrasetyo
      @MuhamadAzizPrasetyo Місяць тому

      @@haseena.khader Thank you for responding. After a day of searching for the problem, it turned out to be due to the placement of the project folder. Maybe because pnpm can't read if the folder structure is too deep. After I moved it, everything could run normally.

  • @jesti988
    @jesti988 Місяць тому

    Which lap good for coding ma'am

  • @jesti988
    @jesti988 Місяць тому

    Chechi malayalthil video chyamo!! Plz

  • @senpainlazygamedev.4017
    @senpainlazygamedev.4017 Місяць тому

    why is that property 'fb' is used before its initialization

  • @humayunhasanov3361
    @humayunhasanov3361 Місяць тому

    The Best testing setup tutorial I've seen👍👍👍

  • @Lucky-uz3je
    @Lucky-uz3je Місяць тому

    Lots of efforts and coding for just checkbox...😅 Other languages are far better and easy.

    • @harrisoncreates
      @harrisoncreates Місяць тому

      To be fair, she is using the reactive form approach in Angular; I personally prefer the template-driven form approach because it avoids having to semantically define everything in TypeScript in advance. You just build the HTML, provide an array of options for the PrimeNG checkbox module to use, and you've got a really extensible checkbox model going on. But I agree, the reactive form approach is significantly more effort than template-driven lol

  • @Tech-sl2hp
    @Tech-sl2hp Місяць тому

    This sis great tutorial! will love to see how you deploy

  • @sanatanShishya1521
    @sanatanShishya1521 Місяць тому

    I can't tell how much this tutorial helped to learn and implement together by watching video. It's works like charm.. Thanks for your great effort and work. Surely one day you will be on top of the coders channel here. Keep growing! Subscribed!

  • @devgalileu
    @devgalileu 2 місяці тому

    Thank you so much, i was having a setup issue and your video and repository helped me a lot!

  • @crazytk16
    @crazytk16 2 місяці тому

    The video I needed it!

  • @professormoriarty7439
    @professormoriarty7439 2 місяці тому

    Avasanm ethu manasilayi❤

  • @YoMbalKo
    @YoMbalKo 2 місяці тому

  • @TimmYCode
    @TimmYCode 2 місяці тому

    Is it working on touch devices?

  • @ekabeblessed
    @ekabeblessed 2 місяці тому

    Thank you for this tutorial.

  • @hagarmosleh5910
    @hagarmosleh5910 2 місяці тому

    Thanks alot mam❤ Iam having a little question ... If iam making a form with moving div Iam hiding the signup div using another div which contains a button How do i change the position of that div to hide the sign-in div instead of sign-up div .. a little notice ... they both at the same page i want to use that div with the button as a moving window to hide one of the sign-up or sign-in divs by moving the position of that moving div to right and left

  • @malayabehera8091
    @malayabehera8091 2 місяці тому

    Great teach sister

  • @xpnhcnsh
    @xpnhcnsh 2 місяці тому

    Hi, to use Primeng pagination, does the index of the data have to be self-grow INT number? Will it work if the database index is GUID?

  • @xpnhcnsh
    @xpnhcnsh 2 місяці тому

    thanks for demo!

  • @TheTrackoShow
    @TheTrackoShow 2 місяці тому

    really good

  • @alifuatcalik
    @alifuatcalik 2 місяці тому

    my example does not work at first. when i click the button, it works. how can i fix this?

  • @eestidev
    @eestidev 2 місяці тому

    I agree with previous comments, this is the best explanation of VITEST. Thanks!

  • @mikem7157
    @mikem7157 2 місяці тому

    this should have more likes. Your videos are reinforcing my current learning and your examples and explanations are very helpful. Thank you for your work.

  • @NidheeshPV-pg6vy
    @NidheeshPV-pg6vy 3 місяці тому

    Thanks a lot..

  • @federicociociano3169
    @federicociociano3169 3 місяці тому

    Thanks! The first clear explanation about this component that I see! It help me so much

  • @puzzlegame7359
    @puzzlegame7359 3 місяці тому

    can you please create a video, how to add husky pre commit hooks...

  • @mohsinrahman8107
    @mohsinrahman8107 3 місяці тому

    I am testing react app... where should we add lines that you added in tsconfig.josn ?

  • @germanvillegas5010
    @germanvillegas5010 3 місяці тому

    Great tutorial! Please make more videos in Angular, Thank you so much, greetings from Mexico!

  • @reidecarvalho
    @reidecarvalho 3 місяці тому

    Does the "_like" filter still work on json server? It didn't work for me

  • @justinlokesh9565
    @justinlokesh9565 3 місяці тому

    can you please update the same concept using angular material

  • @matutee5158
    @matutee5158 3 місяці тому

    I have a table that has a manage action that takes you to another child screen, and when that screen comes back I need to keep my filters on the parent screen

    • @haseena.khader
      @haseena.khader 3 місяці тому

      You can keep that in global state or local storage

    • @matutee5158
      @matutee5158 3 місяці тому

      @@haseena.khader Good! Now how can I access my filter input from my TS file? When I return I can't how to access the input and put the saved value in my filter input

    • @haseena.khader
      @haseena.khader 3 місяці тому

      Oninit you set the value for input

  • @andersonjoelparrarocha9382
    @andersonjoelparrarocha9382 4 місяці тому

    hola, puede agregar porfavor el repositorio de ese ejemplo, nuevo suscriptor

  • @rafosoalc
    @rafosoalc 4 місяці тому

    very good! make an example by changing the language

  • @endaruliu2216
    @endaruliu2216 4 місяці тому

    The best explanation ever

  • @harshitgarg5499
    @harshitgarg5499 4 місяці тому

    Thanks a lot for the amazing tutorial, just the thing I was looking for. I have a question.. If I am using rtk-query for api data handling, will the server and handler test files will require a major changes.....

  • @devxbasit
    @devxbasit 4 місяці тому

    thank you, I was struck. I was importing MenuModule instead of MenuBarModule. In just the first 30 seconds I got my problem solution.

  • @MadaraUchiha-es6pi
    @MadaraUchiha-es6pi 4 місяці тому

    Hello Ma'am, Thank you so much ❤ for this amazing tutorial. Your idea of this project and explanation ❤, both are amazing. One thing i did not understand. my interface is completely blank only the default code is there but still registration is working perfectly, the data is saved into db. how is this happening? i'm asking for only registraion. Please reply and Thanks Again.

  • @R2r_1337
    @R2r_1337 4 місяці тому

    Thx, that's exactly what I needed

  • @izaroth1210
    @izaroth1210 4 місяці тому

    how can I set an active item?

  • @abdulrafay2420
    @abdulrafay2420 4 місяці тому

    How can I apply two-way binding on primeng editor?

  • @lastwarriorjitus
    @lastwarriorjitus 4 місяці тому

    mam how can I set with and height to calender bcoz after certain width it stop increasing please help

  • @metalzoah2920
    @metalzoah2920 4 місяці тому

    I got a problem with updateTodo in the service, I change it for this in the service: updateTodo(id: Todo['id'], completed: boolean) { return this.http.patch(`${this.baseUrl}/todos/${id}`, { completed }); } and in the component like this: updateTodo(e: CheckboxChangeEvent, todo: Todo) { console.log('ID a actualizar:', todo.id); this.todosService.updateTodo(todo.id, e.checked).subscribe( response => { console.log(response); } ) } if the problem persists just restart the json server it work for me too Amazing video anyways<3